前言
ClientWorker简称cw
cw是cyf大佬开发的一个简单且配置方便的一个sw
官方是这么介绍的:
ClientWorker
一个基于规则驱动的前端路由拦截器
用规则定义黑科技
快速开始
墙裂建议参考官方文档 - 快速开始
这里只写 Hexo Butterfly 主题的方法
CDN接入
官方墙裂建议用此方式安装。
在你的网站**根目录(就是博客根目录\scores)**下新建一个名为 cw.js的文件，里面写上：
1
| importScripts('https://lib.baomitu.com/clientworker/latest/dist/cw.js')
|
你也可以采用jsdelivr镜像进行接入
1
| importScripts('https://cdn.jsdelivr.net/npm/clientworker@latest')
|
官方文档拥有更多引入镜像
官方非常强烈建议在引入脚本时要指定clientworker的版本(而不是默认latest(最新版本))，最新版本可以到官方GitHub Release查看。
写入配置
这个也是cw最容易出问题的点(最简单也是最难的一步)
在根目录(hexo 请放在 博客根目录\scores)下新建一个 config.yaml，填入配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| name: ClientWorker
catch_rules:
- rule: _
transform_rules:
- search: \#.+
searchin: url
replace: ''
- search: _
action: fetch
fetch:
engine: fetch
- search: (^4|^5)
searchin: status
action: return
return:
body: The GateWay is down!This Page is provided by ClientWorker!
status: 503
|
也可以填入我这个什么用也没有的配置
1
2
3
4
5
6
| name: ClientWorker
catch_rules:
- rule: _
transform_rules:
- search: _
action: skip
|
Step 3 配置安装代码
官方有三种方式接入： 三文件全域安装 、 自定义无刷新安装 、 自定义刷新安装
但我这只讲：自定义无刷新安装、自定义刷新安装
其中，全域安装最简单，对SEO支持也最恶劣（Google会提示额外的计算开销，而百度完全没办法爬取）。比较适用于自用的、只追求速度的。自定义无刷新安装则对你的HTML和JS水平有所要求，对于部分不遵守标准的浏览器兼容性较差，但是这种方法对SEO没有影响，比较适合于对seo注重的网站。自定义刷新安装对seo略有影响，会在载入后阻断未经CW的请求并刷新一次，以便于CW及时托管，比较适合于网站提速
通用步骤：
在博客根目录\scores新建一个js(放在scores文件夹里就行),名称随意比如cw_install.js
本文以source/js/cw_install.js为列子
下面有2种方法，可以通过点击tab切换
在刚刚新建的js文件里写上下面这些内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| if (!!navigator.serviceWorker) {
navigator.serviceWorker.register('/cw.js?t=' + new Date().getTime()).then(async (registration) => {
if (localStorage.getItem('cw_installed') !== 'true') {
const conf = () => {
console.log('[CW] Installing Success,Configuring...');
fetch('/cw-cgi/api?type=config')
.then(res => res.text())
.then(text => {
if (text === 'ok') {
console.log('[CW] Installing Success,Configuring Success,Starting...');
localStorage.setItem('cw_installed', 'true');
fetch(window.location.href).then(res => res.text()).then(text => {
document.open()
document.write(text);
document.close();
});
} else {
console.warn('[CW] Installing Success,Configuring Failed,Sleeping 200ms...');
setTimeout(() => {
conf()
}, 200);
}
}).catch(err => {
console.log('[CW] Installing Success,Configuring Error,Exiting...');
});
}
setTimeout(() => {
conf()
}, 50);
}
}).catch(err => {
console.error('[CW] Installing Failed,Error: ' + err.message);
});
} else { console.error('[CW] Installing Failed,Error: Browser not support service worker'); }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| if (!!navigator.serviceWorker) {
if (localStorage.getItem('cw_installed') !== 'true') {window.stop();}
navigator.serviceWorker.register('/cw.js?t=' + new Date().getTime()).then(async (registration) => {
if (localStorage.getItem('cw_installed') !== 'true') {
setInterval(() => {
fetch('/cw-cgi/api?type=config').then(res => res.text()).then(res => {
if(res === 'ok') {
localStorage.setItem('cw_installed', 'true');
console.log('[CW] Installation is completed.Reloading...');
location.reload()
}
}).catch(err => {
console.warn('[CW] Installation may not be complete, try again later.')
})
}, 100);
}
}).catch(err => {
console.error('[CW] Installing Failed,Error: ' + err.message);
})
} else { console.error('[CW] Installing Failed,Error: Browser not support service worker'); }
|
将cw配置文件跳过渲染，并加入头部
- 打开根目录的hexo配置文件
_config.yml
1
2
| skip_render:
+ - config.yaml
|
- 打开主题配置文件
1
2
3
4
| inject:
head:
+ -<scriptsrc="/js/cw_install2.js"></script>
......
|