我們最近收到許多關於漸進式網頁應用程式的討論意見，這仍是一個相對較新的模型，但其原則同樣可用於強化以原生 JS、React、Polymer、Angular 或任何其他架構建構的應用程式。在本文中，我將簡要說明一些選項和參考應用程式，讓您立即開始使用自己的漸進式網頁應用程式。
什麼是漸進式網頁應用程式？
請務必記住，漸進式網頁應用程式可在任何地方運作，但在現代瀏覽器中可發揮最大效益。漸進式改善是模型的基礎。
Aaron Gustafson 喜歡對花生 M&M 的漸進式強化功能。花生代表內容、巧克力外層代表呈現層，而 JavaScript 則是硬糖外殼。這個圖層的顏色可能會有所不同，使用者體驗也會因瀏覽器的功能而異。
您可以將糖果外殼視為許多漸進式網頁應用程式功能的所在位置。這類體驗結合了網頁和應用程式的優點。使用者只要在瀏覽器分頁中首次造訪，就能使用這類廣告，無須安裝任何內容。
隨著使用者透過重複使用這些應用程式建立關係，這些應用程式會讓糖果外殼更甜美，在連線速度緩慢的情況下載入速度非常快 (歸功於服務工作者)，並傳送相關推播通知，以及在使用者主畫面上顯示一流的圖示，可載入全螢幕應用程式體驗。他們也可以使用智慧型 網頁應用程式安裝橫幅。
漸進式網頁應用程式
- 漸進式：這些網站採用漸進增強做為核心元素，因此不論使用者選擇哪種瀏覽器，都能正常運作。
- 回應式：適合任何板型規格、電腦、行動裝置、平板電腦或接下來的任何裝置。
- 不受網路連線狀態影響：透過服務工作者強化功能，可在離線或網路品質不佳的情況下運作。
- 應用程式類似 - 使用應用程式殼層模型提供應用程式式的導覽和互動。
- Fresh - 因 Service Worker 的更新程序而隨時保持最新狀態。
- 安全：透過 TLS 放送，可防止窺探並確保內容未遭竄改。
- 可探索：可透過 W3C 資訊清單和 Service Worker 註冊範圍識別為「應用程式」，讓搜尋引擎找到這些應用程式。
- 可重新吸引：透過推播通知等功能，輕鬆重新吸引舊訪客。
- 可安裝：允許使用者在主畫面上「保留」他們認為最實用的應用程式，不必透過應用程式商店。
- 可連結：可透過網址輕鬆分享，無需進行複雜的安裝。
漸進式網頁應用程式並非 Android 版 Chrome 的專屬功能。在下方，我們可以看到 Pokedex 漸進式網頁應用程式在 Android 版 Firefox (Beta 版) 中運作，且「新增至主畫面」和服務工作者快取功能皆正常運作。
這項模式的「漸進式」特性之一，就是隨著瀏覽器供應商提供更完善的支援，功能可逐漸解鎖。漸進式網頁應用程式 (例如 Pokedex) 當然也能在 Android 版 Opera 中順利運作，但實作方式有幾項顯著的差異：
如要進一步瞭解漸進式網頁應用程式，請參閱 Alex Russell 的原始網誌文章，瞭解相關資訊。Paul Kinlan 也為漸進式網頁應用程式建立了非常實用的 Stack Overflow 標記，值得一試。
原則
網頁應用程式資訊清單
透過資訊清單，您的網頁應用程式可以在使用者的主畫面中呈現更原生的方式。這項功能可讓應用程式以全螢幕模式啟動 (未顯示網址列)，以便控制螢幕方向，而最新版 Android 上的 Chrome 支援在網址列定義啟動畫面和主題顏色。它也用於根據大小和密度定義一組圖示，用於上述的啟動畫面和主畫面圖示。
您可以在網頁入門套件和 Google Chrome 範例中找到範例資訊清單檔案。Bruce Lawson 編寫了資訊清單產生器，而 Mounir Lamouri 也編寫了實用的網路資訊清單驗證工具，值得一試。
在我的個人專案中，我會使用 realfavicongenerator 產生正確大小的圖示，用於網頁應用程式資訊清單，以及在 iOS、電腦等裝置上使用。網站小圖示節點模組也能在建構程序中取得類似的輸出內容。
以 Chromium 為基礎的瀏覽器 (Chrome、Opera 等) 目前支援網頁應用程式資訊清單。當 Firefox 積極開發相關支援時，Edge 會將其列為考慮條件，WebKit/Safari 尚未發布公開信號，說明他們打算實作這項功能。
詳情請參閱「在 Android 版 Chrome 中使用網頁應用程式資訊清單，建立可安裝的網頁應用程式」一文 (網站基礎知識)。
「新增至主畫面」橫幅
Android 版 Chrome 暫時支援將網站新增至主畫面，但最新版本也支援使用原生網頁應用程式安裝橫幅廣告，主動建議新增網站。
如要顯示應用程式安裝提示，您的應用程式必須符合下列條件：
- 提供有效的網頁應用程式資訊清單
- 透過 HTTPS 提供 (如需免費憑證，請參閱 letsencrypt)
- 註冊有效的 Service Worker
- 兩次造訪，兩次造訪之間至少相隔 5 分鐘
您可以使用多種應用程式安裝橫幅範例，涵蓋基本橫幅到顯示相關應用程式等更複雜的用途。
離線快取的服務工作者
Service Worker 是指在背景中執行的腳本，與網頁分開。它會回應事件，包括從所服務網頁發出的網路要求。某個 Service Worker 的生命週期太短。
它會在收到事件時喚醒，且只在需要處理該事件時執行。服務工作者可讓您使用 Cache API 快取資源，並可用於為使用者提供離線體驗。
Service Worker 非常適合用於離線快取，但可在重複造訪網站或應用程式時立即載入，大幅提升效能。您可以快取應用程式殼層，以便離線運作並透過 JavaScript 填入內容。
您可以在 Google Chrome 範例中找到完整的Service Worker 範例。Jake Archibald 的離線食譜是必讀文章，如果您不熟悉服務工作者，強烈建議您試試 Paul Kinlan 的第一個離線網頁應用程式示範。
我們的團隊也維護了許多 Service Worker 輔助公用程式和建構工具，實用的工具有助於降低設定 Service Worker 的負擔。這些程式庫列於「Service Worker Libraries」一節。主要有以下兩種：
- sw-precache：建構時工具，可產生 Service Worker 指令碼，用於預先快取網頁應用程式殼層
- sw-toolbox：為不常使用的資源提供執行階段快取的程式庫
Jeff Posnick 用 sw-precache 模組與 sw-precache 模組搭配程式碼研究室，編寫出名為「離線優先的快速快取」簡短的入門介紹，內容可能也會對您有所幫助。
Chrome、Opera 和 Firefox 都已實作服務工作者支援功能，Edge 也對這項功能的興趣有正面公開信號。Safari 曾在一位工程師提出的五年計畫中簡短提及這項功能。
用於重新吸引使用者的推播通知
您可以打造網頁應用程式，讓使用者在分頁外與應用程式互動。瀏覽器可以關閉，使用者甚至不必積極使用網頁應用程式，也能享有優質體驗。這項功能需要 Service Worker 和網頁應用程式資訊清單，並建立先前概略介紹的部分功能。
Push API 已在 Chrome 中導入，Firefox 也正在開發中，而 Edge 則正在考慮。Safari 尚未公開表示有意實作這項功能。
開放式網路上的推播通知是 Matt Gaunt 撰寫的完整推播設定介紹，您也可以在 Web 基礎知識中找到推播通知程式碼研究室。
如果你偏好觀看影片，Chrome 團隊的 Michael van Ouwerkerk 也製作了 6 分鐘的影片，介紹 Push 功能。
加入進階功能
提醒您，視用來瀏覽網頁應用程式的瀏覽器而定，使用者體驗可能提供不同程度的甜蜜。您可以完全控制硬糖果 shell。
網頁平台也將推出其他功能，例如背景同步 (即使網頁應用程式已關閉，也能與伺服器同步處理資料) 和 網頁版藍牙 (可透過網頁應用程式與藍牙裝置通訊)，您也可以透過這種方式將這些功能加入漸進式網頁應用程式。
Chrome 已啟用一次性背景同步功能，Jake Archibald 也製作了影片，展示他的離線 Wikipedia 應用程式和文章。如果您想試用這個 API，François Beaufort 也有一些網路藍牙範例可用。
適用於架構
您可以將上述任何原則套用至現有應用程式或建構架構，在建構漸進式網頁應用程式時，請記住幾項其他原則，包括以使用者為中心的 RAIL 效能模型，以及以 FLIP 為基礎的動畫。
我希望在 2016 年，我們能看到越來越多的範本和種子專案，將支援漸進式網頁應用程式做為核心功能。在此之前，在您自己的應用程式中加入這些功能的門檻並不高，而且在筆者看來，這項努力相當值得。
架構
漸進式網頁應用程式模型的「全方位性」等級不同，其中一種常見的做法是在應用程式介面上建構這類模型。這並非硬性規定，但有幾項好處。
應用程式殼架構建議您快取應用程式殼 (使用者介面)，讓應用程式殼可在離線狀態下運作，並使用 JavaScript 填入內容。重複造訪時，即使沒有網路也能快速取得螢幕上有意義的像素，即使內容最終來自該聯播網也一樣。這麼做可以大幅提升效能。
Jeremy Keith 最近評論，在這種模型中，伺服器端算繪不應視為備用選項，而應視為強化功能。這是合理的意見回饋。
在應用程式命令介面模型中，應盡可能使用伺服器端算繪，並以強化用戶端漸進算繪的方式，在支援 Service Worker 時「強化」體驗。最終可以透過多種方式達成。
建議您閱讀我們針對架構撰寫的文章，並評估如何將類似原則最佳地套用至您自己的應用程式和堆疊。
開始使用樣板
應用程式殼層
app-shell 存放區包含幾乎完整的應用程式殼架構實作項目。後端是以 Express.js 編寫，前端則是以 ES2015 編寫。
由於這項工具涵蓋模型的用戶端和伺服器端部分，且這兩部分都包含許多內容，因此您需要花點時間熟悉程式碼庫。這是目前最全面的漸進式網頁應用程式起點。我們接下來會著重於這個專案的說明文件。
聚合物入門套件
Polymer 網頁應用程式的官方起點支援下列漸進式網頁應用程式功能：
新版 PSK 不支援部分漸進式 Polymer 網頁應用程式中更進階的效能模式，例如應用程式殼層模型、非同步載入。
我們預計在 2016 年將這些模式納入 PSK，但您可以在 Rob Dodson 的 Polymer Zuperkulblog 應用程式，以及 Eric Bidelman 的優秀 Polymer 效能模式演講中，找到相關的早期實驗。
網頁入門套件
我們認為，新的基本專案應從下列漸進式網頁應用程式功能著手：
- 網頁應用程式資訊清單
- Android 版 Chrome 啟動畫面
- 多虧了 sw-precache 所提供，服務工作站已預先快取
如果您偏好使用原生 JS/ES2015，但無法使用 Polymer，Web Starter Kit 可能會很實用，可做為您重複使用或竊取程式碼片段的參考點。
包含及不含架構的漸進式網頁應用程式
無論是否有 JS 程式庫和架構，現在都有許多開放原始碼 Progressive Web Apps 是由社群成員所建立。如果您想尋找靈感，以下儲存庫可能會是實用的參考資料。而且這些應用程式也非常優秀。
原生 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進行資源預先快取
關閉記事
如前文所述，Progressive Web Apps 仍在開發階段，不過現在是時候嘗試瞭解其背後的運作方法，並瞭解在自家網路應用程式中應用效能的提升效率，現在正是時候。
Paul Kinlan 目前正規劃漸進式網頁應用程式的 Web Fundamentals 指南，如果您有想討論的內容，歡迎在討論串中留言。