了解 ZDF 如何创建具有离线支持、可安装性和深色模式等现代功能的渐进式 Web 应用 (PWA)。
当 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 提供自定义的应用内安装流程,并提示用户 立即安装应用。这是一个 提示安装的理想时机,因为用户已明确表示 离线使用应用。
![自定义安装邀请。](https://web.developers.google.cn/static/case-studies/zdf/image/custom-invitation-instal-10ab87790d8bb.jpg?authuser=9&hl=uk)
![下载视频以供离线观看时触发的自定义安装提示。](https://web.developers.google.cn/static/case-studies/zdf/image/custom-install-prompt-bei-fcf49ed4703b6.jpg?authuser=9&hl=uk)
创建离线网页以访问下载内容
当设备未连接到互联网,而用户导航到 离线模式下无法访问的页面,而是显示一个特殊页面, 列出以前下载的所有视频(如果 尚未下载)离线功能的简单说明。
![显示可离线观看的所有内容的离线页面。](https://web.developers.google.cn/static/case-studies/zdf/image/offline-page-showing-con-97273fdc6db79.png?authuser=9&hl=uk)
![显示没有可离线观看的内容的离线网页。](https://web.developers.google.cn/static/case-studies/zdf/image/offline-page-showing-no-8a1022d8134c8.png?authuser=9&hl=uk)
为自适应功能使用帧速率
为了提供丰富的用户体验,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 并像平台专用应用一样安装。
后续操作
ZDF 计划继续为其 PWA 添加功能,包括登录 个性化、跨设备和平台查看以及推送通知。