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

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

Martin Schierle

Scott Friesen

當電視台 ZDF 考慮重新設計前端技術時他們決定進一步研究漸進式網頁應用程式，串流網站 ZDFmediathek發展代理商 Cellular 致力於打造以網路為基礎的服務能媲美 ZDF 平台專用的 iOS 和 Android 應用程式 PWA 提供可安裝、離線影片播放、轉換動畫和深色模式

新增 Service Worker

PWA 的一項重要功能是離線支援功能。針對 ZDF 大部分的繁重工作 Workbox：一組程式庫和節點模組，可讓您輕鬆支援不同的快取策略。 ZDF PWA 是以 TypeScript 和 React 建構而成，因此採用 Workbox 程式庫內建於 create-react-app 至預先快取靜態資產如此一來，應用程式就能專注於內容可離線觀看 (在本例中為影片及其中繼資料)。

基本的概念很簡單：擷取影片，然後儲存為影片區塊 IndexedDB。在影片播放期間，監聽線上/離線事件，並切換至下載。

但很抱歉，這個問題變得更為複雜。其中一項專案要求是採用官方 ZDF 網路播放器，這類播放器不提供支援離線使用播放器使用 Content ID 做為輸入內容、與 ZDF API 對話，並播放相關聯的影片

其中一個最強大的功能就是網路上最強大的解決之道： Service Worker。

Service Worker 可以攔截玩家完成的各種要求，回應方式為 IndexedDB 的資料這會公開新增離線來源而無需變更一行玩家程式碼。

離線影片通常數量較大因此可儲存在裝置中取得 StorageManager 的協助 API，應用程式可用空間不足時再通知使用者正在開始下載。遺憾的是，瀏覽器並未在瀏覽器清單中加入 Safari 實作這個 API 及撰寫時，其實並沒有太多瞭解其他瀏覽器套用配額的方式。因此，該團隊寫出小型公用程式，可測試使用 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 讓使用者切換燈具和深色主題，也會因應整個作業系統的色彩偏好設定變更。這邊應用程式會自動變更其外觀在已設定排程來按照一天的時間變更主題基礎。

結果

我們已於 2020 年 3 月以無聲模式，以公開測試版的形式推出新版漸進式網頁應用程式自那時起，他們獲得了大量的正面評價Beta 版測試階段就會繼續透過各自的臨時網域執行 PWA。雖然 PWA 並未公開宣傳，因此使用者人數穩定成長。多個 Windows 10 使用者可運用 Microsoft Store 提供的工具然後安裝 PWA，就像平台專用應用程式一樣。

後續步驟

ZDF 計劃繼續在 PWA 中加入新功能，包括登入個人化功能、跨裝置與平台觀看體驗，以及推播通知。