Module 02 · Web Design Methodologies网页设计方法论

Service Worker, Push Notifications and CachingService Worker、推送通知与缓存

欢迎来到“Service Worker、推送通知与缓存”课程。观看完本视频后，您将能够：

描述 Service Worker 及其生命周期。
概述 Service Worker 的特性。
描述 推送通知 及其配置。
解释 渐进式 Web 应用程序 (PWA) 中的缓存和数据存储。
解释 缓存策略。

用户需求与 Service Worker 的作用

用户希望即使在网络连接较差或不稳定的情况下，应用程序也能启动，并且希望在离线时也能访问内容。他们期望应用程序在无法完成请求时通知他们，而不是默默地失败或崩溃。为了解决这些问题，Service Worker 应运而生。

Service Worker 是 PWA 的核心组成部分，能够实现离线访问、快速加载、推送通知等功能。它们充当浏览器与网络之间的桥梁。Service Worker 在不同于页面主 JavaScript 代码的线程上运行，且无法访问 DOM 结构。由于 API 是非阻塞的，并支持跨不同上下文的通信，用户可以在结果准备就绪时随时接收。

Service Worker 非常高效，因为它们可以管理和修改网络请求、从缓存中提供自定义响应，甚至完全合成响应。

Service Worker 的生命周期

Service Worker 的生命周期包括以下三个步骤：

注册 (Registration)
第一步是注册 Service Worker。如果没有注册，浏览器将无法知道 Service Worker 的位置，从而无法在后台安装 Service Worker。
安装 (Installation)
第二步是安装 Service Worker。浏览器在了解 Service Worker 的位置和作用域后，会尝试安装它。大部分缓存过程在此阶段进行。
激活 (Activation)
最后一步是激活 Service Worker。为了激活 Service Worker，必须确保当前没有其他 Service Worker 控制页面，因为激活阶段通常不是自动的。

Service Worker 的特性

无法直接访问或与 DOM 交互。
可以管理网站的网络请求。
可以缓存网站的静态资源。
可以使应用程序在离线时正常运行。
能够缓存网络请求。
即使应用程序未激活，也能接收推送通知。
可以使用 Background Sync API，将活动推迟到用户网络连接稳定时执行。

推送通知

推送通知是发送到用户设备的提醒，通知他们执行某些操作。在基于 Web 的推送通知中，企业可以直接在设备上联系其网站访问者，而无需应用程序或访问者的个人信息。通过轻松访问用户，可以提高参与度，从而带来更高的销售额、更强的品牌认知度以及营销漏斗的改进。

以下是一些行业中如何通过推送通知获利的案例：

行业	推送通知的应用
媒体与娱乐	根据用户的观看或收听历史，发送个性化推荐，提高网站参与度和订阅量。
电子商务	通知客户新促销、新品上架以及购物车中的商品，从而提高销售额。
旅游业	通知客户酒店优惠或特别旅游套餐，促进旅游业增长。天气状况和目的地推荐也非常有帮助。
银行与金融科技	银行应用可以发送交易更新、安全更新或其他财务建议。金融科技应用可以提醒用户汇率变化、股市事件等。

PWA 中的推送通知配置

PWA 通常使用 Service Worker 来启用推送通知和离线访问。Service Worker 提供 Notifications API 和 Push API 作为推送通知功能的基础：

Notifications API：向用户显示通知。
Push API：允许应用程序注册推送通知并接收消息。

配置推送通知的步骤包括：

注册、安装和激活 Service Worker。
创建 PWA 并设置 Service Worker 后，需要配置权限验证。
最后，必须为用户提供退出推送通知的方式。

PWA 中的数据存储

PWA 在资源加载方面具有相当大的控制权。Service Worker 能够拦截、修改并直接响应网络请求，这是其强大功能的重要组成部分。

PWA 提供了多种本地存储数据的选项，即使用户的网络连接中断，也能继续工作。这些选项包括：

存储方式	描述
IndexedDB	允许在加密媒体对象或文件上存储大量结构化数据的 API。由于 API 是异步的，可以在前端代码和 Service Worker 代码中使用。
Web Storage	前端代码可以使用 Web Storage 存储少量数据。数据以键值对形式存储，仅对当前应用源可访问。
Cache API	管理缓存资源。开发者可以使用 Cache API 存储和检索各种在线资源，如 HTML、CSS、JavaScript 等。
File System Access API	允许 PWA 读取和保存用户设备上的文件和文件夹的更改。

缓存策略

应用程序使用的大部分数据是动态的，这意味着信息通过远程 API 从数据库中获取。以下是几种常见的缓存策略：

策略	描述
Stale-while-revalidate	返回缓存的资源版本，同时从网络获取更新版本（如果存在）。
Network only	仅请求网络，不使用缓存。适用于任何缓存版本都不可接受或存在风险的资源。
Network first, cache fallback	首先检查网络响应，如果成功则返回当前数据；如果网络请求失败，则返回缓存条目。
Cache first	在请求网络之前先检查缓存。适用于即时缓存和优化重复资源请求。
Cache only	仅返回缓存的资源，不尝试连接网络。

总结

在本视频中，您了解到：

Service Worker 在不同于页面主 JavaScript 代码的线程上运行。
Service Worker 的生命周期包括三个步骤：注册、安装和激活。
Service Worker 具有多种特性，如管理网络请求、缓存资源、支持离线功能等。
推送通知 是发送到用户设备的提醒，能够提高用户参与度和业务收益。
PWA 提供了多种本地存储数据的选项，如 IndexedDB、Web Storage、Cache API 等。
应用程序使用动态数据时，可以采用多种缓存策略，如 Stale-while-revalidate、Network first 等。

通过掌握这些知识，您将能够更好地设计和优化 PWA，为用户提供更流畅、更高效的体验！ 🚀