漸進式web應用程序

Do you understand what PWAs and AMPs are, and which might be better for you? Let's have a look and find out.

您了解什么是PWA和AMP，哪一種可能更適合您？ 讓我們看看并找出答案。

So many people own smartphones these days. This opens up endless opportunities for a business - opportunities which, however, are immediately challenged by the immense number of competitors in the mobile software market.

這些天有很多人擁有智能手機。 這為企業開辟了無限的機會-但是，這些機會立即受到移動軟件市場上眾多競爭對手的挑戰。

Mobile apps are surely more convenient than web or desktop platforms. Yet, they are not the most comfortable option that the industry offers.

移動應用肯定比Web或桌面平臺更方便。 但是，它們并不是業界提供的最舒適的選擇。

To hit the highest level of user satisfaction and to outrun competitors, inventive people opt in favor of progressive web apps (PWAs) or accelerated mobile pages (AMPs).

為了達到最高的用戶滿意度并超越競爭對手，富有創造力的人們選擇了漸進式Web應用程序(PWA)或加速移動頁面(AMP)。

What are these things, and how should you choose the best option? Let’s consider each one-by-one by going through these simple questions:

這些是什么東西，您應該如何選擇最佳選擇？ 讓我們通過以下簡單的問題逐一考慮：

1. What is a PWA?
   什么是PWA？
2. What is an AMP?
   什么是AMP？
3. How are they similar?
   它們有何相似之處？
4. How are they different?
   它們有何不同？
5. Why PWAs are better than web pages
   為什么PWA比網頁更好
6. Why PWAs are better than native mobile
   為什么PWA比本機移動更好
7. Why AMPs are better than web pages
   為什么AMP比網頁更好
8. Why AMPs are NOT better than native mobile
   為什么AMP并不比本地移動電話好

1.什么是PWA？ (1. What Is a PWA?)

A progressive web application, or PWA, unites the advantages of both web and mobile apps into a single software product. As Google declares, PWAs are “user experiences that have the reach of the web and are reliable, fast, and engaging”. It is a technology that lets you use a website as if it was a native app.

漸進式Web應用程序(即PWA)將Web和移動應用程序的優點結合到一個軟件產品中。 正如Google所宣稱的那樣，PWA是“具有網絡影響力，可靠，快速且引人入勝的用戶體驗”。 它是一項技術，可讓您像使用本地應用程序一樣使用網站。

Twitter is one of the major companies using PWAs. To install the app, you open the web version on your phone and add it to your home screen. When you open Twitter from the home screen icon, you will be opening it as a progressive web app.

Twitter是使用PWA的主要公司之一。 要安裝該應用，請在手機上打開網絡版本并將其添加到主屏幕。 從主屏幕圖標打開Twitter時，您將其作為漸進式Web應用程序打開。

基本原理 (Fundamentals)

PWAs are a highly responsive and easily shareable solution, which can work offline. They store HTML and CSS files in the browser cache and archive them with service workers. This makes it possible to use the web page offline. Service workers are one of the three essential components of a PWA, along with the manifest file and a secure protocol HTTPS.

PWA是一種響應Swift且易于共享的解決方案，可以脫機工作。 他們將HTML和CSS文件存儲在瀏覽器緩存中，并與服務工作者一起將其存檔。 這樣就可以離線使用網頁。 服務人員以及清單文件和安全協議HTTPS是PWA的三個基本組件之一。

Service workers are JavaScript code components which play the role of a proxy between the network and the browser.

服務工作者是JavaScript代碼組件，它們充當網絡和瀏覽器之間的代理角色。

When you open a web page for the first time, service workers store the necessary data in the browser cache. When you open it for the second time, service workers retrieve this data from the cache even before the app checked network availability.

首次打開網頁時，服務人員將必要的數據存儲在瀏覽器緩存中。 當您第二次打開它時，服務人員甚至在應用檢查網絡可用性之前就從緩存中檢索此數據。

Not only do they provide the ability to work offline but also they greatly boost the response time. Service workers also manage push notifications.

它們不僅提供脫機工作能力，而且還大大提高了響應時間。 服務人員還管理推送通知。

The manifest file is a JSON file containing all the information about your app. For instance, it contains data about the home screen icon of your PWA, its short name, color palette, or theme.

清單文件是一個JSON文件，其中包含有關您的應用程序的所有信息。 例如，它包含有關PWA的主屏幕圖標，其短名稱，調色板或主題的數據。

If you are using the Chrome browser on an Android phone, the manifest file will trigger the automatic installation of the PWA onto your phone.

如果您在Android手機上使用Chrome瀏覽器，則清單文件將觸發將PWA自動安裝到手機上。

The secure HTTPS protocol is an absolute must if you develop a progressive web app. While service workers make the very concept of a PWA possible, they are vulnerable to network errors or breaches. Service workers can intercept network requests and modify responses. To ensure data security and network security, the secure protocol needs to be used.

如果您開發漸進式Web應用程序，則絕對必須使用安全的HTTPS協議 。 盡管服務人員使PWA的概念成為可能，但他們容易受到網絡錯誤或破壞的影響。 服務人員可以攔截網絡請求并修改響應。 為了確保數據安全和網絡安全，需要使用安全協議。

成功的故事 (Success stories)

Twitter is not the only company that has benefited from PWAs. Check out these case studies published by Google to see how this technology helped popular businesses succeed. Among these companies are Pinterest, Alibaba, The Weather Channel, Lancome, and The Home Depot.

Twitter不是唯一從PWA中受益的公司。 查看由Google發布的這些案例研究 ，以了解這項技術如何幫助熱門企業取得成功。 在這些公司中，有Pinterest ， 阿里巴巴 ， 天氣頻道 ， 蘭蔻和家得寶。

2.什么是AMP？ (2. What Is an AMP?)

AMP stands for accelerated mobile page. It's a mobile-friendly web page, which is designed to be loaded instantly. It is a fast and smoothly loading solution which is developed with the user experience in mind. Introduced as an open-source project, the AMP technology was integrated by Google in February 2016.

AMP代表加速的移動頁面。 這是一個適合移動設備的網頁，旨在立即加載。 這是一個快速且流暢的加載解決方案，它是根據用戶體驗開發的。 AMP技術作為一個開源項目引入，于2016年2月由Google集成。

In 2016, The Guardian announced that their platform was now available as an AMP. To help readers see how it worked, they displayed the same article both as a web version and an AMP version.

2016年， 《衛報》宣布他們的平臺現已可作為AMP使用。 為了幫助讀者了解它是如何工作的，他們展示了與Web版本和AMP版本相同的文章。

There were some differences, but they were insignificant. But what you'd notice right away was how much faster the AMP article loaded compared to the regular web article.

雖然存在一些差異，但是它們并不重要。 但是，您會立即注意到，與常規Web文章相比，AMP文章的加載速度更快。

基本原理 (Fundamentals)

The idea of AMPs is to reduce the amount of unnecessary content and functionality so that the app displays essential content immediately. The data can be reduced up to ten times. The three essential components of AMPs are AMP HTML, AMP Components, and the AMP Cache.

AMP的想法是減少不必要的內容和功能，以便該應用程序立即顯示基本內容。 數據最多可減少十倍。 AMP的三個基本組件是AMP HTML，AMP組件和AMP緩存。

AMP HTML is a simplified version of regular HTML. AMP HTML does not allow some tags and elements of HTML (for example, forms). To understand better what AMP HTML should look like, check out the required mark-up.

AMP HTML是常規HTML的簡化版本。 AMP HTML不允許HTML的某些標簽和元素(例如，表單)。 為了更好地了解AMP HTML的外觀，請查看所需的標記 。

AMP Components are the scripts that enable you to do without JavaScript. The idea of AMP is to get rid of all JavaScript scripts as make pages load more slowly.

AMP組件是使您無需JavaScript即可執行的腳本。 AMP的想法是消除所有JavaScript腳本，因為這會使頁面加載更加緩慢。

But this does not mean that your page should do without animations, modified layouts, analytics data, autocomplete suggestions, or ads. There is an extensive library of components that enable you to implement these and a lot of other features.

但這并不意味著您的頁面應該沒有動畫，修改的布局，分析數據，自動完成建議或廣告。 有大量的組件庫 ，使您能夠實現這些功能以及許多其他功能。

The AMP Cache is a proxy-based content delivery network which fetches and caches page content. AMP Cache enables you as an app owner to easily introduce page updates. It optimizes and, if needed, modifies the AMP.

AMP緩存是基于代理的內容交付網絡，可獲取和緩存頁面內容。 AMP Cache使您作為應用程序所有者可以輕松介紹頁面更新。 它優化并在需要時修改AMP。

成功的故事 (Success stories)

The same as with PWAs, companies are often very proud of the business advantages that AMPs offer. Here is a collection of success stories and case studies of companies that used AMPs and benefited from them. Musement, RCS MediaGroup, CNBC, The Washington Post are all companies that have implemented or plan to implement AMPs.

與PWA一樣，公司通常對AMP提供的業務優勢感到非常自豪。 這里是使用AMP并從中受益的公司的成功案例和案例研究的集合。 Musement ， RCS MediaGroup ， CNBC ， 《華盛頓郵報》都是已經實施或計劃實施AMP的公司。

3. PWA和AMP有何相似之處？ (3. How Are PWAs and AMPs similar?)

Both PWAs and AMPs are methods of displaying web pages on mobile devices. Both of them are created to enhance the user experience.

PWA和AMP都是在移動設備上顯示網頁的方法。 兩者都是為了增強用戶體驗而創建的。

AMPs and PWAs both help reduce page load time. While AMPs may be slightly more effective in terms of loading speed than PWAs, the difference between AMP and PWA loading times is barely noticeable.

AMP和PWA都有助于減少頁面加載時間。 雖然AMP在加載速度方面可能比PWA稍微有效，但是AMP與PWA加載時間之間的差異幾乎沒有引起注意。

Both technologies are actively supported by Google. There is a PWA page on Google Developers and an AMP page on Google Developers as well.

谷歌積極支持這兩種技術。 Google Developers上有一個PWA頁面，Google Developers上也有一個AMP頁面 。

There are not a lot of other similarities, but this primary similarity is essential.

其他相似之處并不多，但是主要相似之處至關重要。

Now let’s see what the differences are.

現在，讓我們看看有什么區別。

4. PWA和AMP有何不同？ (4. How Are PWAs and AMPs Different?)

出現 (Appearance)

By using a PWA you do not feel like you are using a web page. PWAs look and feel like a mobile app.

通過使用PWA，您不會覺得自己在使用網頁。 PWA的外觀和感覺就像一個移動應用程序。

By using AMPs, you are well aware that you are using a web page because it looks the same.

通過使用AMP，您會清楚地知道您正在使用網頁，因為它看起來是一樣的。

發展歷程 (Development)

In the case of PWAs, the application code is written either from scratch or with some parts of the existing code.

對于PWA，應用程序代碼是從頭開始編寫的，或者是與現有代碼的某些部分一起編寫的。

In the case of AMPs, the existing code of a web page is stripped of unnecessary CSS and JS so that the web page loads faster.

在使用AMP的情況下，去除了網頁現有代碼中不必要CSS和JS，從而使網頁加載速度更快。

用戶體驗 (User experience)

PWAs offer a much better user experience. They have push-notifications, a home screen icon, and no browser tabs. Also, they are much easier to download and lighter in size than a regular mobile app. PWAs load faster than a regular web version because they are embedded with App Shell. And PWAs can be used when the network connection is down.

PWA提供了更好的用戶體驗。 它們具有推送通知，主屏幕圖標，并且沒有瀏覽器選項卡。 而且，與常規移動應用程序相比，它們更容易下載且大小更輕。 由于PWA嵌入在App Shell中，因此其加載速度比常規Web版本要快。 當網絡連接斷開時，可以使用PWA。

AMPs offer a slightly improved user experience since the page loads faster than a regular page. Still, this is the only UX advantage that they offer. Unlike PWAs, AMPs cannot work offline.

由于頁面加載速度比常規頁面快，因此AMP可以提供稍微改善的用戶體驗。 盡管如此，這是它們提供的唯一UX優勢。 與PWA不同，AMP無法離線工作。

性能 (Performance)

From an SEO standpoint, AMP wins the competition. Google favors these pages and lists them in the carousel of top stories, which can increase your click-through rate.

從SEO的角度來看，AMP贏得了競爭。 Google偏愛這些頁面，并將它們列出在熱門話題的輪播中，這可以提高您的點擊率。

PWAs, in turn, do not have a direct advantage for SEO. However, better user experience translates into higher retention rates, which helps you win with SEO.

反過來，PWA對于SEO沒有直接優勢。 但是，更好的用戶體驗可以提高保留率，從而幫助您贏得SEO。

翻譯自: https://www.freecodecamp.org/news/pwa-vs-amp-what-is-the-difference-and-how-do-you-choose/

漸進式web應用程序