WordPress使用Service Worker

发布人：潘阳发布时间：2025-05-21 17:36 阅读量：19

Service Worker 使用说明

Service Worker 是谁开发的

Service Worker 是由 W3C（国际万维网联盟）制定的 Web 标准，由 Google 工程师 Alex Russell 和 W3C Web Applications Working Group 共同开发。

Service Worker 有什么用处

Service Worker 是一种浏览器技术，可以在后台运行 JavaScript 脚本，实现离线缓存、消息推送、后台同步和性能优化等功能。

具体来说，Service Worker 可以将网站的资源缓存到本地，使用户在离线状态下也可访问；还能实现消息推送、后台数据同步，并通过拦截请求提升性能。

它可显著提高网站用户体验、降低服务器负载、节省流量等。

Service Worker 的兼容性

根据 Can I use 数据，主流浏览器支持如下：

Chrome: 40+
Firefox: 44+
Safari: 11.1+
Edge: 17+
Opera: 24+
Android Browser: 4.4+
UC Browser: 12.12+
Samsung Internet: 4+

主流浏览器支持良好，但旧浏览器仍可能不兼容。

兼容性图示

Service Worker 特点

离线缓存：提升用户体验
推送通知：即使网页关闭也能提醒
资源预加载：加快页面打开速度
消息拦截：实现请求代理与缓存
跨域通信：支持多域名数据交互

可大大增强 Web 应用的性能与体验。

Service Worker 资源

本文提供 3 个 Service Worker 必需资源文件，文末可下载。

Service Worker 使用

将文末文件上传至 WordPress 根目录（如 data/www/域名）。

在主题 footer.php 文件的 </body> 前，插入以下代码（或用主题设置页脚插入功能）：

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
  }
});