最近，漸進式網頁應用程式引發了許多熱烈討論。雖然這仍是相對較新的模型，但其原則同樣能強化以 Vanilla JS、React、Polymer、Angular 或任何其他架構建構的應用程式。本文將摘要介紹一些選項和參考應用程式，協助您立即著手打造自己的漸進式網頁應用程式。
什麼是漸進式網頁應用程式？
請注意，漸進式網頁應用程式可在任何地方運作，但在新式瀏覽器中效能更佳。漸進增強是這個模式的骨幹。
Aaron Gustafson 將漸進增強比喻為花生 M&M 巧克力。花生是內容，巧克力塗層是呈現層，JavaScript 則是硬糖殼。這個圖層的顏色可能不同，體驗也可能因瀏覽器功能而異。
糖果外殼就像是許多漸進式網頁應用程式功能的所在位置。這類應用程式結合了網頁和應用程式的優點，使用者只要在瀏覽器分頁中開啟，就能立即使用，不必安裝。
使用者透過重複使用與這些應用程式建立關係時，會讓糖果殼更甜美 - 在慢速網路連線上載入速度非常快 (感謝 service worker)、傳送相關推播通知，並在使用者主畫面上顯示一流圖示，可將其載入為全螢幕應用程式體驗。此外，您也可以善用智慧型網頁應用程式安裝橫幅。
漸進式網頁應用程式
- 漸進式：無論使用者選擇哪種瀏覽器，都能正常運作，因為這類應用程式是以漸進增強為核心原則建構而成。
- 回應式：適合任何板型規格、電腦、行動裝置、平板電腦或任何其他裝置。
- 不受連線能力影響：透過 Service Worker 強化，可在離線或低品質網路環境下運作。
- 類似應用程式：使用應用程式命令介面模型，提供應用程式樣式的導覽和互動。
- 最新：Service Worker 更新程序可確保內容隨時保持最新狀態。
- 安全：透過 TLS 傳送，防止窺探並確保內容未遭竄改。
- 可供探索：由於 W3C 資訊清單和 Service Worker 註冊範圍允許搜尋引擎找到這些應用程式，因此可識別為「應用程式」。
- 可重新參與：透過推播通知等功能，輕鬆重新參與。
- 可安裝：允許使用者將最實用的應用程式「保留」在主畫面上，不必透過應用程式商店。
- 可連結：透過網址輕鬆分享，不需複雜的安裝程序。
漸進式網頁應用程式也並非 Android 版 Google Chrome 獨有。下方可以看到 Pokedex 漸進式網頁應用程式在 Firefox for Android (Beta 版) 中運作，早期的新增至主畫面和 Service Worker 快取功能運作正常。
這個模型「漸進式」本質的其中一個優點，就是隨著瀏覽器供應商提供更完善的支援，功能可以逐步解鎖。當然，Pokedex 等漸進式網頁應用程式在 Android 版 Opera 中也能順利運作，但實作方式有幾項值得注意的差異：
如要進一步瞭解漸進式網頁應用程式，請參閱 Alex Russell 介紹這類應用程式的原始網誌文章。Paul Kinlan 也為漸進式網頁應用程式建立了非常實用的 Stack Overflow 標記，值得參考。
原則
網頁應用程式資訊清單
資訊清單可讓網頁應用程式在使用者主畫面上呈現更接近原生應用程式的外觀。這可讓應用程式以全螢幕模式啟動 (不顯示網址列)，並提供螢幕方向控制功能。在 Android 裝置上，近期版本的 Chrome 支援定義網址列的啟動畫面和主題顏色。此外，這個檔案也用於定義一組圖示，並根據大小和密度，用於上述啟動畫面和主畫面圖示。
您可以在 Web Starter Kit 和 Google Chrome 範例中找到資訊清單檔案範例。Bruce Lawson 撰寫了資訊清單產生器，Mounir Lamouri 也撰寫了實用的網頁資訊清單驗證工具，值得一試。
在個人專案中，我會使用 realfavicongenerator 生成正確大小的圖示，用於網頁應用程式資訊清單，以及 iOS、電腦等平台。favicons Node 模組也能在建構程序中產生類似的輸出內容。
Chromium 瀏覽器 (Chrome、Opera 等) 目前支援網頁應用程式資訊清單，Firefox 正在積極開發支援功能，Edge 則將其列為考慮中。WebKit/Safari 尚未公開表示有意導入這項功能。
詳情請參閱「網站基礎知識」中的「在 Android 版 Chrome 中使用網頁應用程式資訊清單安裝網頁應用程式」。
「新增至主畫面」橫幅
Android 版 Chrome 支援將網站新增至主畫面已有一段時間，但近期版本也支援使用原生網頁應用程式安裝橫幅，主動建議使用者新增網站。
應用程式必須符合下列條件，才能顯示應用程式安裝提示：
- 具備有效的網頁應用程式資訊清單
- 透過 HTTPS 提供 (如需免費憑證，請參閱 letsencrypt)
- 已註冊有效的 Service Worker
- 造訪兩次，兩次造訪間隔至少 5 分鐘
我們提供多個應用程式安裝橫幅範例，涵蓋基本橫幅到更複雜的用途，例如顯示相關應用程式。
用於離線快取的 Service Worker
Service Worker 是在背景執行的指令碼，與網頁分開。它會回應事件，包括從其提供的網頁發出的網路要求。Service Worker 的生命週期刻意縮短。
收到事件時，函式會喚醒並執行，直到處理完畢為止。Service Worker 可讓您使用 Cache API 快取資源，並為使用者提供離線體驗。
Service Worker 不僅能有效進行離線快取，還能讓使用者在重複造訪網站或網頁應用程式時，立即載入內容，大幅提升效能。您可以快取應用程式命令介面，讓應用程式在離線狀態下運作，並使用 JavaScript 填入內容。
Google Chrome 範例提供一組完整的 Service Worker 範例。Jake Archibald 的離線指南是必讀文章，如果您不熟悉 Service Worker，強烈建議您試試 Paul Kinlan 的第一個離線網頁應用程式逐步操作說明。
我們的團隊也維護多個 Service Worker 輔助公用程式和建構工具，我們認為這些工具可有效減少設定 Service Worker 的負擔。請參閱「Service Worker 程式庫」一文。主要有兩種：
- sw-precache：建構階段工具，可產生 Service Worker 指令碼，用於預先快取網頁應用程式命令介面
- sw-toolbox：這個程式庫可為不常使用的資源提供執行階段快取
Jeff Posnick 撰寫了一篇關於 sw-precache 的快速入門指南，名為「Offline-first, fast, with the sw-precache module」，並提供同一工具的程式碼實驗室，您可能會覺得很有幫助。
Chrome、Opera 和 Firefox 都已支援 Service Worker，Edge 也對這項功能表示興趣。Safari 曾透過一位工程師提出的五年計畫，簡短提及對這項功能的興趣。
透過推播通知吸引使用者回訪
實際上，您可以建構網頁應用程式，讓使用者在分頁外互動。即使關閉瀏覽器，或未主動使用網頁應用程式，也能與您的體驗互動。這項功能需要 Service Worker 和網頁應用程式資訊清單，並以先前總結的部分功能為基礎。
Push API 已在 Chrome 中實作，在 Firefox 中開發，並在 Edge 中考慮。Safari 尚未公開表示有意導入這項功能。
Open Web 上的推播通知是 Matt Gaunt 撰寫的推播設定綜合簡介，推播通知程式碼研究室也提供 Web Fundamentals。
如果您比較喜歡看影片，Chrome 團隊的 Michael van Ouwerkerk 也製作了 6 分鐘的推送簡介。
加入進階功能
請記住，使用者體驗的流暢度可能會因瀏覽網頁應用程式的瀏覽器而異。您可以控制硬糖殼。
網頁平台即將推出其他功能，例如背景同步 (即使網頁應用程式關閉，也能與伺服器同步資料) 和 Web Bluetooth (可透過網頁應用程式與藍牙裝置通訊)，這些功能也可以透過這種方式加入漸進式網頁應用程式。
Chrome 已啟用一次性背景同步功能，Jake Archibald 則製作了影片和文章，示範離線維基百科應用程式的運作方式。如果您想試用 Web Bluetooth API，François Beaufort 也提供了許多 Web Bluetooth 範例。
支援架構
您可以放心將上述任何原則，套用至現有應用程式或建構中的架構。建構漸進式網頁應用程式時，還有其他幾項原則值得留意，包括以使用者為中心的 RAIL 效能模型，以及 FLIP 動畫。
我希望在 2016 年，我們能看到越來越多樣板和種子專案，自然而然地將漸進式網頁應用程式支援做為核心功能。在此之前，在自己的應用程式中加入這些功能並非難事，而且我認為相當值得。
架構
漸進式網頁應用程式模型有不同的「全方位」程度，但常見的做法是圍繞應用程式命令介面建構。這並非硬性規定，但確實有幾項好處。
應用程式命令介面架構會鼓勵快取應用程式命令介面 (使用者介面)，以便離線運作，並使用 JavaScript 填入內容。這樣一來，當使用者再次造訪時，即使內容最終來自網路，您也能在沒有網路的情況下，快速在畫面上顯示有意義的像素。這可大幅提升效能。
Jeremy Keith 最近評論，在這類模型中，伺服器端轉譯不應視為備用，而用戶端轉譯應視為強化。這項意見很合理。
在應用程式命令介面模型中，應盡可能使用伺服器端轉譯，並使用用戶端漸進式轉譯做為強化功能，就像我們在支援 Service Worker 時「強化」體驗一樣。最終可以透過多種方式達成。
建議您閱讀我們對架構的說明，並評估如何將類似原則妥善套用至自己的應用程式和堆疊。
入門樣板
應用程式殼層
app-shell 存放區包含應用程式殼層架構的近乎完整實作。後端是以 Express.js 編寫，前端則是以 ES2015 編寫。
由於這項作業涵蓋模型的用戶端和伺服器端部分，且涉及許多內容，因此您需要一些時間熟悉程式碼集。除此之外，這是目前最全面的漸進式網頁應用程式起點。接下來，我們將著重於這項專案的文件。
Polymer 入門套件
Polymer 網頁應用程式的官方起點支援下列漸進式網頁應用程式功能：
- 網頁應用程式資訊清單
- Android 版 Google Chrome 啟動畫面
- 使用 Platinum SW 元素進行 Service Worker 離線快取
- 推播通知 (需手動設定)，包含白金推播元素
目前版本的 PSK 缺少對某些更進階效能模式 (例如應用程式命令介面模型、非同步載入) 的支援，您可以在某些漸進式 Polymer 網頁應用程式中找到這些模式。
我們預計在 2016 年將這些模式納入 PSK，但您可以在 Rob Dodson 的 Polymer Zuperkulblog 應用程式和 Eric Bidelman 的精彩Polymer Perf Patterns 演講中，找到相關的早期實驗。
Web Starter Kit
我們為新的 Vanilla 專案提供的建議起點包含下列漸進式網頁應用程式功能：
- 網頁應用程式資訊清單
- Android 版 Google Chrome 啟動畫面
- 使用 sw-precache 預先快取 Service Worker
如果您偏好使用 Vanilla JS/ES2015，且無法使用 Polymer，Web Starter Kit 可做為參考，您可以重複使用或複製其中的程式碼片段。
使用和不使用框架的漸進式網頁應用程式
社群成員已建構多個開放原始碼漸進式網頁應用程式，其中有些使用 JS 程式庫和框架，有些則未使用。如果需要靈感，可以參考下列存放區。而且這些應用程式本身也相當出色。
Vanilla JavaScript
- Paul Lewis 的語音備忘錄採用與
app-shell類似的架構 (文章) - 離線維基百科，作者：Jake Archibald (影片)
- Air Horner (作者：Paul Kinlan)
- Paul Lewis 的 Guitar Tuner (文章)
Polymer
- Zuperkulblog，作者：Rob Dodson (投影片)
回應
虛擬 DOM
Angular.js
- Kenneth Auchenberg 的 Timey.in - 也使用
sw-precache預先快取資源
結語
如前所述，漸進式網頁應用程式仍處於起步階段，但現在正是探索其背後方法，並瞭解如何將其應用於您自己的網頁應用程式的好時機。
Paul Kinlan 目前正在規劃漸進式網頁應用程式的網站基礎知識指南，如果您有任何想瞭解的主題，歡迎在討論串中留言。