使用Workbox库的Service Worker缓存静态资源加速你的网站

使用Workbox接入Service worker

Service Worker是运行在浏览器后台的独立线程，无需页面关联即可运行，主要功能包括资源缓存、离线访问支持、网络请求拦截等。而Workbox是Google开发的开源库，它封装了Service Worker的底层复杂逻辑，提供了预定义的缓存策略、资源更新机制和缓存清理方案，大幅降低了Service Worker的开发门槛。

通过Workbox实现静态资源缓存，可显著减少重复网络请求，提升网站加载速度，尤其在弱网或离线环境下能极大优化用户体验。

Workbox开源仓库地址：https://github.com/GoogleChrome/workbox

网站接入Workbox教程

本文以wordpress为例，进入网站根目录后，上传文末下载的workbox-sw.zip

解压workbox-sw压缩包，得到文件夹和一个js配置文件

在主题目录的function.php中添加代码

function add_serviceworker_footer() {
    // 资源版本更新（保留版本控制，确保文件更新时触发重新注册）
    $static_ver = "ver=1.0.0";
    ?>
    <script>
        // Service Worker 路径：根目录下的 ws.js，拼接版本号参数
        const serviceWorkerUri = '/serviceworker.js?<?php echo $static_ver; ?>';

        // 检查浏览器是否支持 Service Worker
        if ('serviceWorker' in navigator) {
            // 原生注册 Service Worker
            navigator.serviceWorker.register(serviceWorkerUri)
                .then((registration) => {
                    console.log('Service Worker 注册成功，作用域：', registration.scope);

                    // 监听新 Service Worker 安装完成但未激活的状态
                    registration.addEventListener('waiting', () => {
                        console.log('新的 Service Worker 已安装，关闭所有页面标签后生效');
                    });

                    // 监听 Service Worker 激活事件（首次激活或更新激活）
                    registration.addEventListener('activate', () => {
                        if (navigator.serviceWorker.controller) {
                            console.log('Service Worker 已更新并激活，建议刷新页面');
                        } else {
                            console.log('Service Worker 首次激活成功，开始缓存资源');
                        }
                    });
                })
                .catch((error) => {
                    console.error('Service Worker 注册失败:', error);
                });
        } else {
            console.log('当前浏览器不支持 Service Worker');
        }
    </script>
    <?php
}
add_action('wp_footer', 'add_serviceworker_footer');

这样你就接入完了

serviceworker.js配置

正则匹配实现缓存wordprss上传目录

// 匹配规则：所有路径以/wp-content/uploads/开头的资源（正则表达式匹配）
workbox.routing.registerRoute(
  new RegExp('/wp-content/uploads/(.*)'),
  // 采用CacheFirst（缓存优先）策略：优先从缓存读取，缓存未命中时才请求网络
  // 适合不常变动的静态资源，能减少网络请求，提升加载速度
  new workbox.strategies.CacheFirst({
    cacheName: staticAssetsCacheName, // 缓存名称（通常在外部定义，用于区分不同类型的缓存）
    plugins: [
      // 缓存可响应插件：仅缓存状态码为0（部分无HTTP状态的请求，如Service Worker拦截的请求）或200（成功响应）的资源
      new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [0, 200] }),
      // 过期插件：限制缓存的最大条目数（maxEntries通常在外部定义），防止缓存无限增长占用过多空间
      new workbox.expiration.ExpirationPlugin({ maxEntries })
    ]
  })
);

缓存三方资源

// 匹配规则：所有来源（origin）为https://at.alicdn.com的资源（通常是第三方库、公共静态资源等）
workbox.routing.registerRoute(
  ({ url }) => url.origin === 'https://at.alicdn.com',
  // 采用CacheFirst（缓存优先）策略：优先从缓存读取，缓存未命中时才请求网络
  // 适合不常变动的静态资源，能减少网络请求，提升加载速度
  new workbox.strategies.CacheFirst({
    cacheName: staticVendorCacheName, // 缓存名称（区分于本地静态资源缓存）
    plugins: [
      // 缓存可响应插件：仅缓存状态码为0（部分无HTTP状态的请求，如Service Worker拦截的请求）或200（成功响应）的资源
      new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [0, 200] }),
      // 过期插件：限制缓存的最大条目数（maxEntries通常在外部定义），防止缓存无限增长占用过多空间
      new workbox.expiration.ExpirationPlugin({ maxEntries })
    ]
  })
);

官方示例：

// 配置Workbox，开启调试模式（开发环境下会输出详细日志，便于调试）
workbox.setConfig({
  debug: true,
});

// 预缓存指定资源并设置路由：预缓存会在Service Worker安装阶段就缓存资源，确保关键资源离线可用
// 这里预缓存了Bootstrap 4.0.0-beta版本的CSS文件
workbox.precaching.precacheAndRoute([
  'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css',
]);

// 示例1：使用默认缓存策略处理JavaScript文件
// 注册路由，匹配所有以.js结尾的文件（通过正则表达式匹配）
workbox.routing.registerRoute(
  new RegExp('.*\\.(?:js)'),
  // 使用NetworkFirst策略：优先从网络获取资源，网络不可用时使用缓存
  // 适用于频繁更新的资源（如JS文件），保证获取最新版本
  new workbox.strategies.NetworkFirst(),
);

// 示例2：为路由设置自定义缓存名称及插件
// 注册路由，匹配所有图片文件（png、jpg、jpeg、svg、gif格式）
workbox.routing.registerRoute(
  new RegExp('.*\\.(?:png|jpg|jpeg|svg|gif)'),
  // 使用CacheFirst策略：优先从缓存获取资源，缓存未命中时才请求网络
  // 适用于不频繁更新的静态资源（如图片），提升访问速度
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache', // 自定义缓存名称，便于区分不同类型的缓存
    plugins: [
      // 添加过期插件，限制缓存条目数量最多为3个
      // 当缓存条目超过3个时，会删除最早缓存的条目，防止缓存体积过大
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 3,
      }),
    ],
  }),
);

验证Service Worker是否生效

网络中可查看是否来自service worker

在应用中可查看缓存空间，版本及已缓存的内容

如何更新service worker缓存

自动更新，每7天自动更新一次，你可以调整时间

手动更新，修改serviceworker.js文件，图中指示的版本号，修改即可

结语

哥们儿就问你二次访问快了没？CDN流量是不是消耗的少了？

原文链接(非王先生笔记发布均为盗版)：https://wxsnote.cn/5220.html