Progressive Web Apps 完整指南

進步式 Web 應用程式（Progressive Web App，PWA）是一種根據裝置支援提供附加功能的應用程式，包括離線功能、推送通知、接近原生應用程式的外觀和速度，以及本地資源的快取。

• 介紹
• 什麼是進步式 Web 應用程式
• 進步式 Web 應用程式的替代方案
  • 原生移動應用程式
  • 混合應用程式
  • 使用 React Native 建立的應用程式
• 進步式 Web 應用程式的功能
  • 功能
  • 優勢
  • 核心概念
• 服務工作程序
• 應用程式清單
  • 範例
• 應用程式殼層
  • 快取

介紹

進步式 Web 應用程式（PWA）是使用 Web 技術進行行手機應用程式開發的最新趨勢，目前（2018年3月）可以在 Android 和 iOS 設備上使用，iOS 11.3 或更新版本，以及 macOS 10.13.4 或更新版本。

PWA 是一個標誌，它識別了一系列的技術，旨在打造更好的網絡應用程式體驗。

什麼是進步式 Web 應用程式

進步式 Web 應用程式是一個可以根據裝置支援提供附加功能的應用程式，包括離線功能、推送通知、接近原生應用程式的外觀和速度，以及本地資源的快取。

這個技術最初是由 Google 在2015年引入的，並且證明對開發人員和用戶都帶來了許多優勢。

開發人員可以使用 Web 技術構建幾乎一流的應用程式，這在成本和難度上通常要比構建原生應用程式容易許多，特別是考慮到構建和維護跨平台應用程式的影響。

開發人員可以從減少安裝摩擦中獲益，因為在目前時代，將應用程式加入應用商店實際上並不能為99.99%的應用程式帶來探索性的好處，而Google搜索則可以提供同樣的好處，甚至更多。

進步式 Web 應用程式是以特定技術開發的網站，可以使移動體驗比普通的移動優化網站更愉快，幾乎與原生應用程式一樣工作。它提供以下功能：

• 離線支援
• 快速加載
• 安全
• 能夠發送推送通知
• 在全屏幕中提供身臨其境的用戶體驗，無需 URL 欄位

移動平台（目前是 Android，但不僅限於此）對進步式 Web 應用程式的支援越來越多，以至於當它們偵測到用戶正在訪問的站點是進步式 Web 應用程式時，它們會要求用戶將該應用程式添加到主屏幕上。

但首先，讓我們對名稱做一些澄清。進步式 Web 應用程式可能是一個令人困惑的術語，一個好的定義是使用現代瀏覽器功能（如網頁工作者和網絡應用程式清單）來讓其移動設備“升級”到一流應用程式的角色。

進步式 Web 應用程式的替代方案

在構建移動體驗時，與進步式 Web 應用程式相比，其他解決方案如何？

我們來看看每種方法的優點和缺點，以及在哪些情況下進步式 Web 應用程式是一個好的選擇。

原生移動應用程式

原生移動應用程式是構建移動應用程式最直接的方式。在 iOS 上是 Objective-C 或 Swift，在 Android 上是 Java / Kotlin，在 Windows Phone 上是 C#。

每個平台都有自己的 UI 和 UX 慣例，原生小工具提供了用戶期望的體驗。它們可以通過平台應用商店進行部署和分發。

原生應用程式的主要痛點是跨平台開發需要學習、掌握並不斷跟進許多不同的方法和最佳實踐，因此，例如，如果您有一個小型團隊，甚至是一個在三個平台上構建應用程式的獨立開發者，您需要花費大量的時間來學習技術，而且環境也是如此，管理不同的庫，使用不同的工作流程（例如，iCloud 只適用於 iOS 設備，沒有 Android 版本）。

混合應用程式

混合應用程式是使用 Web 技術構建的，但部署到應用商店的應用程式。在其中間，存在一個框架或某種方式，將應用程式打包成可提交給傳統應用商店審核的形式。

最常見的平台是 Phonegap、Xamarin、Ionic Framework 等等，通常在頁面上看到的是一個 WebView，它實際上加載了一個本地網站。

混合應用程式的關鍵方面是一次編寫，到處運行的概念，在構建時生成不同平台的代碼，並使用 JavaScript、HTML 和 CSS 構建應用程式，這非常好，並且設備功能（麥克風、相機、網絡、GPS 等）通過 JavaScript API 進行公開。

構建混合應用程式的壞處是，除非你做得很好，否則你可能只能提供一個共同的最小公倍數，從而在所有平台上創建出一個低效的應用程式，因為該應用程式忽略了特定平台的人機互動指南。

此外，複雜視圖的性能可能會受到影響。

使用 React Native 建立的應用程式

React Native 通過 JavaScript API 將移動設備的本地控制項公開給開發人員，但你實際上是在創建一個原生應用程式，而不是在 WebView 中嵌入一個網站。

為了區分這種方法與混合應用程式，React Native 有一個口號，即學一次，隨處寫，這意味著在各個平台上使用相同的方法，但你需要創建完全獨立的應用程式，以在每個平台上提供出色的體驗。

性能與原生應用程式相當，因為你所構建的實際上是原生應用程式，它通過應用商店進行分發。

進步式 Web 應用程式的功能

在上一節中，您看到了進步式 Web 應用程式的主要“競爭對手”。适用於進步式 Web 應用程式的主要功能是什麼？

請記住，目前只有 Android 支持進步式 Web 應用程式，iOS 於2019年3月添加了支持。

功能

進步式 Web 應用程式擁有一個與上述方法完全不同的功能：它們無需部署到應用商店。

這是一個關鍵的優勢，因為如果您有足夠的影響力和運氣被特色推薦，這可能使您的應用程式一炮而紅，但除非您屬於0.001%，否則不會因在應用商店上占有一席之地而獲得太多好處。

進步式 Web 應用程式可以使用搜索引擎進行發現，當用戶訪問具有 PWA 功能的網站時，瀏覽器與設備結合，詢問用戶是否想將應用程式安裝到主屏幕上。這對於應用於您的 PWA 來說非常重要，因為常規 SEO 可以適用於您的應用程式，大大減少對付付費獲取用戶的依賴。

不在應用商店中意味著您無需經過蘋果或 Google 的審批，就可以在用戶手中發布更新，而無需應用於 iOS 應用常見的標准審批流程。

PWA 基本上是在一些最近引入的關鍵技術的支持下運行的 HTML5 應用程序/響應式網站。如果您記得最初的 iPhone 是不支援開發原生應用程序的，當時開發人員被告知開發可安裝到主屏幕上的 HTML5 移動應用程式，但是當時的技術還不準備好。

進步式 Web 應用程式可以離線運行。

通過使用服務工作程序，應用程式始終可以提供最新的內容並在後台下載它，並提供推送通知的支持，以提供更多重新使用的機會。

此外，在用戶想要共享應用程式時，可共享性為用戶提供更好的體驗，因為他們只需要一個 URL。

優勢

那麼為什麼用戶和開發人員應該關注進步式 Web 應用程式呢？

1. PWA 體積更小。原生應用可能重達200MB或更多，而 PWA 可能在 KB 級別。
2. 沒有原生平台代碼
3. 降低獲取成本（說服用戶安裝應用程式要比訪問網站獲取初次體驗更難）
4. 構建和發布更新需要的工作量明顯減少
5. 深度連結的支援遠遠超過常規應用商店應用程式

核心概念

• 響應式：UI 自適應裝置屏幕大小
• 像應用程式一樣的感覺：不像網站，而更像一個應用程式
• 離線支援：使用設備存儲來提供離線體驗
• 可安裝：設備瀏覽器提示用戶安裝您的應用程式
• 重新參與：推送通知幫助用戶在安裝後重新發現您的應用程式
• 可發現：搜索引擎和 SEO 優化可以為您帶來更多的用戶，而不是應用商店
• 更新：應用程式在聯網後會自動更新內容
• 安全：使用 HTTPS
• 進步式：在任何設備上都可以運行，甚至是舊設備，即使功能更少（例如，僅作為網站而不是可安裝）
• 可連結：使用 URL 方便指向它

服務工作程序

進步式 Web 應用程式的一部分定義是它必須在離線狀態下工作。

由於使 Web 應用程式在離線狀態下工作的是服務工作程序，這意味著服務工作程序是進步式 Web 應用程式的強制性組成部分。

有關瀏覽器支持的最新數據，請參見 http://caniuse.com/#feat=serviceworkers。

提示：不要將服務工作程序與 Web 工作者混為一談。它們是完全不同的東西。

服務工作程序是一個 JavaScript 文件，它充當 Web 應用程式和網絡之間的中介。由於這一點，它可以提供快取服務，加快應用程式的渲染速度，改善用戶體驗。

由於安全原因，只有 HTTPS 網站才能使用服務工作程序，這也是進步式 Web 應用程式必須通過 HTTPS 服務的一部分原因之一。

第一次用戶訪問應用時，設備上並未提供服務工作程序。首次訪問時，將安裝網絡工人，然後在後續訪問網站的不同頁面時將調用此服務工作程序。

查看有關服務工作程序的完整指南：/service-workers

應用程式清單

應用程式清單是一個 JSON 文件，您可以使用它向設備提供有關您的進步式 Web 應用程式的信息。

您需要在所有網站頁面的標頭中添加應用程式清單的鏈接：

<link rel="manifest" href="/manifest.webmanifest">

此文件將告訴設備如何設置：

• 應用程式的名稱和簡稱
• 圖標位置，以各種大小
• 起始 URL，相對於域名
• 預設方向
• 開始時的啟動屏幕

範例

{
 "name": "The Weather App",
 "short_name": "Weather",
 "description": "Progressive Web App Example",
 "icons": [{
   "src": "images/icons/icon-128x128.png",
   "sizes": "128x128",
   "type": "image/png"
 }, {
   "src": "images/icons/icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png"
 }, {
   "src": "images/icons/icon-152x152.png",
   "sizes": "152x152",
   "type": "image/png"
 }, {
   "src": "images/icons/icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png"
 }, {
   "src": "images/icons/icon-256x256.png",
   "sizes": "256x256",
   "type": "image/png"
 }],
 "start_url": "/index.html?utm_source=app_manifest",
 "orientation": "portrait",
 "display": "standalone",
 "background_color": "#3E4EB8",
 "theme_color": "#2F3BA2"
}

應用清單是 W3C 工作草案，在 https://www.w3.org/TR/appmanifest/ 上可找到。

應用程式殼層

應用程式殼層不是一種技術，而是一個設計概念，旨在首先加載和渲染 Web 應用程式容器，然後不久後加載實際內容，以給用戶一個好的應用程式感覺。

這相當於 Apple HIG（人機界面指南）建議使用與用戶界面相似的啟動屏幕，以給出一個心理上的提示，降低了用戶對應用程式加載時間長的感知。

快取

應用程式殼層與內容分開進行快取，並且它的設置使從快取中獲取殼層的構建塊需要很少時間。

在 https://developers.google.com/web/updates/2015/11/app-shell 上找到有關應用程式殼層的更多信息。