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

瞭解 ZDF 如何運用離線支援、安裝功能和深色模式等現代功能，建構漸進式網頁應用程式 (PWA)。

Martin Schierle
Martin Schierle
X GitHub
Scott Friesen
Scott Friesen
GitHub

當電視台 ZDF 考慮重新設計前端技術堆疊時，他們決定進一步研究串流網站 ZDFmediathek 的漸進式網頁應用程式。開發代理商 Cellular 負責打造與 ZDF 平台專屬 iOS 和 Android 應用程式一致的網頁式體驗。PWA 提供安裝功能、離線影片播放、轉場動畫和深色模式。

新增 Service Worker

PWA 的一項主要功能是支援離線使用。針對 ZDF 大部分的繁瑣工作，大多是透過 Workbox 來完成，Workbox 包含一組程式庫和 Node 模組，可讓您輕鬆支援不同的快取策略。ZDF PWA 是以 TypeScript 和 React 建構，因此使用 create-react-app 內建的 Workbox 程式庫來預先快取靜態資產。如此一來，應用程式就能專注於將動態內容設為可離線使用，在本例中，影片及其中繼資料即為可離線使用。

基本概念非常簡單：擷取影片，並以 blob 形式儲存在索引資料庫。接著，在播放期間、監聽線上/離線事件，並在裝置離線時切換至已下載的版本。

很遺憾，這一切似乎有點複雜。專案要求之一就是使用未提供任何離線支援的官方 ZDF 網路播放器。播放器會將內容 ID 做為輸入內容、與 ZDF API 通訊，並播放相關影片。

這就是網路上最強大的功能之一可以派上用場：「Service Worker」。

服務工作站可以攔截玩家完成的各種要求，並以索引資料庫的資料回應。這樣即可明確新增離線功能，而不必變更其中一行程式碼。

由於離線影片往往相當龐大，因此最大的問題在於可以在裝置上實際儲存多少部影片。透過 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();
});

即使這項測量結果只提供裝置效能的概略指標，且每次載入時都不同，仍很適合做為決策依據。值得一提的是，視用途而定，開發人員還可以實作自動調整式載入的其他技巧。這種做法的一大優點是 所有平台皆可使用

深色模式

現代行動裝置體驗中廣受歡迎的功能是深色模式。尤其是在低環境光度觀看影片時，許多人偏好使用暗色的 UI。ZDF PWA 不僅提供可讓使用者切換淺色和深色主題的切換鈕，還能回應 OS 全尺寸的色彩偏好設定變更。這樣一來，應用程式針對已設定時間表，依照時段變更主題設定的裝置，會自動變更其外觀。

結果

這個新的漸進式網頁應用程式在 2020 年 3 月以公開測試版的形式推出，自那以來就獲得大量正面評價。在 Beta 版階段繼續運作，PWA 仍會在專屬的臨時網域下執行。雖然 PWA 並未公開宣傳，但的使用者人數穩定成長。其中大多數來源都是 Microsoft Store，可讓 Windows 10 使用者探索 PWA，並安裝 PWA，例如平台專用應用程式。

後續步驟

ZDF 預計會繼續在 PWA 中新增功能，包括登入以實現個人化、跨裝置和平台檢視，以及推播通知。