站点图标

为WordPress启用WorkBox

2019-02-02折腾记录WordPress / Service-Worker / WorkBox
本文最后更新于 410 天前,文中所描述的信息可能已发生改变

若你是一个追求极致 Web 体验的站长,那你一定或多或少都听说过 Service Worker,而现在已经是 2019 年了,Service Worker 已经不是一项令人惊叹的技术了,Service Worker 会接管全站的请求,若一不留神用户说不定就再也无法看到站点最新的资讯了,不过 Google Chrome 团队推出了 Workbox,使编写缓存规则不再困难。

本文是面向 WordPress 的教程,不适用于 Typecho

使用方法

注册 Service Worker

在主题的 functions.php 加入以下代码


_9
function origami_setting_workbox()
_9
{
_9
echo "<script>if ('serviceWorker' in navigator) {
_9
window.addEventListener('load', () => {
_9
navigator.serviceWorker.register('/sw.js');
_9
});
_9
}</script>";
_9
}
_9
add_action('wp_footer', 'origami_setting_workbox', '101');

引入 WorkBox 框架


_12
importScripts(
_12
"https://cdn.jsdelivr.net/npm/workbox-cdn@3.6.3/workbox/workbox-sw.js"
_12
);
_12
workbox.setConfig({
_12
modulePathPrefix: "https://cdn.jsdelivr.net/npm/workbox-cdn@3.6.3/workbox/"
_12
});
_12
_12
if (workbox) {
_12
console.log(`Yay! Workbox is loaded ?`);
_12
} else {
_12
console.log(`Boo! Workbox didn't load ?`);
_12
}

若成功引入就会在浏览器的控制台中输出Yay! Workbox is loaded ?

同时可以在开发工具中的 Application 选项卡中的 Service Workers 中看到激活信息

写入规则

由于 WordPress 是动态博客,所以在写规则的就会遇到一些静态博客不会遇到的问题,比如静态博客的页面是已经渲染好的,只要缓存 html 等静态文件就可以实现离线访问,而 php 的页面是实时渲染的,并且有后台,还有评论系统,这些都不能进行缓存

建议安装 WP Super Cache

首先定义缓存的版本号和默认最大缓存数目(可以忽略,但后面的代码需要进行修改)


_2
let cacheSuffixVersion = "-181111";
_2
const maxEntries = 100;

然后限制必须使用网络的资源


_129
// 由于我的主题评论是使用Ajax获取然后由前端渲染的,所以要将其设置为网络优先
_129
workbox.routing.registerRoute(
_129
/.*\?action.*/,
_129
workbox.strategies.networkFirst()
_129
);
_129
// Ajax评论设置为只使用网络
_129
workbox.routing.registerRoute(/.*&action.*/, workbox.strategies.networkOnly());
_129
// 后台也设置为只使用网络
_129
workbox.routing.registerRoute(/.*wp-admin.*/, workbox.strategies.networkOnly());
_129
// 将rss,sitemap等需要实时更新的页面设为只使用网络
_129
workbox.routing.registerRoute(/.*sitemap.*/, workbox.strategies.networkOnly());
_129
workbox.routing.registerRoute(/.*feed.*/, workbox.strategies.networkOnly());
_129
// 匹配html页面
_129
workbox.routing.registerRoute(
_129
// 使用正则表达式匹配路由
_129
/.*\.html'/,
_129
workbox.strategies.cacheFirst({
_129
// cache storage 名称和版本号
_129
cacheName: "html-cache" + cacheSuffixVersion,
_129
plugins: [
_129
// 使用 expiration 插件实现缓存条目数目和时间控制
_129
new workbox.expiration.Plugin({
_129
// 最大保存项目
_129
maxEntries,
_129
// 缓存 30 天
_129
maxAgeSeconds: 30 * 24 * 60 * 60
_129
}),
_129
// 使用 cacheableResponse 插件缓存状态码为 0 的请求
_129
new workbox.cacheableResponse.Plugin({
_129
statuses: [0, 200]
_129
})
_129
]
_129
})
_129
);
_129
// 全站缓存的关键代码
_129
workbox.routing.registerRoute(
_129
// 此处需要更改为站点对应的URL
_129
new RegExp("https://dev.ixk.me.*"),
_129
workbox.strategies.staleWhileRevalidate({
_129
cacheName: "blog-cache" + cacheSuffixVersion,
_129
plugins: [
_129
// 使用 expiration 插件实现缓存条目数目和时间控制
_129
new workbox.expiration.Plugin({
_129
// 最大保存项目
_129
maxEntries,
_129
// 缓存 30 天
_129
maxAgeSeconds: 30 * 24 * 60 * 60
_129
}),
_129
// 使用 cacheableResponse 插件缓存状态码为 0 的请求
_129
new workbox.cacheableResponse.Plugin({
_129
statuses: [0, 200]
_129
})
_129
]
_129
})
_129
);
_129
// 图片,样式表,字体的缓存
_129
workbox.routing.registerRoute(
_129
// Cache Image File
_129
/.*\.(?:png|jpg|jpeg|svg|gif)/,
_129
workbox.strategies.staleWhileRevalidate({
_129
cacheName: "img-cache" + cacheSuffixVersion,
_129
plugins: [
_129
// 使用 expiration 插件实现缓存条目数目和时间控制
_129
new workbox.expiration.Plugin({
_129
// 最大保存项目
_129
maxEntries,
_129
// 缓存 30 天
_129
maxAgeSeconds: 30 * 24 * 60 * 60
_129
}),
_129
// 使用 cacheableResponse 插件缓存状态码为 0 的请求
_129
new workbox.cacheableResponse.Plugin({
_129
statuses: [0, 200]
_129
})
_129
]
_129
})
_129
);
_129
_129
workbox.routing.registerRoute(
_129
// Cache CSS & JS files
_129
/.*\.(css|js)/,
_129
workbox.strategies.staleWhileRevalidate({
_129
cacheName: "static-assets-cache",
_129
plugins: [
_129
// 使用 expiration 插件实现缓存条目数目和时间控制
_129
new workbox.expiration.Plugin({
_129
// 最大保存项目
_129
maxEntries,
_129
// 缓存 30 天
_129
maxAgeSeconds: 30 * 24 * 60 * 60
_129
}),
_129
// 使用 cacheableResponse 插件缓存状态码为 0 的请求
_129
new workbox.cacheableResponse.Plugin({
_129
statuses: [0, 200]
_129
})
_129
]
_129
})
_129
);
_129
_129
workbox.routing.registerRoute(
_129
// Cache Fonts files
_129
/.*\.(woff|woff2)/,
_129
workbox.strategies.staleWhileRevalidate({
_129
cacheName: "static-assets-cache",
_129
plugins: [
_129
// 使用 expiration 插件实现缓存条目数目和时间控制
_129
new workbox.expiration.Plugin({
_129
// 最大保存项目
_129
maxEntries,
_129
// 缓存 30 天
_129
maxAgeSeconds: 30 * 24 * 60 * 60
_129
}),
_129
// 使用 cacheableResponse 插件缓存状态码为 0 的请求
_129
new workbox.cacheableResponse.Plugin({
_129
statuses: [0, 200]
_129
})
_129
]
_129
})
_129
);
_129
// 其他的默认规则
_129
workbox.routing.setDefaultHandler(
_129
workbox.strategies.networkFirst({
_129
options: [
_129
{
_129
// 超过 3s 请求没有响应则 fallback 到 cache
_129
networkTimeoutSeconds: 3
_129
}
_129
]
_129
})
_129
);

结尾

至此站点除了后台,其他的页面应该就可以进行全站离线访问,但是由于使用了缓存,若站点未将评论分离的话,就会导致评论不能实时更新,这时候就可以使用第三方评论系统来代替默认评论,如 Disqus(国内处于被墙状态)

我的新主题已经使用了 WorkBox,可以去尝试一下 Link 从缓存中的加载页面的速度可以达到惊人的 219ms。

为WordPress启用WorkBox

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

    BY-NC-SA

  • 发布于

    2019-02-02

  • 本文作者

    Otstar Lin

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

Origami - 简洁轻快的WordPress主题[青空之蓝-2018]-年度总结