ZDF 如何利用离线模式和深色模式创建视频 PWA

了解 ZDF 如何创建具有离线支持、可安装性和深色模式等现代功能的渐进式 Web 应用 (PWA)。

Martin Schierle

Scott Friesen

当 ZDF 广播公司考虑重新设计其前端技术时于是，他们决定仔细研究渐进式 Web 应用，流媒体网站 ZDFmediathek。发展局 Cellular 接受了挑战，构建了与 ZDF 针对具体平台的 iOS 和 Android 应用不相上下。通过 PWA 提供可安装性、离线视频播放、过渡动画和深色模式

添加 Service Worker

PWA 的一个主要功能是离线支持。对于 ZDF，大部分繁重工作是由 Workbox：一组库以及可轻松支持不同缓存策略的节点模块。通过 ZDF PWA 使用 TypeScript 和 React 构建而成，因此使用 Workbox 库已经内置于 create-react-app 预缓存静态资源。这样，应用就可以专注于可供离线访问的内容，在本例中为视频及其元数据。

基本思路非常简单：提取视频并将其存储为 Blob IndexedDB。然后在播放期间监听在线/离线事件，然后切换到下载的版本。

遗憾的是，事情变得有点复杂。其中一个项目要求使用官方 ZDF 网页播放器，该播放器不提供离线支持。播放器将 Content ID 作为输入与 ZDF API 通信并播放相关视频。

这正是网络最强大的功能之一： Service Worker。

Service Worker 可以拦截播放器完成的各种请求，使用 IndexedDB 中的数据进行响应。这公开了离线添加而无需更改播放器的一行代码。

由于离线视频往往非常大，因此很重要的一个问题是其中有多少都可以存储在设备上借助 StorageManager API 让应用能够估算在没有足够空间时通知用户启动下载。很抱歉，浏览器列表中未显示 Safari 而且在撰写本文时，Google Play 中有关其他浏览器如何应用配额的信息。因此，该团队编写了一个小型实用程序来测试各种设备到目前为止，这篇文章，它总结了。

添加自定义安装提示

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 不仅为用户提供了一个开关深色主题，也会对整个操作系统的颜色偏好设置的变化做出响应。这样应用将自动在设置了根据一天中的不同时间更改主题。

结果

全新的渐进式 Web 应用已于 2020 年 3 月以公开 Beta 版的形式静默发布此后得到了很多积极的反馈。在 Beta 版阶段那么 PWA 仍会在其临时网域下运行。虽然 PWA 并未公开推广，但用户数量在稳步增长。很多其中 70%都来自 Microsoft Store - 可让 Windows 10 用户 PWA 并像平台专用应用一样安装。