PWA 與 AMP：哪個更好以及它們之間有何不同？

在推出第一部 iPhone 大約十年後，移動網絡終於趕上了用戶的生活方式。 響應式頁面消除了捏合和縮放功能。 AMP 和本機應用程序與緩慢的加載時間作鬥爭……

但是移動網絡仍然存在一個主要問題：參與度。 排名前 1,000 的移動網站覆蓋的人數是排名前 1,000 的原生應用程序的 4 倍。 然而，這些網站吸引用戶的時間平均比移動應用程序少 20 倍。

似乎移動網站可以吸引訪問者，但無法留住訪問者。 解決此問題的新技術之一是漸進式 Web 應用程序。

什麼是漸進式網絡應用程序？

漸進式 Web 應用程序是移動網站體驗，旨在以原生移動應用程序的方式進行外觀、感覺和工作。 用戶在瀏覽器中遇到它們，就像在任何移動網站上一樣。 與該網站互動後，系統會提示用戶在其設備上安裝 Web 應用程序。 如果他們選擇安裝，應用程序將以原生應用程序的方式下載到設備。

“漸進式網絡應用程序”一詞是谷歌在 2015 年創造的。該公司表示，漸進式網絡應用程序符合三個標準：

• 可靠– 即時加載，即使在不確定的網絡條件下也不會出現低級現象。
• 快速– 通過絲般流暢的動畫和無卡頓的滾動快速響應用戶交互。
• 引人入勝- 感覺就像設備上的自然應用程序，具有身臨其境的用戶體驗。

在滿足這些要求後，移動網絡應用程序可以作為可下載的方式提供給用戶。 在我們深入研究漸進式 Web 應用程序之前，讓我們簡要回顧一下表面並定義本機應用程序和另一種加速移動 Web 的技術，Accelerated Mobile Pages (AMP)。

什麼是原生應用？

本機應用程序通過 App Store 或 Google Play 等市場安裝，並作為設備主屏幕上的圖標顯示。 它們專為特定設備設計，可以使用其所有功能，例如 GPS、相機、聯繫人列表等。 這些應用程序目前可能在您的設備上，例如 Google 地圖、Gmail 或 Instagram。

什麼是AMP？

開源 Accelerated Mobile Pages 項目（簡稱 AMP）允許開發人員使用獨特的編碼語言構建幾乎即時加載的網頁。 該語言是 HTML 和 CSS 的精簡版本，限制了 JavaScript 的使用。 這些頁面託管在 CDN 上，當用戶訪問頁面時，CDN 會提供頁面的緩存版本。

漸進式網絡應用程序與本機應用程序

本機應用程序提供即時和無縫的用戶體驗，它們得到 App Store 和 Google Play 等大型市場的支持，那麼為什麼要選擇漸進式網絡應用程序而不是傳統的本機版本呢？ 在 Forbes 的一篇文章中，Andrew Gazdecki 提供了一個高層次的解釋：

移動網站訪問起來既快捷又容易，但在用戶體驗方面往往不太令人愉快。 本機應用程序提供了最好的用戶體驗，但它們僅限於某些設備，並且具有很高的採用障礙。 原生應用程序需要下載，這意味著首先會引起消費者的大量購買，而失去沖動行為的好處。 介於這些選項之間的是最新的移動解決方案：PWA。

為了更精確的解釋，讓我們看看原生應用程序和漸進式 Web 應用程序之間的一些最大區別：

• 功能使用：目前，雖然網絡應用程序可以利用設備的功能，但本機應用程序可以更多地利用。 GPS、推送通知和手勢等內容在本機應用程序中更容易獲得。
• 內容限制：為了讓您的應用有機會在 Google Play 或 App Store 中競爭，您必須屈從於市場規則。 內容限制和費用使某些網站難以創建成功的本機應用程序。 然而，對於網絡應用程序，既沒有內容限制也沒有收費，這使得任何人都可以更輕鬆地創建應用程序，而不管內容類型如何。
• 離線連接：這裡的優勢在於本機應用程序，它提供比 HTML5 內置的漸進式 Web 應用程序更完整的緩存。 如果您的應用程序必須離線工作，目前更好的選擇是原生的。
• 安裝：安裝本機應用程序需要代表用戶執行重大操作。 他們必須打開一個市場並蒐索應用程序，然後下載。 必須有認真的意圖。 對於漸進式 Web 應用程序的安裝，摩擦要小得多。 添加一個到您的設備就像在您的主屏幕上創建一個書籤。 安裝漸進式 Web 應用程序更容易，但該過程不太熟悉，這可能會阻礙早期採用。
• 速度：目前，漸進式 Web 應用程序落後於本機應用程序。 然而，他們正在不斷縮小差距。 當您考慮下一個比較時尤其如此。

漸進式網絡應用與 AMP

像 Gazdecki 這樣的人相信漸進式 Web 應用程序最終會取代原生應用程序，但 AMP 呢？ 加速移動頁面從何而來，兩者都有嗎？ 這兩者之間的一些主要區別：

• 可發現性： AMP 贏得了這場戰鬥。 AMP 在 Google 搜索結果中獲得了輪播的幫助，其中漸進式網絡應用程序無法提高搜索引擎的可發現性。
• 參與度：漸進式網絡應用程序不限於使用 AMP HTML 或 CSS，因此它們可以包含比 AMP 更具吸引力的內容。 無法使用 AMP 框架創建任何需要 JavaScript 的交互式內容。 對於 AMP，動態內容不在討論範圍之內。
• 速度：這裡的優勢在於 AMP，原因與漸進式網絡應用程序贏得參與的原因相同。 AMP 只能支持輕量級內容，但這可以縮短加載時間。

在 Smashing Magazine 中，Paul Bakaus 很好地總結了兩種格式之間的權衡：

為了使體驗可靠、快速，您需要在實施 AMP 頁面時接受一些限制。 當您需要高度動態的功能（例如推送通知或 Web 支付）或任何需要額外 JavaScript 的東西時，AMP 沒有用處。

此外，由於 AMP 頁面通常由 AMP 緩存提供，因此您不會在第一次點擊時獲得最大的 Progressive Web App 優勢，因為您自己的 Service Worker 無法運行。 另一方面，漸進式 Web 應用程序在第一次點擊時永遠不會像 AMP 一樣快，因為平台可以安全且廉價地預渲染 AMP 頁面——這一功能也使嵌入更簡單（例如，嵌入到內嵌查看器中）。

但是，最終，我們真的必須選擇其中之一嗎？

合作大於競爭

您可以選擇僅使用 AMP 來創建快速但簡單的體驗。 您可以依靠漸進式 Web 應用程序來創建動態但速度較慢的用戶體驗。 或者，您可以通過將兩者結合到您的網頁設計中來快速開始並保持快速。

如今，AMP 與漸進式 Web 應用程序的結合使用變得越來越普遍，開發人員可以通過三種方式同時使用這兩種應用程序。

1. 作為漸進式網絡應用的 AMP

如果您的內容主要是靜態的並且您可以滿足於 AMP 的有限功能，則此選項允許您創建作為漸進式 Web 應用程序的閃電般的快速體驗。 例如，AMP 就是這樣構建的——漸進式網絡應用程序完全由 AMP 充電。 它有一個允許離線訪問的服務工作者，以及一個提示“添加到主屏幕”橫幅的清單。

2. AMP 到漸進式網絡應用

另一種結合使用 AMP 和漸進式網絡應用程序的方法是將您的 AMP 頁面視為您網站的掛鉤。 它以瞬時負載捕獲用戶，然後將他們捲入您的漸進式 Web 應用程序。 這允許您將快速加載的 AMP 頁面與比第一個選項更動態的 PWA 相結合。

3. 漸進式網絡應用中的 AMP

就像 AMP 與 PWA 的情況一樣，它不一定是全有或全無。 您不需要使用 AMP 構建所有頁面； 您也不需要將 AMP 和 PWA 作為鉤子和桿分開。 現在，您實際上可以僅 AMP 單個頁面的一小部分，從而減小其大小並縮短其加載時間，而無需完全權衡動態功能。

這涉及使用另一種形式的 AMP，稱為“Shadow AMP”，它允許 AMP 嵌套在網頁的某個區域內。 結果是漸進式 Web 應用程序外殼內的 AMP。 要查看它的實際效果，請查看 Google 創建的名為 ShadowReader 的演示：

準備好創建自己的漸進式 Web 應用了嗎？

從這裡開始創建具有 Web 可發現性的快速、類似於原生應用程序的體驗，您可以在此處了解滿足 Google 對 PWA 的標準所需的所有復選框。 有關同時使用 AMP 和 PWA 的更多信息，請查看：

• 本·莫斯的演講
• 埃里克·林德利 (Eric Lindley) 的演講

準備好後，開始使用 Instapage 中的 AMP 點擊後登錄頁面構建器來提供您最快的用戶體驗。