最近我們有許多人歡迎針對漸進式網頁應用程式進行討論。這些機制雖然是相當新的模型，但其原則對於使用傳統 JS、React、Polymer、Angular 或任何其他架構建構的應用程式也同樣能提升效率。本文將概述一些選項和參考應用程式，協助您開始使用自己的漸進式網頁應用程式。
什麼是漸進式網頁應用程式？
請務必記住，漸進式網頁應用程式無論在何處都能使用，但在新式瀏覽器中具有超高效能。漸進式增強是模型的骨幹。
Aaron Gustafson 的成果是花生 M&M 的漸進式強化，花生就是您的內容，巧克力塗層是簡報層，而 JavaScript 則是硬糖果殼。此圖層的顏色可能不同，體驗也會因瀏覽器功能而有所不同。
你可以將糖果殼層當成許多漸進式網頁應用程式功能的用途。這些廣告格式結合了網頁的優質服務和最佳應用程式。這些設定對於首次在瀏覽器分頁中造訪的使用者來說非常實用，不必另外安裝。
當使用者重複使用這類應用程式與這些應用程式建立關係後，就可以讓糖果貝殼更加舒適，例如在網路連線緩慢時 (感謝服務工作者) 載入快速載入、傳送相關的推播通知，並在使用者的主畫面上顯示一流圖示，可將應用程式載入為全螢幕應用程式。還可以運用智慧型應用程式安裝橫幅。
漸進式網頁應用程式
- 漸進式 - 適用於每位使用者，不論選擇何種瀏覽器，都適合使用者，因為他們是以先進的強化功能作為核心用戶群。
- 回應式：適合任何板型規格、電腦、行動裝置、平板電腦或接下來的任何板型規格。
- 獨立連線能力：強化服務工作人員，即使網路處於離線或品質不佳的網路，也能正常運作。
- 類似應用程式 - 使用應用程式殼層模型提供應用程式式導覽和互動。
- 最新 - 藉助服務工作站的更新程序，隨時保持最新狀態。
- 安全：透過 TLS 提供，可避免窺探並確保內容未遭竄改。
- 可搜尋 - 藉助 W3C 資訊清單和 Service Worker 註冊範圍，可讓搜尋引擎尋找應用程式，因此可識別為「應用程式」。
- 可重新互動 - 透過推播通知等功能，輕鬆再次互動。
- 可安裝 - 讓使用者省去應用程式商店的麻煩，將最實用的應用程式「保留」在主畫面上。
- 可連結 - 透過網址輕鬆分享，不需要進行複雜的安裝。
漸進式網頁應用程式也不是 Chrome for Android 獨有的功能。下方我們可以看到，Pokedex Progressive Web App 在 Android 版 Firefox (Beta 版) 中運作，同時具備早期的「新增至主畫面」功能，以及 Service Worker 快取功能運作正常。
在這個模型的「漸進」本質上，有一個優點是我們在瀏覽器廠商改進對各項功能的支援時，會逐漸解鎖這些功能。Pokedex 這類漸進式網頁應用程式同樣適用於 Android 的 Opera，但在實作上有一些「明顯」差異：
如要深入瞭解 Progressive Web Apps，請參閱 Alex Russell 的原著網誌文章介紹這些功能。Paul Kinlan 也為 Progressive Web 應用程式建立了實用的 Stack Overflow 標記，歡迎多加利用。
原則
網頁應用程式資訊清單
資訊清單可讓網頁應用程式在使用者主畫面上呈現更類似原生的內容。這可讓應用程式在不顯示網址列的情況下，以全螢幕模式啟動，而在 Android 版中，新版 Chrome 支援為網址列定義啟動畫面和主題顏色。也可以針對上述啟動畫面和主畫面圖示，依大小和密度定義一組圖示。
您可以在 Web Starter Kit 和 Google Chrome 範例中找到資訊清單檔案範例。Bruce Lawson 是 Manifest Generator，而 Mounir Lamouri 也提供了一款便利的網路資訊清單驗證工具，值得一探究竟。
在個人專案中，我運用 realfavicongenerator 產生正確大小的圖示，以便顯示網頁應用程式資訊清單，以及適用於 iOS、電腦等裝置。favicons 節點模組也能在建構程序中達成類似的輸出內容。
目前，以 Chromium 為基礎的瀏覽器 (Chrome、Opera 等) 支援網頁應用程式資訊清單，且 Firefox 正積極開發支援，並將此類資訊清單列為「考慮採用」。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 的「離線食譜集」是必讀的指南，我強烈建議你試試 Paul Kinlan 的第一個離線網頁應用程式逐步說明，瞭解第一次是 Service Worker 的新手。
本團隊也備有許多 Service Worker 輔助公用程式和建構工具，可讓我們有效降低設定 Service Worker 的負擔。Service Worker 程式庫列出了這些程式庫。其中兩項主要為：
- sw-precache：可產生 Service Worker 指令碼的建構工具，適合預先快取網頁應用程式殼層
- sw-toolbox：為不常使用的資源提供執行階段快取的程式庫
Jeff Posnick 用類似的工具，編寫了名為離線優先、快速的離線快取和程式碼研究室的 Sw-precache 簡介。
Chrome、Opera 和 Firefox 都針對 Edge 的 Service Worker 導入了相關支援，目前已對這項功能發出正面公開信號。Safari 只透過一位工程師提議的五年的計畫，簡短提及了這項技術對這項服務的興趣。
再次參與的推播通知
有效率地建構網頁應用程式，讓使用者能在分頁外互動。瀏覽器可能會關閉，甚至不需要主動使用網頁應用程式與您的體驗。這項功能需要 Service Worker 和網頁應用程式資訊清單，且是以先前總結的功能為基礎建構而成。
Push API 是在 Chrome 中實作，且在 Firefox 中開發，且仍在考慮 Edge。Safari 目前沒有公開信號可導入這項功能。
開放原始碼上的推播通知是 Matt Gaunt 的全方位簡介介紹。此外，Web Fundamentals 也提供推播通知程式碼研究室。
Chrome 小組的 Michael van Ouwerkerk 也提供了 6 分鐘的入門簡介，讓您在看影片時更得心應手。
進階功能
提醒您，視檢視網頁應用程式的瀏覽器而定，使用者體驗可能會有不同程度的甜蜜體驗，您可以控制不穩定的硬殼。
其他網路平台即將推出的功能，例如背景同步 (即使網頁應用程式關閉，也能與伺服器同步處理資料) 和網路藍牙 (透過網頁應用程式與藍牙裝置交談) 也能以這種方式疊加到漸進式網頁應用程式。
Chrome 中已啟用 One-shot 背景同步功能，且 Jake Archibald 有一部離線維基百科應用程式的影片和文章，示範實際運作情形。如果您想試用 API，也可以參考 Francois Beaufort 提供的許多網路藍牙範例。
適用於架構
有沒有什麼方法可以阻止您，將上述任一原則應用在您要建構的現有應用程式或架構上。建構漸進式網頁應用程式時，還有一些原則是需要注意的：RAIL 是以使用者為中心的效能模型和以 FLIP 為基礎的動畫。
希望在 2016 年，我們將看到越來越多樣板和種子專案是自然打造，以支援 Progressive Web Apps 做為核心功能。在此之前，將這些功能加入自己的應用程式並不容易，而且非常值得付出。
架構
「全方位」採用漸進式網頁應用程式模型的方式各不相同，但常見的做法是建立應用程式介面架構。這個做法並非硬性規定，但具備幾項好處。
應用程式殼層架構建議您快取應用程式殼層 (使用者介面)，以便離線運作，並使用 JavaScript 填入內容。透過這項功能，即使使用者最終造訪你的內容，也能在沒有網路的情況下快速在螢幕上取得有意義的像素。成效大幅提升。
Jeremy Keith 最近提出了意見，表示這類模型 (伺服器端算繪) 不應視為備用項，但用戶端算繪應視為強化措施。這是公平的意見。
在應用程式 Shell 模型中，請盡量使用伺服器端算繪，用戶端漸進式算繪則應採用我們「強化」在 Service Worker 支援時「提升」體驗的方式。最終可以透過多種方式找出來。
建議您閱讀我們針對架構撰寫的筆記，並評估類似原則如何最適合自己的應用程式和堆疊。
開始使用樣板
應用程式殼層
app-shell 存放區包含近乎完整的應用程式殼層架構實作。其中包含以 Express.js 編寫的後端，以及以 ES2015 編寫的前端。
由於檔案涵蓋了模型的用戶端和伺服器端部分，而且執行上有許多項目，因此需要一些時間來熟悉程式碼集。不然是我們目前最全面的漸進式網頁應用程式。Google 文件是這項專案的下一個重點。
聚合物入門套件
Polymer 網頁應用程式的官方起點支援下列漸進式網頁應用程式功能：
- 網頁應用程式資訊清單
- Android 版 Google Chrome 啟動畫面
- Service Worker 使用白金級 SW 元素離線快取
- 推播通知 (需要手動設定) 與 Platinum Push 元素
我們在部分 Progressive Polymer 網頁應用程式中發現，目前版本的 PSK 不支援部分更進階的效能模式 (例如應用程式殼層模型、非同步載入)。
我們的目標是在 2016 年將這些模式填充到 PSK，不過，您可以參考 Rob Dodson 的 Polymer Zuperkulblog 應用程式，以及 Eric Bidelman 發表的優秀Polymer Perf Patterns 影片，對這些模式進行早期實驗。
網頁入門套件
我們提議先發想新的香草專案，包含下列漸進式網頁應用程式功能：
- 網頁應用程式資訊清單
- Android 版 Google Chrome 啟動畫面
- 藉助 sw-precache 對服務工作站進行預先快取
如果您偏好使用舊的 JS/ES2015，卻無法使用 Polymer，Web Starter Kit 或許能幫助您重複使用或竊取其中的程式碼片段。
採用與未採用架構的漸進式網頁應用程式
許多開放原始碼的 Progressive Web Apps 是由社群成員所建構，不論是否使用 JS 程式庫和架構。如果您想尋找靈感，歡迎參考下列存放區。這也只是很棒的應用程式，
香草 JavaScript
- Paul Lewis 的 Voicemos 是使用與
app-shell類似的架構建構而成 (寫入) - 維基百科的離線 Wikipedia (影片)
- 保羅金蘭文的 Air Horner
- Paul Lewis 的 Guitar Tuner (寫作)
Polymer
- Rob Dodson 製作的 Zuperkulblog (投影片)
回應
虛擬 DOM
Angular.js
- Kenneth Auchenberg 的 Timey.in - 也會使用
sw-precache來預先快取資源
正在關閉記事
如先前所述，漸進式網頁應用程式仍處於開發階段，但我們建議您認識這些 API 背後的運作方法，並瞭解這些應用程式能如何應用在自己的網頁應用程式。
Paul Kinlan 目前正在規劃《Web Fundamentals 指南》的 Progressive Web Apps (Web Fundamentals) 指南，希望找出您想探討的領域，歡迎在討論串中提出意見。