漸進式網頁應用程式

漸進式網頁應用程式 (PWA) 是一種網頁應用程式，可利用漸進式強化功能為使用者提供更可靠的體驗，並利用新功能提供更完整的體驗，而且可供安裝。由於這是網頁應用程式，因此只要使用單一程式碼庫，就能讓任何人隨時隨地透過任何裝置存取應用程式。安裝後，PWA 會與其他應用程式類似，具體如下：

  • 主畫面、應用程式啟動器、啟動器或開始功能表會顯示圖示。
  • 當您在裝置上搜尋應用程式時，這個選項就會顯示。
  • 會在獨立視窗中開啟，完全與瀏覽器的使用者介面分開。
  • 可與 OS 進行更高層級的整合，例如網址處理或標題列自訂。
  • 離線時也能使用。

網路平台

網路是個不可思議的平台。這個平台結合了各種裝置和作業系統的通用性、以使用者為中心的安全性模型，而且沒有任何單一公司控管其規格或實作方式，使其成為推送軟體的強大平台。

結合網際網路固有的連結性，您就能在網路上搜尋，並與任何人分享所找到的內容。您每次造訪網站時，都會看到發布者部署的最新版本，而您對該網站的體驗，可以是暫時性的，也可以是永久性的。

網頁應用程式可透過單一程式碼庫，隨時隨地透過任何裝置觸及所有人。對於開發人員而言，網頁也提供透明且簡單的部署機制。不必進行封裝，也不需要額外審查內容，也不會延遲更新。使用者造訪應用程式時，系統一律會提供最新版本。有了新功能和技術，現在即使離線，您也能與內容互動或查看內容，這是幾年前無法克服的障礙。

平台專屬應用程式

平台專用的應用程式 (適用於行動裝置和電腦) 都是以豐富且可靠的服務聞名。這些小工具會一律顯示在主畫面、Dock 和工作列上。無論是否連上網路，都能正常運作，並在自己的獨立體驗中啟動。他們可以從本機檔案系統讀取及寫入檔案、存取透過 USB、序列或藍牙連線的硬體，以及與儲存在裝置中的資料 (例如聯絡人和日曆活動) 互動。在特定平台應用程式中，您可以拍照、播放主畫面上列出的歌曲，或在其他應用程式中控制媒體播放。這些應用程式會讓您感覺到，它們是裝置的一部分。

平台專屬應用程式的一大挑戰在於，與多個平台和裝置不相容，因此即使可以不從頭開始建立新的應用程式，還是可以將 Android 應用程式移至 iOS 或 iOS 至 Windows 或 ChromeOS。

帶來雙贏的局面

如果您將平台應用程式和網頁應用程式著重在功能與觸及率方面，平台應用程式代表最佳功能，網頁應用程式則代表觸及率最佳。漸進式網頁應用程式結合了平台應用程式的功能和網頁應用程式的觸及範圍。漸進式網頁應用程式包含來自這兩個世界的功能。

網路

  • 連結性
  • 預設可存取
  • 無所不在
  • 部署簡單
  • 更新方便
  • 任何人都能發布

平台應用程式

  • 可離線使用
  • 高效能
  • 裝置整合
  • 獨立體驗
  • 「已安裝」圖示
  • 豐富且可靠

採用這項功能有其優點

Hulu 是美國的影片串流服務，他們打造了進階版網頁應用程式，取代使用者評價不佳且使用率偏低的桌面應用程式。正如 2019 年 Google I/O 大會所分享，開發人員可以在兩週內透過現有的網頁應用程式研究並實作這項經驗。

在五個月內，96% 的舊版應用程式使用者採用了 PWA，回訪次數增加 27%，參與度也提升了 5.5%。由於 PWA 會顯示在啟動器和工作列上，因此比起只顯示在分頁中，更容易讓使用者返回。

JD.ID 是印尼的電子商務平台，為許多產品提供運送服務。他們想專注於提升效能，並打造與網路無關的 PWA，藉此拓展線上形象。 透過這項強化體驗，他們的整體行動轉換率提高了 53%，安裝使用者則提高了 200%，每日活躍使用者也增加了 26%。

Clipchamp 是瀏覽器內的桌面級線上影片編輯器，可讓任何人透過影片分享值得分享的故事。與標準電腦版應用程式使用者相比，他們的 PWA 使用者留存率提高了 9%，且在推出後的五個月內，PWA 安裝次數每月以 97% 的速度成長。

Corel Corporation 的 Gravit Designer 是一款功能強大的桌面級向量設計工具，可滿足數萬名每日活躍使用者的需求，提供豐富、實惠且易於存取的向量插圖軟體。自從新增 PWA 供使用者安裝後，他們發現 PWA 使用者的活躍度增加了 24%，PWA 的回訪使用者增加了 31%，且 PWA 使用者購買 Gravit Designer PRO 的機率是其他平台和安裝選項的 2.5 倍。

串流服務的重大變革

串流平台產業 (包括雲端遊戲和遠端運算) 就是漸進式網頁應用程式強大功能的絕佳例子。自 2021 年起，大多數雲端遊戲供應商都推出了漸進式網頁應用程式，讓您透過任何裝置和安裝的瀏覽器或 PWA，遊玩主機遊戲：iPhone、Android、iPad、筆電、Mac 或電腦。Amazon Luna、Microsoft Xbox Cloud Gaming、Facebook Gaming、Google Stadia、Nvidia GeForce Now 和 BlueStacks X 提供的雲端遊戲解決方案，是以 PWA 形式透過瀏覽器提供。這都要歸功於 WebRTC、WebAssembly 和 GamePad API 等網路技術，在所有平台上都能提供接近原生效能的優質體驗。

挑戰

除了使用網路平台發布 PWA 的優點，也請注意可能會遇到的挑戰。

跨瀏覽器相容性

Apple 是多裝置世界的關鍵公司，擁有 iOS、iPadOS、macOS 和 Safari。雖然 Apple 從未在公開場合使用 PWA 一詞，但自 2018 年起，他們就已在 iPhone 和 iPad 的 Safari 上支援相關技術，讓 PWA 可供安裝及離線使用。

不過，Apple 實作的 PWA 規格時，會遺漏其他瀏覽器所需的許多功能，尤其是 Chromium 引擎支援的瀏覽器。

另一方面，我們也採用 Firefox 及其 Gecko 引擎，在 Android 裝置上加入更多 PWA 規格，以及較少的電腦安裝功能。

限制包括缺少推播通知、整合 API (例如 Web Bluetooth 或 WebNFC)，以及安裝宣傳技巧，讓使用者知道可以安裝目前的網站，以便取得應用程式體驗。此外，已實作的功能也有一些錯誤。

如同所有網頁開發，發布 PWA，以及新的主要瀏覽器或 OS 版本發布時，您必須在每個平台上測試使用體驗。 當某項功能無法使用時，您應一律提供備用解決方案或其他體驗。

對 PWA 的認知

身為 PWA 開發人員，您可能會遇到企業和使用者方面的認知問題。有些業主對 PWA 不瞭解，或是對漸進式網頁應用程式的功能與挑戰有所誤解。

發布 PWA 後，您接下來要面對的挑戰，就是確保使用者瞭解網站可供安裝，並能享有安裝應用程式的體驗。

在部分平台 (例如 iOS 和 iPadOS) 上，安裝上的挑戰更顯重要，有時使用者體驗設計人員也會包括說明如何安裝應用程式的畫面。

相容性

請注意，漸進式網頁應用程式只是一種網頁應用程式，因此內容和服務會在標準規格和通訊協定上執行。因此，從技術層面來說，PWA 可在任何網頁執行，您不需要讓平台與任何「PWA 規格」相容。

不過，當我們談論 PWA 和相容性時，通常會想到跨越瀏覽器和僅限線上情境的功能：圖示安裝和離線支援。

除了傳統網站平台支援之外，我們也要檢查是否支援基本應用程式功能，例如圖示安裝和離線功能。

    97 %

    支援離線功能的瀏覽器

    88 %

    網路使用者可以安裝 PWA

資料來源為 StatCounter 且 I can I use。

電腦和筆電

在多重要素裝置的世界中，電腦裝置已不再是一件容易的事。不過，至少從作業系統的角度來看，這些瀏覽器和商店與 PWA 安裝和離線功能相容：

Windows 10 和 11
Google Chrome (73 以上版本)、Microsoft Edge (79 以上版本)、Microsoft Store
ChromeOS
內建的 Chrome 瀏覽器 (第 72 版起)，Play 商店 (85 以上版本)
macOS、Linux 和 Windows 7 和 8.x
Google Chrome (73 以上版本)、Microsoft Edge

在以下影片中，使用者會透過電腦上的瀏覽器安裝 PWA，然後透過獨立視窗存取該應用程式，就像使用其他應用程式一樣。

行動裝置

談到手機和平板電腦，漸進式網頁應用程式可透過下列瀏覽器和應用程式商店安裝離線功能：

iOS 和 iPadOS
第三方瀏覽器 (自 iOS/iPadOS 16.4 起)、Safari (自 iOS 11.3 起)、AppStore (自 iOS/iPadOS 14 起，但有部分限制)、企業發行用行動裝置設定。
Android
Firefox、Google Chrome、Samsung Internet、Microsoft Edge、Opera、Brave、Huawei Browser、Baidu、UCWeb、Play 商店 (72 以上版本，且已安裝 Google Chrome 或與 TWA 相容的瀏覽器)、Galaxy 商店、Managed Play iframe (用於企業發行)。

在以下影片中，使用者透過瀏覽器對話方塊和「Add to Home screen」選單，在行動裝置的瀏覽器中安裝 PWA。

其他裝置

其他一些支援 PWA 的小型裝置，例如遊戲主機 (Microsoft Store 的 Xbox) 或 XR 裝置 (Microsoft Hololens，以及 Facebook Oculus 的計畫)。不過，其他裝置 (含有瀏覽器) 通常不接受 PWA，包括：

  • 遊戲主機
  • 智慧型電視
  • 智慧手錶
  • 汽車

您的 PWA 將一律在所有裝置的瀏覽器上運作，並受到其特定限制。 這項功能可在多部裝置上運作，讓您建立多裝置歷程，使用者可以在一台裝置上開始執行工作，然後在另一台裝置上完成，並透過相同的部署應用程式同步處理資料。

資源