了解 ZDF 如何创建具有离线支持、可安装性和黑暗模式等现代功能的渐进式 Web 应用程序 (PWA)。
当广播公司 ZDF 考虑重新设计其前端技术堆栈时，他们决定仔细研究渐进式 Web 应用程序，用于其流媒体站点 ZDFmediathek。开发机构 Cellular 接受了挑战，旨在构建与 ZDF 的特定于平台的 iOS 和 Android 应用程序相媲美的基于 Web 的体验。该 PWA 提供可安装性、离线视频播放、过渡动画和黑暗模式。
添加 Service Worker
PWA 的一个关键特性是离线支持。对于 ZDF 来说，大部分繁重的工作由 Workbox 完成，Workbox 是一组库和 Node 模块，可以轻松支持不同的缓存策略。ZDF PWA 使用 TypeScript 和 React 构建，因此它使用已构建到 create-react-app 中的 Workbox 库来预缓存静态资源。这使应用程序可以专注于使动态内容脱机可用，在本例中为视频及其元数据。
基本思路非常简单：获取视频并将其作为 Blob 存储在 IndexedDB 中。然后在播放期间，监听在线/离线事件，并在设备离线时切换到下载的版本。
不幸的是，事情变得有点复杂。项目要求之一是使用官方 ZDF Web 播放器，该播放器不提供任何离线支持。该播放器将内容 ID 作为输入，与 ZDF API 通信，并播放关联的视频。
这就是 Web 最强大的功能之一发挥作用的地方：Service Worker。
Service Worker 可以拦截播放器执行的各种请求，并使用来自 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();
});
即使此测量仅粗略指示设备的性能并且在每次加载时都会变化，但它仍然是决策的良好基础。值得一提的是，根据用例，还有开发者可以实现的其他自适应加载技术。此方法的一大优势在于它在所有平台上都可用。
黑暗模式
现代移动体验的一个流行功能是黑暗模式。尤其是在低环境光下观看视频时，许多人更喜欢调暗的 UI。ZDF PWA 不仅提供了一个允许用户在浅色和深色主题之间切换的开关，而且还对操作系统范围内的颜色偏好设置的更改做出反应。这样，该应用程序将在已设置计划以根据一天中的时间更改主题的设备上自动更改其外观。
结果
新的渐进式 Web 应用程序于 2020 年 3 月以公开 Beta 版形式静默发布，此后收到了许多积极反馈。虽然 Beta 版阶段仍在继续，但 PWA 仍在其自己的临时域名下运行。即使 PWA 没有公开推广，但用户数量仍在稳步增长。其中许多用户来自 Microsoft Store，Windows 10 用户可以在其中发现 PWA 并像特定于平台的应用程序一样安装它们。
下一步是什么？
ZDF 计划继续向其 PWA 添加功能，包括用于个性化的登录、跨设备和平台观看以及推送通知。