瞭解 ZDF 如何運用離線支援、安裝和深色模式等新型功能,建構漸進式網頁應用程式 (PWA)。
當電視台 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 提供自訂的應用程式內安裝流程,並提示使用者 使用者想下載第一部影片時,便立即安裝應用程式。這是 提示使用者安裝的適當時機,因為使用者 離線使用應用程式
![自訂安裝邀請。](https://web.developers.google.cn/static/case-studies/zdf/image/custom-invitation-instal-10ab87790d8bb.jpg?authuser=19&hl=zh-tw)
![下載影片供離線觀看時,觸發自訂安裝提示。](https://web.developers.google.cn/static/case-studies/zdf/image/custom-install-prompt-bei-fcf49ed4703b6.jpg?authuser=19&hl=zh-tw)
建立離線頁面以存取下載內容
當使用者在裝置未連上網路的情況下,前往 頁面,改為顯示特殊頁面 列出已經下載的所有影片;如果沒有內容,則 下載完成) 的離線功能的簡短說明。
![離線頁面顯示所有可離線觀看的內容。](https://web.developers.google.cn/static/case-studies/zdf/image/offline-page-showing-con-97273fdc6db79.png?authuser=19&hl=zh-tw)
![離線頁面顯示沒有可離線觀看的內容。](https://web.developers.google.cn/static/case-studies/zdf/image/offline-page-showing-no-8a1022d8134c8.png?authuser=19&hl=zh-tw)
為自動調整功能使用影格載入速率
為提供豐富的使用者體驗,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 中加入新功能,包括登入 個人化功能、跨裝置與平台觀看體驗,以及推播通知。