为WordPress启用WorkBox

Otstar Lin

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

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

使用方法

注册 Service Worker

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

引入 WorkBox 框架

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

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

写入规则

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

建议安装 WP Super Cache

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

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

结尾

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

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