最近，我們很歡迎你討論漸進式網頁應用程式。雖然 AI 仍是相當新的模型，但使用基本 JS、React、Polymer、Angular 或任何其他架構建構的應用程式，都具備相同的原則。在這篇文章中，我會總結一些選項和參考應用程式，協助貴機構立即開始使用自己的漸進式網頁應用程式。
什麼是漸進式網頁應用程式？
請務必記住，漸進式網頁應用程式可在任何地方使用，但在新式瀏覽器中的效能大幅提升。漸進式強化是模型的骨幹。
Aaron Gustafson 喜歡對花生 M&M 的漸進式強化功能。花生是您的內容，巧克力塗層是展示層，而 JavaScript 是硬糖果殼。這個圖層的顏色可能各不相同，且體驗會因使用的瀏覽器功能而異。
請將 Candy shell 想像成許多漸進式網頁應用程式功能可運作的地方。這類體驗結合了網路的優點和最佳應用程式，當使用者首次在瀏覽器分頁中造訪，就很實用，不需安裝。
當使用者透過重複使用的方式，與這些應用程式建立關係後，他們就能讓糖果貝殼變得更加甜，：在網路連線速度緩慢時快速載入 (感謝服務工作處理程序)、傳送相關的推播通知，並在使用者的主畫面顯示一級最高級圖示，能夠將其載入為全螢幕應用程式體驗。此外，也可以善用智慧型網頁應用程式安裝橫幅廣告。
漸進式網頁應用程式
- 漸進式：無論使用者選擇何種瀏覽器，都能滿足每位使用者的需求，因為他們是以漸進式強化做為核心用戶群建構而成。
- 回應式：適合任何板型規格、電腦、行動裝置、平板電腦或接下來的任何裝置。
- 獨立連線 - 增強服務工作處理程序，以便離線或使用低品質的網路工作。
- 應用程式類似 - 使用應用程式殼層模型提供應用程式式的導覽和互動。
- Fresh - 因 Service Worker 的更新程序而隨時保持最新狀態。
- 安全：透過傳輸層安全標準 (TLS) 提供，可避免內容遭到窺探，並確保內容未遭竄改。
- 可探索 - 因為有 W3C 資訊清單和服務工作處理程序的註冊範圍，供搜尋引擎找到，所以可識別為「應用程式」。
- 可再次互動：透過推播通知等功能，讓使用者更容易再次參與。
- 可安裝：讓使用者直接「保留」主畫面上最實用的應用程式，不必費心前往應用程式商店。
- 可連結：可透過網址輕鬆分享，無需進行複雜的安裝。
Progressive Web Apps 也不是 Chrome for Android 的專用。下方是 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、電腦等裝置。網站小圖示節點模組也能在建構程序中取得類似的輸出內容。
以 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 的離線教戰手冊有不容讀，大力推薦給 Paul Kinlan 的離線網頁應用程式，如果您不熟悉服務工作人員，不妨試試。
我們的團隊也維護了許多 Service Worker 輔助公用程式和建構工具，實用的工具有助於降低設定 Service Worker 的負擔。詳見 Service Worker 程式庫。其中兩項主要措施如下：
- sw-precache：這項建構時間工具可產生 Service Worker 指令碼，適合用於預先快取網頁應用程式殼層
- sw-toolbox：這個程式庫可為不常使用的資源提供執行階段快取
Jeff Posnick 用 sw-precache 模組與 sw-precache 模組搭配程式碼研究室，編寫出名為「離線優先的快速快取」簡短的入門介紹，內容可能也會對您有所幫助。
Chrome、Opera 和 Firefox 已為所有採用 Edge 的 Service Worker 實作相關支援，且相關公開信號表示使用者有興趣使用這項功能。Safari 根據一位工程師提議的五年計畫，簡短提及這項工具。
再參與相關推播通知
實際上，您可以建構能讓使用者在分頁外互動的網頁應用程式。瀏覽器可以關閉，使用者甚至不必積極使用網頁應用程式，也能享有優質體驗。這項功能需要 Service Worker 和網頁應用程式資訊清單，以先前摘要的部分功能為基礎建構而成。
Push API 已在 Chrome 中實作，目前在 Firefox 中，在 Edge 的開發階段則考慮。Safari 目前還沒有公開信號，指出他們有意導入這項功能。
Matt Gaunt 和推播通知程式碼研究室提供的完整介紹，可協助您透過 Matt Gaunt 設定推送設定，而網站基礎知識也提供推播通知程式碼研究室的內容。
Chrome 團隊的 Michael van Ouwerkerk 也提供了 6 分鐘的簡介，如果你的拍攝時間較多，歡迎觀看。
進階功能分層
提醒您，視用來瀏覽網頁應用程式的瀏覽器而定，使用者體驗可能提供不同程度的甜蜜。您可以完全控制硬糖果 shell。
背景同步處理 (即使在網頁應用程式關閉的情況下也能與伺服器同步處理資料) 和網路藍牙 (透過網頁應用程式與藍牙裝置對話) 等網路平台的其他功能，也可以這種方式加入漸進式網頁應用程式。
您已在 Chrome 啟用一次性背景同步功能，Jake Archibald 製作了離線維基百科應用程式的影片和文章，瞭解這項功能的實際運作情形。如果您想試用這個 API，Francois Beaufort 也提供多種網路藍牙範例，
適用於架構
您可確實將上述原則應用到要用來建構的現有應用程式或架構。建立漸進式網頁應用程式時，另外還須留意其他幾項原則，那就是以 RAIL 以使用者為中心的效能模型和 FLIP 動畫。
希望在 2016 年，我們會看到越來越多樣板和種子專案，透過有機化的方式協助 Progressive Web Apps 提供核心功能。在那之前，將這些功能新增至個人應用程式的障礙可能還不夠高，實在是 IMHO，非常值得一試。
架構
漸進式網頁應用程式模型的「全方位性」等級不同，其中一種常見的做法是在應用程式介面上建構這類模型。這並非硬性規定，但有多項優點。
應用程式命令介面架構鼓勵快取應用程式殼層 (使用者介面)，以便在離線狀態下運作，並使用 JavaScript 填入內容。重複造訪時，即使沒有網路也能快速取得螢幕上有意義的像素，即使內容最終來自該聯播網也一樣。而且效能大幅提升。
Jeremy Keith 最近提到，在這類模型中，像是伺服器端算繪，不應視為備用模型，但應將用戶端算繪視為強化項目。這是公平的意見回饋。
在應用程式殼層模型中，請盡可能使用伺服器端算繪功能，用戶端漸進式轉譯應用於強化功能，就像我們在支援 Service Worker 時可「強化」體驗。最終可以透過多種方式達成。
我的建議是閱讀我們對於這個架構的書面文件，並評估過類似原則應該如何應用到您的應用程式和堆疊。
開始使用樣板
應用程式殼層
app-shell 存放區包含幾乎完整的應用程式殼層架構實作。其後端是以 Express.js 編寫，前端則是以 ES2015 編寫而成。
由於這涵蓋了模型的用戶端和伺服器端部分，而且過程中有許多工作，因此需要花點時間熟悉程式碼集。也可能是我們目前最全面的漸進式網頁應用程式起源。Google 文件是這項專案的下一個重點。
聚合物入門套件
Polymer 網頁應用程式的官方起點支援下列漸進式網頁應用程式功能：
- 網頁應用程式資訊清單
- Android 版 Google Chrome 啟動畫面
- 使用 Platinum SW 元素讓 Service Worker 離線快取
- 使用白金推送元素的推播通知 (必須手動設定)
新版 PSK 不支援部分漸進式 Polymer 網頁應用程式中更進階的效能模式，例如應用程式殼層模型、非同步載入。
我們的目標是在 2016 年嘗試將這些模式放入 PSK，但是可以在 Rob Dodson 的 Polymer Zuperkulblog 應用程式中找到相關早期實驗，以及 Eric Bidelman 所發表的極佳 Polymer Perf Patterns 影片。
網頁入門套件
我們特別設計初衷，是推出全新基本專案，包括以下 Progressive Web App 功能：
- 網頁應用程式資訊清單
- Android 版 Google Chrome 啟動畫面
- 多虧了 sw-precache 所提供，服務工作站已預先快取
如果您偏好使用基本 JS/ES2015 且無法使用 Polymer，Web Starter Kit 是相當實用的參考點，您可以重複使用或竊取程式碼片段。
包含及不含架構的漸進式網頁應用程式
無論是否有 JS 程式庫和架構，現在都有許多開放原始碼 Progressive Web Apps 是由社群成員所建立。如要尋找靈感，不妨參考下列存放區。他們肯定還有超讚的應用程式。
香草 JavaScript
- Paul Lewis 的 Voice 備忘錄是使用與
app-shell類似的架構 (寫入) 建構而成 - 離線維基百科：Jake Archibald (影片)
- Air Horner，作者：Paul Kinlan
- Paul Lewis 的 Guitar Tuner (撰寫說明)
Polymer
- Zuperkulblog：Rob Dodson (投影片)
回應
虛擬場域
Angular.js
- Kenneth Auchenberg 的 Timey.in - 使用
sw-precache進行資源預先快取
關閉記事
如前文所述，Progressive Web Apps 仍在開發階段，不過現在是時候嘗試瞭解其背後的運作方法，並瞭解在自家網路應用程式中應用效能的提升效率，現在是件好事。
Paul Kinlan 目前正在針對漸進式網頁應用程式規劃「網站基礎知識」指南，如果您希望能瞭解相關領域，歡迎在討論串中留言。