ZDF 如何運用離線模式和深色模式建立影片 PWA

瞭解 ZDF 如何使用離線支援、可安裝性和夜間模式等新功能,建立漸進式網頁應用程式 (PWA)。

Martin Schierle
Martin Schierle
Scott Friesen
Scott Friesen

當廣播公司 ZDF 考慮重新設計前端技術堆疊時,他們決定仔細研究串流網站 ZDFmediathek漸進式網頁應用程式。開發代理商 Cellular 接受挑戰,建構與 ZDF 專屬 iOS 和 Android 應用程式同等的網頁體驗。PWA 提供安裝功能、離線影片播放、轉場動畫和深色模式。

新增服務工作站

PWA 的一項重要功能是離線支援功能。對於 ZDF,大部分的繁重工作都是由 Workbox 完成,這是一組程式庫和 Node 模組,可輕鬆支援不同的快取策略。ZDF PWA 是以 TypeScript 和 React 建構而成,因此會使用 create-react-app 內建的 Workbox 程式庫來預先快取靜態資產。這可讓應用程式專注於讓動態內容可供離線使用,在本例中即為影片及其中繼資料。

基本概念相當簡單:擷取影片並將影片儲存為 IndexedDB 中的 blob。然後在播放期間監聽線上/離線事件,並在裝置離線時切換至已下載的版本。

但很抱歉,這個問題變得更為複雜。該專案的一項要求是使用官方 ZDF 網頁播放器,但該播放器不提供任何離線支援。播放器會將內容 ID 做為輸入內容,與 ZDF API 通訊,並播放相關影片。

這時,網頁上最強大的功能之一:服務工作者,就能派上用場。

服務工作者可以攔截播放器執行的各種要求,並以 IndexedDB 中的資料回應。這樣一來,您就能在不必變更播放器程式碼任何一行程式碼的情況下,新增離線功能。

由於離線影片通常數量龐大,因此一大問題是能夠儲存在裝置上多少影片。有了 StorageManager API,應用程式就能預估可用空間,並在空間不足時,事先通知使用者。很抱歉,Safari 並未列入實作此 API 的瀏覽器清單,且在撰寫本文時,我們沒有太多最新資訊可供您參考,瞭解其他瀏覽器如何套用配額。因此,團隊編寫了一個小型公用程式,用於測試各種裝置上的行為。現在有一篇完整文章,提供了所有細節的總結。

新增自訂安裝提示

ZDF PWA 提供自訂的應用程式內安裝流程,並在使用者想下載第一部影片時,提示他們安裝應用程式。使用者已明確表示想離線使用應用程式,因此這是提示安裝的絕佳時機。

自訂安裝邀請。 下載影片供離線觀看時,觸發自訂安裝提示。
下載影片以供離線觀看時,系統會觸發自訂安裝提示。

建構離線頁面以存取下載內容

如果裝置未連上網際網路,而使用者前往無法在離線模式下使用的網頁,系統會顯示特別頁面,而非列出先前下載的所有影片;如果尚未下載任何內容,則會顯示離線功能的簡短說明。

離線頁面顯示所有可離線觀看的內容。 離線頁面顯示沒有可離線觀看的內容。
離線版頁面會顯示所有可離線觀看的內容。

使用影格載入速率來調整功能

為了提供豐富的使用者體驗,ZDF PWA 會在使用者捲動或瀏覽時,納入一些細微的轉場效果。在低階裝置上,這類動畫通常會產生相反的效果,如果動畫的執行速度低於每秒 60 張,應用程式就會變得遲緩且反應速度變慢。為考量這項因素,應用程式會在載入時透過 requestAnimationFrame() 評估實際影格速率,並在值低於特定門檻時停用所有動畫。

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

即使這項測量結果僅能粗略表示裝置的效能,且每次載入時的效能都不同,仍可做為決策的良好依據。值得一提的是,視用途而定,開發人員可以實作其他自適應載入技巧。這種做法的好處之一是適用於所有平台

深色模式

深色模式是現代行動體驗的熱門功能。尤其是在在低光源環境看影片時,許多人更偏好將使用者介面調暗。ZDF PWA 不僅提供切換鈕,讓使用者在淺色和深色主題之間切換,還會回應 OS 全系統顏色偏好設定的變更。這樣一來,如果裝置已設定時間表,應用程式就會根據時段自動變更主題。

結果

新的漸進式網頁應用程式在 2020 年 3 月以公開 Beta 版的形式推出,並自此獲得許多正面意見回饋。在 Beta 版階段持續進行期間,PWA 仍會在其暫時性網域下執行。即使未公開宣傳 PWA,使用者人數仍持續成長。其中許多來自 Microsoft Store,讓 Windows 10 使用者可以探索 PWA,並像安裝特定平台應用程式一樣安裝這些應用程式。

後續步驟

ZDF 計畫繼續為 PWA 新增功能,包括登入功能 (用於個人化)、跨裝置和平台瀏覽,以及推播通知。