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通信。
http://localhost
和http://127.0.0.1
下也是可以跑起来的。接下来,就是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
}
});
上述代码为第三方资源添加的方法,可以多复制几份,把所有第三方的域名都添加一遍,注意写法即可。
试试效果