WordPress网站宝塔面板使用Service Worker加速（浏览器缓存）

今天老白博客@老白给大家分享的WordPress优化教程是“WordPress网站宝塔面板使用Service Worker加速（浏览器缓存）”。service worker是浏览器的一个高级特性，本质是一个web worker，是独立于网页运行的脚本。 web worker这个api被造出来时，就是为了解放主线程。因为，浏览器中的JavaScript都是运行在单一个线程上，随着web业务变得越来越复杂，js中耗时间、耗资源的运算过程则会导致各种程度的性能问题。 而web worker由于独立于主线程，则可以将一些复杂的逻辑交由它来去做，完成后再通过postMessage的方法告诉主线程。 service worker则是web worker的升级版本，相较于后者，前者拥有了持久离线缓存的能力。

简单来说，就是用户在浏览器里面访问过你的网站一次之后，后续访问速度会非常快！，上图是servicework支持的浏览器

Service Worker特点

• 独立于主线程、在后台运行的脚本
• 被install后就永远存在，除非被手动卸载
• 必须是https的协议才能使用。不过在本地调试时，在http://localhost 和http://127.0.0.1 下也是可以跑起来的。
• 不能直接操纵dom：因为sw是个独立于网页运行的脚本。
• 可拦截请求和返回，缓存文件。sw可以通过fetch这个api，来拦截网络和处理网络请求，再配合cacheStorage来实现web页面的缓存管理以及与前端postMessage通信。

接下来，就是WordPress网站宝塔面板使用Service Worker加速详细方法介绍了。

（本文转载自https://iymark.com/articles/3543.html，感谢站长分享）

Service Worker功能文件

这一部分属于付费资源。当然，你也可以在网上找到相关的文件，然后继续观看本教程。文末提供的文件一共三个，都是Service Worker必须的资源文件以及功能性文件。

https://qtrj.lanzoul.com/iommW0snyyfa

此处仅供自用，需要请点击上方原文处购买！

Service Worker集成到WordPress

将文末提供的三个文件，放于WordPress网站根目录，比如data/www/www.xcbtmw.com目录下

接着，在WordPress主题footer.php文件中加入如下代码，或者在WordPress主题设置-插入代码-页脚代码中加入如下代码。这里，我推荐直接在后台主题设置中，找到插入代码，页脚代码中插入即可。这样，主题更新时，不会有任何影响（或者如老白博客一般，加入到子主题里面）。

<!--serverworker激活https://www.xcbtmw.com/26762.html-->
<script>
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.');
}
</script>
<!--serverworker激活https://www.xcbtmw.com/26762.html-->

上述代码属于Service Worker缓存的引入，不建议做任何修改。如果你实在受不了那些英文，可以改掉console.log后面的描述，那是在f12控制台console输出的结果描述。

• Assets cached by the controlling service worker.
  • 表明一个成功启动缓存的提示
• Please reload this page to allow the service worker to handle network operations.
  • 表明你是第一次访问网站，再次点击一个页面，就会成功启动缓存。
• Service workers are not supported in the current browser.
  • 表明当前浏览器不支持Service Worker缓存

Service Worker修改

请注意，关于我提供的那三个文件，你只能修改serviceworker.js文件，属于简单的配置文件，指定你的哪些资源需要走Service Worker缓存（SW缓存）。

首先，请将serviceworker.js文件中的xcbtmw.com修改为你自己的域名。

 //以下的网址请更换为博客地址(可以填写绝对链接或者相对链接)
self.importScripts('https://www.xcbtmw.com/sw-toolbox.js');
self.toolbox.options.debug = false;
//由于老白博客启用WP Super Cache，所以添加Cache目录
self.toolbox.router.get('wp-content/cache/(.*)', self.toolbox.cacheFirst, {
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});

serviceworker.js文件中的上述代码，你可以改为你自己静态资源缓存的地方。比如你用了WP Super Cache这款插件，就可以保持这个配置。当然，你也可以多复制几份这个配置代码，添加自己所有静态资源的目录。

 self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
origin: /cdn.jsdelivr.com/,
cache: {
name: staticVendorCacheName,
maxEntries: maxEntries
}
});

上述代码为第三方资源添加的方法，可以多复制几份，把所有第三方的域名都添加一遍，注意写法即可。

Service Worker流程

• Service Worker 文件只在首次注册的时候执行了一次。
• 安装、激活流程也只是在首次执行 Service Worker 文件的时候进行了一次。
• 首次注册成功的 Service Worker 不能拦截当前页面的请求。
• 非首次注册的 Service Worker 可以控制当前的页面并能拦截请求。
• Service Worker 首次注册或者有新版本触发更新的时候，才会重新创建一个 worker 工作线程并解析执行 Service Worker 文件，在这之后并进入 Service Worker 的安装和激活生命周期