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

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

WordPress网站宝塔面板使用Service 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缓存

WordPress网站宝塔面板使用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 的安装和激活生命周期