什麼是 PWA？ 對非技術人員的簡單解釋

你應該事先知道這篇文章是從營銷人員的角度寫的。 （嗯，我可以讀寫一些 HTML 和 CSS，我可以在一定程度上理解 Javascript，但這並不能使我成為技術人員）。

什麼是 PWA？

PWA （漸進式Web 應用程序）允許 Web 瀏覽器具有原生移動應用程序（即從 iOS 和 Android 商店下載的應用程序）的外觀和感覺。 這些原生應用程序針對流暢的移動體驗進行了優化，同時具有一些獨特的功能，例如網絡推送通知。 PWA 技術利用 Chrome 和 Safari 等瀏覽器上的網絡衝浪體驗，使其接近原生應用程序的體驗。 結果，這增強了網絡的流量和參與度。

該術語於 2015 年由 Google 首次引入。根據 Pete LePage – Google Developer Advocate 的說法，“進步”部分可以解釋為“隨著用戶逐漸與應用程序建立關係，它變得越來越強大”。

PWA 和網站一樣嗎？

是的，漸進式 Web 應用程序是網站。

然而，由於現代網絡技術，它們看起來和感覺就像一個應用程序。 這意味著用戶將在他們的瀏覽器上使用 URL 瀏覽 Progressive Web Apps，就像他們瀏覽任何網站一樣，但是在他們登陸 PWA 之後，他們就可以在瀏覽器上獲得使用“應用程序”的體驗，而無需下載並安裝。

作為“應用程序”並不意味著 PWA 僅限於移動設備。 它們也可以在桌面上實現。 事實上，您可能之前經常訪問 PWA，甚至沒有意識到這一點。 如果您曾經在筆記本電腦上瀏覽過 Instagram、Pinterest 或 Tinder，那麼恭喜您！ 您已經在網絡上遇到了一些最成功的 PWA 採用者。

讓我們看一個 PWA 網站的示例，因為它可以幫助您更輕鬆地理解 PWA。

PWA 示例

G-SP 電子商務網站是一個 PWA。 當您在手機上訪問網站時，您實際上可以將網站 URL 添加到手機主屏幕。

然後，只要您想重新訪問該網站，它就在您的主屏幕上，並帶有一個圖標，就像 Facebook 或 Linkedin 等任何其他應用程序一樣。

從主屏幕打開 G-SP 網絡應用程序，您可以看到網站現在是全屏的，沒有瀏覽器的搜索欄。 此外，它的底部還有一個類似應用程序的導航菜單。 更重要的是，當您滾動並點擊時，感覺就像黃油一樣光滑，這與您之前可能擁有的一些網頁瀏覽體驗不同。

 推薦閱讀：
- G-SP PWA 案例研究：一流移動體驗的轉變
- PWA 的前 3 個用例

判斷網站是否為 PWA 的提示

除非您是開發人員並深入研究該網站的源代碼，否則您無法準確判斷網站是否基於 PWA 技術構建。

話雖如此，有一些技巧雖然不能保證準確的結果，但可以給你一些跡象，表明給定的網站是 PWA。

單頁網站

這是判斷網站是否是 PWA 的最簡單方法。 它基於 PWA 的性質：Progressive Web Apps 在技術上是一個單頁網站。 這並不意味著基於 PWA 構建的網站只有一個頁面。 這意味著頁面查看事件只發生一次，當用戶最初加載網站時。 之後，所有頁面加載都由 Javascript 處理。 這與普通網站不同，其中每個頁面更改都會導致頁面及其整個 HTML 源重新加載。

那麼這是如何工作的呢？ 好吧，很簡單：看看瀏覽器上的活動標籤。 如果站點是 PWA，當您更改頁面時站點不會重新加載，這意味著瀏覽器選項卡上沒有“加載”動畫。

我們可以看出《紐約時報》網站不是 PWA：

讓我們以我們的網站 SimiCart 為例：

明白了嗎？ 當您更改頁面時，該網站不會重新加載！ 從技術上講，您只是一直停留在一個“頁面”上。 這就是 PWA 頁面加載如此快速和流暢的原因。 所有頁面都是在您第一次訪問該網站時預加載的，之後會交付給您。 它們不依賴於您的網絡速度，甚至可以離線工作！

服務人員

不，這不是人類工人。 Service Workers 是 Progressive Web App 背後的技術名稱，它支持其離線功能、推送通知和資源緩存。 根據 Google 的說法，Service Worker 是 PWA 技術的核心。 因此，如果我們能夠確定一個網站是否使用了 Service Workers 技術，我們就可以判斷該網站是否可能是PWA。

如果您使用的是基於 Chrome 的瀏覽器，則可以使用 Inspector Tool 輕鬆檢查。 右鍵單擊要檢查的網站，單擊檢查元素。 然後，轉到應用程序選項卡 > Service Worker。 您可以輕鬆查看該站點上是否有任何 Service Worker。

同樣，這個技巧只會提示您某個網站是 PWA 的可能性。 雖然是 PWA 的核心部分，但 Service Worker 並不是 PWA 獨有的。 非 PWA 網站也可以利用 Service Worker 來增強其功能。

如果您想了解有關 PWA Service Worker 的更多信息，我們有獨家文章供您了解有關這項驚人技術的所有信息。

HTTPS 安全來源

但是，您可以通過查看其 URL 來準確判斷網站是否不是PWA。 如果網站的 URL 以http://而不是https://開頭，則它不是 PWA。 這是因為 PWA 只能在運行在安全域（即HTTPS ）上的網站上運行。

PWA 有多受歡迎？

正如 Google 所暗示的那樣，PWA 是“移動應用程序的未來”，PWA 越來越受歡迎，首先是在大型企業中，然後是小型企業和組織。

它推動著幾乎無處不在的競爭——從 Windows 平台到 Google Play 商店等主要應用市場

你會發現很多大牌的網站都是PWA，比如Telegram、AliExpress、FlipBoard，甚至是熟悉的PWA遊戲的PWA版本，比如2048或Web Flap。

PWA 的好處：Progressive Web Apps 可以做什麼？

在撰寫本文時，PWA 已經可以完成大部分以前原生應用程序獨有的事情。 這包括訪問設備級功能，如攝像頭和麥克風、GPS、離線模式、文件訪問等等。 要了解 PWA 的功能，您可以查看https://whatpwacando.today/ 。

因此，對於那些想要在不投資移動應用程序的情況下改善其品牌在線移動體驗的人來說，網絡應用程序是一個很好的選擇。

讓我們更深入地了解 PWA 相對於普通移動應用程序和響應式網站的優勢：

PWA 與響應式網站

與網站相比，PWA 更勝一籌，原因如下：

• 速度：由於Service Workers 技術，在相同內容的情況下，PWA 的加載速度比普通網站更快。 它在第一次加載時很快，在第二次加載時甚至更快，因為它預先緩存了所有內容並在需要時交付它們。
• 離線模式：Service Workers 技術也使離線可用性成為可能。 通過正確集成服務工作者，所有內容都會在您第一次訪問 PWA 時預加載，然後使用 Javascript 交付，這使得 PWA 成為必須獲得不間斷體驗的網站的新首選方法。 我們有一份關於如何讓您的 PWA 離線工作的指南，以備您需要時使用。
• Web 推送通知：就像原生移動應用程序一樣，PWA 可以直接從移動 Web 瀏覽器向用戶的主屏幕發送推送通知。 這對於電子商務商店向其客戶發送個性化交易和優惠特別有用。 PWA Android 的 Web 推送已經啟用了很長時間，幸運的是，它很快就會來到 PWA iOS。
• 添加到主屏幕：此功能提示移動用戶“安裝” PWA。 用戶接受提示後，PWA 將被添加到他們的移動主屏幕，它會像任何其他已安裝的應用程序一樣運行。 這是我們將 PWA 添加到主屏幕的指南。 不要錯過！

Chrome 上舊的“添加到主屏幕”提示將如下所示：

 >> 推薦閱讀：PWA vs Responsive Website 全對比

PWA 與原生應用

PWA 不僅比網站更好，而且品牌現在也選擇 PWA 而不是原生應用程序，因為 PWA 帶來了以下好處：

• 跨平台：構建 PWA 後，可以通過任何移動平台（如 Android、iOS 或 Windows）訪問它，因為 PWA 是基於瀏覽器的，而不是基於操作系統的。
• 最新：一旦用戶刷新頁面，對 PWA 所做的更改將立即生效。
• 可索引性：因為 PWA 在技術上仍然是一個網站，所以它的內容可以在谷歌等搜索引擎上被索引和發現。 這為 SEO（搜索引擎優化）實踐提供了機會，與原生應用程序相比，這使 PWA 能夠接觸到更大的用戶群。
• 無需發布：對於原生應用，應用商店發布過程有時會很痛苦。 想像一下，將您的應用程序提交到應用程序商店，興奮地等待 5 天，結果卻收到拒絕，原因是您需要重新閱讀 10 次，但仍然不知道它在說什麼。 在某些情況下，您的應用可能永遠不會被接受。 （性用品商店或電子煙產品，有人嗎？）。 使用 PWA，無需提交應用程序。 終於解脫了！ 如果您想將 PWA 發佈到 Apple Appstore、Google Play 和 Microsoft Store，請按照以下方法操作！
• 低開發成本：由於 PWA 可以開發一次，然後可用於任何支持它的移動平台和瀏覽器，與原生應用程序相比，PWA 的開發成本相對較小。 另一個原因是 PWA 使用更普遍理解的編程語言和技術，並且擁有更大的開發人員基礎。

 推薦閱讀：
- Progressive Web App vs Native App：哪個更適合你？
- PWA 對電子商務的好處

PWA 缺點

顯然，這一切聽起來好得令人難以置信。 當某些事情看起來好得令人難以置信時，人們經常會問“好吧，有什麼收穫”。

PWA 儘管具有行業定義的特徵，但仍然有其缺點：

• 可達性

鑑於這項技術仍然很新，目前沒有適用於 PWA 的應用程序市場，這反過來又降低了其以某種方式接觸更廣泛受眾的能力。 然而，微軟等知名公司已經開始將 PWA 整合到 Microsoft Store 中，這使得 Windows 10 中所有 PWA 的未來似乎並不牽強。

• 與其他已安裝應用程序的通信：

由於 PWA 從根本上說本質上仍然是一個類似應用程序的網頁，因此它可以在很多方面受到限制。 最大的限制可能是它是跨應用程序通信受限，這可能會給開發人員帶來問題。

常問問題

PWA 有什麼用途？

一個快速、可靠且使用愉快的網絡應用程序可以用於多種用途。 例如，Aliexpress 的 PWAs Tik Tok 讓人們熟悉這些網站，從而促使他們下載他們的本地應用程序。 Spotify 使用 PWA 進一步優化其網站的性能和響應能力，從而為用戶提供下載應用程序之外的另一種選擇。 pacman 或 2048 等遊戲也使用 PWA 來吸引更多網絡用戶。

PWA 和普通應用有什麼區別？

從技術角度來看，需要從其應用商店下載原生應用，而您可以通過 Web 瀏覽器訪問 PWA。 從業務的角度來看，PWA 可以更適合 SEO，開發成本更低、速度更快。 同時，對於復雜的移動項目來說，原生應用仍然是最好的，而且它可以創造更強的品牌信譽。

PWA 是否僅適用於移動設備？

不，PWA 在台式機、移動設備和平板電腦上都可以使用。

PWA 的編程語言是什麼？

PWA 是使用流行的編程語言和 Web 技術構建的，包括 HTML、CSS、Javascript 和 WebAssembly。

結論

“PWA 會取代原生應用嗎？”

我們認為不是。

然而。

截至 2019 年第四季度，Google Play 上有近 300 萬個應用程序，Apple App Store 上有超過 200 萬個應用程序（Statista，2019 年）。 這個數字仍在增長，而且看起來所有這些應用程序都不會很快被替換。 用戶習慣是一個東西，不容易改變。

話雖如此，Progressive Web Apps 確實有很大的潛力。 在 SimiCart，我們相信 Progressive Web Apps 是未來。 憑藉其速度、佈局靈活性和功能能力，PWA 注定要取代桌面站點、移動站點、原生移動應用程序，甚至原生 Windows 應用程序。 是的，你沒聽錯， windows 應用程序。 僅在電子商務世界中，Progressive Web App 目前是希望為在線購物者提供輕鬆、響應和引人入勝體驗的店主的首選方法。

事實上，統計數據顯示，PWA 實施延遲 1 個月可能會導致高達 140 萬美元的收入損失，如果品牌決定延遲 6 個月，還會造成 680 萬美元的損失。

對於尋求全方位完美Magento PWA解決方案的電子商務商店所有者，我們在 SimiCart 為您和您的商店提供完整的軟件包。