開始使用漸進式網頁應用程式

Addy Osmani
Addy Osmani

最近,我們很歡迎你討論漸進式網頁應用程式。雖然 AI 仍是相當新的模型,但使用基本 JS、React、Polymer、Angular 或任何其他架構建構的應用程式,都具備相同的原則。在這篇文章中,我會總結一些選項和參考應用程式,協助貴機構立即開始使用自己的漸進式網頁應用程式。

什麼是漸進式網頁應用程式?

請務必記住,漸進式網頁應用程式可在任何地方使用,但在新式瀏覽器中的效能大幅提升。漸進式強化是模型的骨幹

Aaron Gustafson 喜歡對花生 M&M 的漸進式強化功能。花生是您的內容,巧克力塗層是展示層,而 JavaScript 是硬糖果殼。這個圖層的顏色可能各不相同,且體驗會因使用的瀏覽器功能而異。

請將 Candy shell 想像成許多漸進式網頁應用程式功能可運作的地方。這類體驗結合了網路的優點和最佳應用程式,當使用者首次在瀏覽器分頁中造訪,就很實用,不需安裝。

當使用者透過重複使用的方式,與這些應用程式建立關係後,他們就能讓糖果貝殼變得更加甜,:在網路連線速度緩慢時快速載入 (感謝服務工作處理程序)、傳送相關的推播通知,並在使用者的主畫面顯示一級最高級圖示,能夠將其載入為全螢幕應用程式體驗。此外,也可以善用智慧型網頁應用程式安裝橫幅廣告

參與式網頁應用程式安裝橫幅、從使用者的主畫面啟動、Android 版 Chrome 的啟動畫面,還可與 Service Worker 離線使用

漸進式網頁應用程式

  • 漸進式:無論使用者選擇何種瀏覽器,都能滿足每位使用者的需求,因為他們是以漸進式強化做為核心用戶群建構而成。
  • 回應式:適合任何板型規格、電腦、行動裝置、平板電腦或接下來的任何裝置。
  • 獨立連線 - 增強服務工作處理程序,以便離線或使用低品質的網路工作。
  • 應用程式類似 - 使用應用程式殼層模型提供應用程式式的導覽和互動。
  • Fresh - 因 Service Worker 的更新程序而隨時保持最新狀態。
  • 安全:透過傳輸層安全標準 (TLS) 提供,可避免內容遭到窺探,並確保內容未遭竄改。
  • 可探索 - 因為有 W3C 資訊清單和服務工作處理程序的註冊範圍,供搜尋引擎找到,所以可識別為「應用程式」。
  • 可再次互動:透過推播通知等功能,讓使用者更容易再次參與。
  • 可安裝:讓使用者直接「保留」主畫面上最實用的應用程式,不必費心前往應用程式商店。
  • 可連結:可透過網址輕鬆分享,無需進行複雜的安裝。

Progressive Web Apps 也不是 Chrome for Android 的專用。下方是 Pokedex 漸進式網頁應用程式在 Firefox for Android (Beta 版) 中運作,可早期新增至主畫面,以及 Service Worker 快取功能仍可正常運作。

在 Firefox for Android 中執行漸進式網頁應用程式

這種模型「漸進式」的一大特色之一,就是隨著瀏覽器廠商逐漸給予更多支援,就能逐漸解鎖功能。當然,Pokedex 等漸進式網頁應用程式也適合在 Android 上的 Opera 上使用,不過在實作上有些明顯的差異:

在 Opera for Android 中運作的漸進式網頁應用程式

如要進一步瞭解漸進式網頁應用程式,請參閱 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 暫時支援將網站新增至主畫面,但最新版本也支援使用原生網頁應用程式安裝橫幅廣告,主動建議新增網站。

Android 版 Chrome 的語音備忘錄示範應用程式,顯示網頁應用程式安裝橫幅

為了讓應用程式安裝提示顯示您的應用程式,您必須符合下列條件:

  • 具備有效的網頁應用程式資訊清單
  • 透過 HTTPS 提供 (如需免費憑證,請參閱 letsencrypt)
  • 已註冊有效的 Service Worker
  • 曾造訪兩次,每次造訪至少間隔 5 分鐘

我們提供多種應用程式安裝橫幅範例,包括基本橫幅廣告,以及顯示相關應用程式等較複雜的用途。

用於離線快取的 Service Worker

Service Worker 是在背景執行的指令碼,與網頁不同。它會回應事件,包括從服務網頁發出的網路要求。某個 Service Worker 的生命週期太短。

它會在收到事件時喚醒,且只在需要處理該事件時執行。Service Worker 可讓你使用 Cache API 快取資源,並為使用者提供離線體驗。

Service Worker 非常適合用於離線快取,但可在重複造訪網站或應用程式時立即載入,大幅提升效能。您可以快取應用程式殼層,以便離線運作並透過 JavaScript 填入內容。

Service Worker 會快取應用程式殼層,以供沒有網路也能載入

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 設定推送設定,而網站基礎知識也提供推播通知程式碼研究室的內容。

Facebook 行動版網站上的網頁推播通知

Chrome 團隊的 Michael van Ouwerkerk 也提供了 6 分鐘的簡介,如果你的拍攝時間較多,歡迎觀看。

進階功能分層

提醒您,視用來瀏覽網頁應用程式的瀏覽器而定,使用者體驗可能提供不同程度的甜蜜。您可以完全控制硬糖果 shell。

背景同步處理 (即使在網頁應用程式關閉的情況下也能與伺服器同步處理資料) 和網路藍牙 (透過網頁應用程式與藍牙裝置對話) 等網路平台的其他功能,也可以這種方式加入漸進式網頁應用程式。

您已在 Chrome 啟用一次性背景同步功能,Jake Archibald 製作了離線維基百科應用程式影片文章,瞭解這項功能的實際運作情形。如果您想試用這個 API,Francois Beaufort 也提供多種網路藍牙範例

適用於架構

您可確實將上述原則應用到要用來建構的現有應用程式或架構。建立漸進式網頁應用程式時,另外還須留意其他幾項原則,那就是以 RAIL 以使用者為中心的效能模型和 FLIP 動畫。

希望在 2016 年,我們會看到越來越多樣板和種子專案,透過有機化的方式協助 Progressive Web Apps 提供核心功能。在那之前,將這些功能新增至個人應用程式的障礙可能還不夠高,實在是 IMHO,非常值得一試。

架構

漸進式網頁應用程式模型的「全方位性」等級不同,其中一種常見的做法是在應用程式介面上建構這類模型。這並非硬性規定,但有多項優點。

應用程式命令介面架構鼓勵快取應用程式殼層 (使用者介面),以便在離線狀態下運作,並使用 JavaScript 填入內容。重複造訪時,即使沒有網路也能快速取得螢幕上有意義的像素,即使內容最終來自該聯播網也一樣。而且效能大幅提升。

以視覺化方式呈現的應用程式殼層,例如導覽匣和主要內容區域

Jeremy Keith 最近提到,在這類模型中,像是伺服器端算繪,不應視為備用模型,但應將用戶端算繪視為強化項目。這是公平的意見回饋。

在應用程式殼層模型中,請盡可能使用伺服器端算繪功能,用戶端漸進式轉譯應用於強化功能,就像我們在支援 Service Worker 時可「強化」體驗。最終可以透過多種方式達成。

我的建議是閱讀我們對於這個架構的書面文件,並評估過類似原則應該如何應用到您的應用程式和堆疊。

開始使用樣板

應用程式殼層

前往 GitHub 查看

app-shell 存放區包含幾乎完整的應用程式殼層架構實作。其後端是以 Express.js 編寫,前端則是以 ES2015 編寫而成。

由於這涵蓋了模型的用戶端和伺服器端部分,而且過程中有許多工作,因此需要花點時間熟悉程式碼集。也可能是我們目前最全面的漸進式網頁應用程式起源。Google 文件是這項專案的下一個重點。

聚合物入門套件

前往 GitHub 查看

Polymer 網頁應用程式的官方起點支援下列漸進式網頁應用程式功能:

  • 網頁應用程式資訊清單
  • Android 版 Google Chrome 啟動畫面
  • 使用 Platinum SW 元素讓 Service Worker 離線快取
  • 使用白金推送元素的推播通知 (必須手動設定)
顯示內建漸進式網頁應用程式功能的聚合物入門套件

新版 PSK 不支援部分漸進式 Polymer 網頁應用程式中更進階的效能模式,例如應用程式殼層模型、非同步載入。

我們的目標是在 2016 年嘗試將這些模式放入 PSK,但是可以在 Rob Dodson 的 Polymer Zuperkulblog 應用程式中找到相關早期實驗,以及 Eric Bidelman 所發表的極佳 Polymer Perf Patterns 影片。

網頁入門套件

前往 GitHub 查看

我們特別設計初衷,是推出全新基本專案,包括以下 Progressive Web App 功能:

  • 網頁應用程式資訊清單
  • Android 版 Google Chrome 啟動畫面
  • 多虧了 sw-precache 所提供,服務工作站已預先快取

如果您偏好使用基本 JS/ES2015 且無法使用 Polymer,Web Starter Kit 是相當實用的參考點,您可以重複使用或竊取程式碼片段。

包含及不含架構的漸進式網頁應用程式

無論是否有 JS 程式庫和架構,現在都有許多開放原始碼 Progressive Web Apps 是由社群成員所建立。如要尋找靈感,不妨參考下列存放區。他們肯定還有超讚的應用程式。

使用 React、Polymer、Virtual DOM 和 AngularJS 實作的漸進式網頁應用程式

香草 JavaScript

Polymer

回應

  • Jeff Posnick 的 iFixit - 使用 sw-precache 執行應用程式殼層快取 (投影片)

虛擬場域

  • Nolan Lawson 的 Pokedex - 優秀的漸進式網路應用程式,採用「處理網路工作程式中的所有工作」方法來協助進行漸進式轉譯。(寫入)

Angular.js

  • Kenneth Auchenberg 的 Timey.in - 使用 sw-precache 進行資源預先快取

關閉記事

如前文所述,Progressive Web Apps 仍在開發階段,不過現在是時候嘗試瞭解其背後的運作方法,並瞭解在自家網路應用程式中應用效能的提升效率,現在是件好事。

Paul Kinlan 目前正在針對漸進式網頁應用程式規劃「網站基礎知識」指南,如果您希望能瞭解相關領域,歡迎在討論串中留言。

其他資訊