Service Workers：深入探究

Service Workers：驱动现代 Web 应用的后台脚本

Service Worker 是一种特殊的 JavaScript 文件，它在后台运行，与您的网页分离。它们充当可编程的网络代理，拦截请求并决定如何响应。这就是离线支持、推送通知和后台同步等现代 Web 功能得以实现的原因。

Service Workers 的工作原理

Service Worker 由您的网页注册，然后安装在浏览器中。安装完成后，它可以拦截页面发出的每个网络请求。当您的页面请求一个文件时，Service Worker 可以从缓存中提供，从网络获取，或两者结合。它甚至可以创建自定义响应。

Service Worker 在自己的线程中运行，与主页面完全分离。它们无法访问 DOM，但可以通过消息与页面通信。它们还具有明确定义的生命周期：安装、激活和获取。安装事件是您缓存应用文件的地方，激活事件是您清理旧缓存的地方，而获取事件是您处理请求的地方。

缓存策略

最常见的模式是在安装期间缓存应用的壳（HTML、CSS 和 JavaScript）。当用户访问时，Service Worker 会立即从缓存中提供壳，然后在后台获取新内容。这让用户能立即看到一些内容，同时在新内容到达时更新页面。

对于图片和 API 响应，您可以使用缓存优先策略：检查缓存，如果文件存在则立即提供。如果不存在，则从网络获取并缓存以备下次使用。对于需要保持新鲜的关键数据，应使用网络优先策略：先尝试网络，如果网络不可用则回退到缓存。

生命周期和更新

Service Worker 的生命周期一开始可能难以理解。当用户访问您的网站时，如果 Service Worker 发生了变化（即使只是一个字节），新版本会在后台安装。但它不会接管控制权，直到所有使用旧版本的页面都关闭。这可以防止新旧版本之间的不一致。

您可以使用 skipWaiting 强制新的 Service Worker 立即接管控制权，并使用 clients.claim 让它接管所有打开的页面。但要小心——如果新版本期望的数据结构与旧版本不同，这可能会引起问题。

超越缓存：推送和同步

Service Worker 还支持另外两个重要功能。推送通知允许服务器在网站未打开时向用户发送消息。Service Worker 接收推送事件，创建通知，用户会看到它。后台同步允许 Service Worker 将操作推迟到用户拥有稳定互联网连接时——这对于发送表单提交或保存编辑等操作非常有用。

Service Worker 是现代 Web 应用的基础技术。它们使 Web 感觉像一个平台，而不仅仅是文档查看器。