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

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

馬丁雪勒
Martin Schierle
史考特 (Scott Friesen)
Scott Friesen

當電視台 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 中新增功能,包括登入以實現個人化、跨裝置和平台檢視,以及推播通知。