站点图标

为WordPress启用Service Worker

2018-07-01折腾记录Develop / Web / WordPress
本文最后更新于 410 天前,文中所描述的信息可能已发生改变

Service Worker 是 Google 推出的一项技术。Service Worker 是浏览器在后台独立于网页运行的脚本,它打开了通向不需要网页或用户交互的功能的大门。但是对于博客来说我们只需要用到 Service Worker 缓存功能,加速网站的二次访问。

从上面的加载情况看,除去 Bing 的每日一图,其他文件共 15k,其中 gif 和 png 图都未配置 Service Worker,实际请求会更小

**注:**Service Workers 只有在 HTTPS 的前提下才能发挥作用

加入 sw-toolbox 核心至 WordPress

下载sw-toolbox.js并且放到根目录

创建缓存规则

在根目录下创建 serviceworker.js,并且写入下面内容(以下均为参考,具体配置请根据情况进行配置)


_105
"use strict";
_105
_105
(function () {
_105
"use strict";
_105
/**
_105
* Service Worker Toolbox caching
_105
*/
_105
_105
var cacheVersion = "-toolbox-v1";
_105
var dynamicVendorCacheName = "dynamic-vendor" + cacheVersion;
_105
var staticVendorCacheName = "static-vendor" + cacheVersion;
_105
var staticAssetsCacheName = "static-assets" + cacheVersion;
_105
var contentCacheName = "content" + cacheVersion;
_105
var maxEntries = 50;
_105
//以下的网址请更换为博客地址(可以填写绝对链接或者相对链接)
_105
self.importScripts("https://blog.ixk.me/sw-toolbox.js");
_105
self.toolbox.options.debug = false;
_105
//由于我的博客启用Autoptimize,以及WP Super Cache,所以添加Cache目录
_105
self.toolbox.router.get("wp-content/cache/(.*)", self.toolbox.cacheFirst, {
_105
cache: {
_105
name: staticAssetsCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
//添加毒瘤jquery的缓存规则
_105
self.toolbox.router.get(
_105
"wp-includes/js/jquery/jquery.js",
_105
self.toolbox.cacheFirst,
_105
{
_105
cache: {
_105
name: staticAssetsCacheName,
_105
maxEntries: maxEntries
_105
}
_105
}
_105
);
_105
//添加主题的静态资源,具体目录请自行更换
_105
self.toolbox.router.get(
_105
"/wp-content/themes/grace-minimal-theme/assets/(.*)",
_105
self.toolbox.cacheFirst,
_105
{
_105
cache: {
_105
name: staticAssetsCacheName,
_105
maxEntries: maxEntries
_105
}
_105
}
_105
);
_105
//以下均为第三方资源缓存
_105
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
_105
origin: /cdn\.bootcss\.com/,
_105
cache: {
_105
name: staticVendorCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
_105
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
_105
origin: /static\.yecdn\.com/,
_105
cache: {
_105
name: staticVendorCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
_105
// 缓存 googleapis
_105
self.toolbox.router.get("/css", self.toolbox.fastest, {
_105
origin: /fonts\.googleapis\.com/,
_105
cache: {
_105
name: dynamicVendorCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
_105
self.toolbox.router.get("/css", self.toolbox.fastest, {
_105
origin: /fonts\.yecdn\.com/,
_105
cache: {
_105
name: dynamicVendorCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
_105
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
_105
origin: /(fonts\.gstatic\.com|www\.google-analytics\.com)/,
_105
cache: {
_105
name: staticVendorCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
_105
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
_105
origin: /(fonts-gstatic\.yecdn\.com|www\.google-analytics\.com)/,
_105
cache: {
_105
name: staticVendorCacheName,
_105
maxEntries: maxEntries
_105
}
_105
});
_105
_105
// immediately activate this serviceworker
_105
self.addEventListener("install", function (event) {
_105
return event.waitUntil(self.skipWaiting());
_105
});
_105
_105
self.addEventListener("activate", function (event) {
_105
return event.waitUntil(self.clients.claim());
_105
});
_105
})();

启用 Service Workers

打开主题文件所在目录,修改 footer.php,在 </body> 前加入以下代码


_22
<script>
_22
var serviceWorkerUri = "/serviceworker.js";
_22
_22
if ("serviceWorker" in navigator) {
_22
navigator.serviceWorker
_22
.register(serviceWorkerUri)
_22
.then(function () {
_22
if (navigator.serviceWorker.controller) {
_22
console.log("Assets cached by the controlling service worker.");
_22
} else {
_22
console.log(
_22
"Please reload this page to allow the service worker to handle network operations."
_22
);
_22
}
_22
})
_22
.catch(function (error) {
_22
console.log("ERROR: " + error);
_22
});
_22
} else {
_22
console.log("Service workers are not supported in the current browser.");
_22
}
_22
</script>

以上就是 WordPress 启用 Service Worker 的方法,由于 WordPress 是动态博客所以实现断网访问有些困难,博主我很菜,所以暂时无法实现断网访问(摊手

为WordPress启用Service Worker

https://blog.ixk.me/post/wordpress-enabled-service-worker
  • 许可协议

    BY-NC-SA

  • 发布于

    2018-07-01

  • 本文作者

    Otstar Lin

转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!

博客一年记录Bing每日一图API