Service Worker 是由 W3C（国际万维网联盟）制定的 Web 标准，由 Google 工程师 Alex Russell 和 W3C Web Applications Working Group 共同开发。
Service Worker 的优化好处
- 提升页面加载速度
Service Worker 可以缓存静态资源（如 HTML、CSS、JS、图片等），在用户再次访问时直接从本地缓存加载，减少对服务器的请求。
首屏或后续页面加载速度更快，提升用户体验。 - 实现离线访问
即使在网络断开的情况下，Service Worker 也可以通过缓存提供部分内容，让用户继续浏览关键信息。
特别适合移动设备用户在信号不稳定或无网络环境下使用。 - 减少服务器负载
缓存策略可以大幅减少对服务器的请求次数，降低带宽消耗和服务器压力。
对于高并发网站尤其重要，可节省大量资源成本。 - 统一资源控制
Service Worker 能够全局控制所有页面的网络请求，开发者可以灵活定义哪些资源应该缓存、如何更新、何时从缓存读取等。
支持多种缓存策略（如 Cache First、Network First、Stale While Revalidate 等）。 - 支持渐进式 Web 应用（PWA）
Service Worker 是 PWA 的核心组成部分之一，配合 Web App Manifest 实现添加到主屏幕、全屏显示、推送通知等功能。
提升 Web 应用的原生体验和用户粘性。 - 更好的用户体验一致性
用户在不同网络条件下都能获得一致的加载体验，避免因网络延迟导致白屏或加载失败。
可以展示“正在加载”提示或兜底内容，提升交互友好度。 - 按需更新机制
Service Worker 支持后台更新缓存资源，在用户下次访问时自动应用新版本，无需强制刷新页面。
实现无缝升级，不影响当前用户的使用。 - 跨页面共享
Service Worker 是页面独立的，可以在多个页面之间共享，提高资源复用效率。
比如：一个页面下载的资源，其他页面可以直接从缓存中获取。
🧩 常见优化策略示例
资源类型 推荐缓存策略 说明
静态资源（JS/CSS/图片） Cache First 优先使用缓存，定期更新
API 数据 Network First 或 Stale-While-Revalidate 兼顾实时性和性能
HTML 页面 Network First 或 Cache with Network fallback 保证内容最新，同时提供离线回退
⚠️ 注意事项
Service Worker 必须通过 HTTPS 部署（开发环境除外）。
它是异步执行的，不能直接访问 DOM。
更新机制需要谨慎处理，确保新版本能正确激活并替换旧缓存。
不同浏览器对缓存大小和策略的支持略有差异，需做兼容性测试。
Service Worker 使用
将文末文件上传至 WordPress 根目录（如 data/www/域名）。
在主题 footer.php 文件的 前，插入以下代码（或用主题设置页脚插入功能）：
var serviceWorkerUri = ‘/serviceworker.js’;
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(serviceWorkerUri).then(function() {
if (navigator.serviceWorker.controller) {
console.log(‘Assets cached by the controlling service worker.’);
} else {
console.log(‘Please reload this page to allow the service worker to handle network operations.’);
}
}).catch(function(error) {
console.log(‘ERROR: ‘ + error);
});
} else {
console.log(‘Service workers are not supported in the current browser.’);
}
Service Worker 修改
你只需修改 serviceworker.js 文件中相关配置。
示例一：缓存静态资源路径
self.toolbox.router.get(‘wp-content/cache/(.*)’, self.toolbox.cacheFirst, {
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});
示例二：缓存第三方资源
self.toolbox.router.get(‘/(.*)’, self.toolbox.cacheFirst, {
origin: /cdn.jsdelivr.com/,
cache: {
name: staticVendorCacheName,
maxEntries: maxEntries
}
});
Service Worker 流程
浏览器请求网页
若已安装 SW，发起请求到 SW
若缓存中有资源，则直接返回
若无，则向服务器请求并缓存
下次请求走缓存，提高速度
Service Worker 在后台运行，即使网页关闭也能继续缓存。
