PWA 與 AMP：如何做出正確的決定？

已發表: 2019-07-26

目錄

最新統計數據證實，有 46.8 億移動用戶在積極上網和瀏覽網頁。 近 3 年前，移動流量首次超過桌面流量，聲稱 51.3% 的互聯網用戶是移動設備用戶，並且這個數字一直在不斷增加。 儘管這個術語自過去十年以來一直在流傳，但現在確實是“移動優先”時代已經開始。

因此，看到組織首先致力於為移動用戶提供更好的服務和體驗也就不足為奇了。 然而，幾年前，當 PWA 和 AMP 推出時，谷歌就加入了移動潮流。

PWA 和 AMP 都旨在增強用戶在使用移動設備兼容平台時的 Web 體驗。 但是用戶經常對 PWA 和 AMP 感到困惑。

讓我們為您節省一些時間，幫助您了解 PWA 和 AMP 之間的區別。

什麼是 PWA？

Starbuck Progressive Web App 示例
星巴克——最好的 PWA 示例之一

PWA代表Progressive Web App ，它旨在通過在瀏覽器上訪問其網頁，為用戶提供移動應用程序的外觀和體驗。

換句話說，PWA 是一個優化的網頁，可以提供類似應用程序的功能。 此外，當在移動 Web 上訪問平台或其服務時，PWA 可以工作，但無需安裝其移動應用程序。

如前所述，PWA 專注於提供類似應用程序的功能。 這包括：

  • 頁面之間的更快轉換
  • 一個完整的類似應用程序的界面
  • 能夠發送推送通知（需要用戶許可）
  • 離線內容可訪問性等。

對於那些不熟悉“PWA”一詞的人，我們這裡有一份 PWA 綜合指南，可以滿足您的所有需求。

我們已經有了移動應用程序，那麼為什麼我們需要漸進式網絡應用程序呢？

我們都知道移動設備允許用戶從 App Store 或 Google Play 下載原生應用程序，但 PWA 更好。 為什麼以及如何？

Andrew Gazdecki 在福布斯的一篇文章中回答了這個問題，“ PWA 比原生應用程序更高效。 它們按需工作並且始終可以訪問，而不會佔用智能手機寶貴的內存或數據。 通過選擇在同一應用程序的本機版本上使用 PWA，用戶消耗的數據更少。 然而，這並不意味著用戶需要犧牲原生應用的便利性。 他們仍然可以將 PWA 保存到他們的主屏幕——它可以安裝，無需真正下載。”

亞馬遜應用與 PWA

最近，我們使用的最流行的原生移動應用程序正在使用 PWA 使他們的平台更易於訪問，尤其是電子商務和社交媒體門戶。

 推薦閱讀：Progressive Web App vs Native App：哪個更適合你？

到你了：

對於尋求全方位完美 Progressive Web App 解決方案的 Magento 商家，我們在 SimiCart 為您和您的商店提供完整的軟件包。 立即探索！

接下來，什麼是AMP？

AMP 加速移動頁面

AMP 或 Accelerated Mobile Page 由 Google 於 2015 年推出，旨在為移動設備創建更快的加載網頁。 Google 開源了“AMP 項目”來幫助開發人員構建這些網頁。

為了創建適合移動設備的網站，刪除了不必要的（內聯）JavaScript。 此外，CSS 被限制為 50KB 以供內聯使用，並且 Google 緩存網站內容以提供類似 CDN 的功能。 除其他功能外，AMP Web 組件還提供（有限的）JavaScript 插入作為 AMP 庫的一部分，您可以使用它向移動網頁添加動畫，而不會冒延遲的風險。

AMP 加速移動頁面示例

在當前場景下，AMP 不再局限於網站。 有 AMP 廣告、AMP 電子郵件，甚至 AMP 故事。 所有這些的 AMP 版本都是為了在移動設備上快速呈現而構建的。

圖片來源：橫幅小吃

“這些天來，如果不是即時的——它還不夠快。 如果廣告速度緩慢並且破壞了用戶體驗，即使是最令人難忘的創意也無法發揮其作用。” 解釋 AMP 網站。

正如廣告所預期的那樣，AMP 廣告通過獲得更好的點擊率來最大限度地提高投資回報率。 它們被證明可以提供相同的效果。 Triplelift – 一家原生廣告技術公司，其收入增長了 13%，這歸功於使用 AMP 廣告將廣告加載速度提高了 6 倍。

PWA 與 AMP：差異

比較 AMP 與 PWA

AMP 和 PWA 可以一起使用嗎？

是的，AMP 和 PWA 可以一起使用，以提供優雅的用戶體驗。 這是它的樣子：

首先，用戶搜索服務，啟用 AMP 的結果出現在他/她的屏幕上。 這意味著一個輕量級和預緩存的網站正在等待用戶點擊。 一旦用戶點擊該網站，發布者就可以通過要求發送推送通知的類似應用的網頁 (PWA) 吸引用戶。 該網頁為用戶提供了以下功能：

  • 內容和服務的離線瀏覽
  • 即使在互聯網連接緩慢的情況下也能平穩過渡
  • 類似應用程序的體驗

是什麼阻止我們採用這個想法？

嗯，主要的挑戰是發展。 雖然 AMP 遵循僅使用 HTML 和 CSS 並完全避免使用 JavaScript（大部分情況下）的規則，但 PWA 頁面主要使用啟用了 JavaScript 的服務工作者來設計。

但是，可以通過創建用於 SERP 的單獨 AMP 頁面來解決此問題，然後將流量轉移到 PWA 頁面。 這意味著 AMP 頁面可用於在搜索引擎上獲得良好的排名，一旦用戶點擊打開 AMP 頁面，瀏覽器就會啟動 PWA 頁面以提高用戶參與度和留存率。

總結一下

PWA 和 AMP 是針對手機的不同技術。 AMP 用於更快地加載網頁，PWA 用於提供原生應用程序的外觀和感覺，這對於移動商務網站非常有用。

根據 Adob​​e 的研究，從 2018 年 11 月 1 日到 12 月 31 日，他們 40% 的收入來自移動設備。10.5% 的移動流量帶來了轉化，而桌面流量的轉化率為 7.4%，很明顯，企業，無論大小，都應該認真對待他們的移動受眾，並根據他們的需求開始投資於 AMP、PWA 和/或兩者。

最後，兩者都是提高網站性能和用戶體驗的強大工具。 您可以選擇兩種技術中的任何一種，也可以簡單地實施兩種技術以體驗兩者的最佳效果。 這是你的選擇。

推薦帖子：漸進式 Web 應用程序 (PWA) 是否有利於 SEO？ （帶有統計和示例）

探索 SimiCart PWA