抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

什么是 clientworker

  • ClientWorker能干什么?
    • 绕备,在域名不变动的情况下,其余用户所有请求均可以定向到你的其他服务器或者cdn,而首屏域名无需ICP备案。
    • 降本,你可以用廉价的家宽+公网ipv4/ipv6,即使是80/443被封锁,你也可以在不变动端口的情况下将用户流量引向家宽。
    • 白嫖,可以用免费的公网穿透服务,接近零成本托管你的服务。
    • 加速,将静态资源流量(乃至动态资源)并发到全球cdn,实现前端级负载均衡。
    • 绕禁,通过在前端修改标头的方式,修复被故意篡改的MIME,正常托管网站,绕过各大托管商对于网站部署的限制,可以毫无负担的使用阿里云、腾讯云等对象存储而不用开启网站模式,乃至GithubRaw无限流量(绕过GithubPage 100GB限制)。
    • 愈合:通过并发方式,辅助JSDelivr、Unpkg、cdnjs等大陆几乎不可达请求重定向至其他cdn,从而实现无修改、全球加速。
    • 不宕,即使首屏服务器离线或不可达,已访问过的用户依旧可以正常命中备用服务器。
    • 缓存,颗粒化控制缓存,多种情况不同选择,智能调度缓存和请求,避免有缓存时无返回、缓存无法及时更新问题,确保缓存在客户端工作的更顺畅。
    • 离线,可以迅速支撑普通离线应用,助力快速构建PWA。
    • 兼容,Webp无缝,可以通过判断标头来判断是否支持Webp,并且自动替换图片请求,为网站加速助力。
    • 审核,通过内置的规则可以屏蔽并替换、拦截敏感词汇,实现网站内容安全。
    • 无刷,你不需要刷新就可以激活ClientWorker
    • 热更,即使源站完全宕机,你也可以更新用户手中的ClientWorker与配置,确保网站正常运行。
    • 切片,对于一个请求发起多个切片以提高单文件下载速度
    • 叠速,专门为ClientWorker开发的KFCThursdayVW50引擎能在浏览器端切片并同时并发不同的镜像服务器,对于下载大文件可以带宽叠加的效果。
    • 均衡,对多个镜像并发,选择最优的镜像服务器,保证网站的响应速度,同时达到负载均衡的目的。
    • 高度自定义…更多玩法等你挖掘

首屏加载不在ClientWorker拦截范围内。

to-do

Before we start….

  • ServiceWorker是一个注册在指定源和路径下的事件驱动worker。而ClientWorker是利用规则全局驱动sw的插件。
  • ClientWorker目前涵盖了ServiceWorker的路由拦截路由劫持请求/响应(标头、状态、响应主体)修改缓存调控允许用户并发(双引擎),并且有一个自定义规则系统,可以自定义规则拦截请求修改响应缓存颗粒化等功能
  • ClientWorker目前不兼容原有的ServiceWorker,请通过修改Scope绕开相互的作用域。
  • ClientWorker需要在HTTPS环境下工作,HTTP将直接安装失败
  • 我们明确一下我们的目的,首先,我们要放置好ClientWorker原始代码;然后,我们要在用户需要安装cw的位置填入ClientWorker安装代码,将其安装到用户浏览器中;最后,我们要写入想要达到目的的配置,完成ClientWorker的接入。

通过cdn引入放置clientworker

    如果你的框架为hexo的话,那么,强烈建议在根目录的source文件夹创建一个cw.js的js文件。

cw.js
cw.js

    至于config.yaml,下文中会提到,在cw.js中引入以下内容,

1
2
3
4
5
6
7
importScripts('https://npm.sourcegcdn.com/clientworker@2.4.0/dist/cw.js')

/*
* 请及时替换为最新版本号
* 版本号从这里查看:https://github.com/ChenYFan/ClientWorker/releases
*/

写入配置

    同样的,在根目录的source文件夹内创建一个config.yaml,为cw配置文件。

    我们最初先安装最简单的就行,后期会逐渐加大代码。

1
2
3
4
5
6
7
8
name: ClientWorker 
catch_rules:
- rule: _
transform_rules:
- search: _
action: fetch
fetch:
engine: fetch

注意!Hexo会将yaml解析成json格式,这样的话,我们的cw也就失效了,如何避免这样的问题呢?
当然是解铃人还须系铃人了呀!
找到hexo的配置文件_config.yaml,找到skip_render,将我们的config.yaml放进去,防止hexo在generate的时候把yaml解析成json。

1
2
skip_render:
- 'config.yaml'

配置安装代码

    你有三种方式接入: 三文件全域安装自定义无刷新安装自定义刷新安装

    其中,

  • 全域安装,最简单,对SEO支持也最恶劣(Google会提示额外的计算开销,而百度完全没办法爬取)。比较适用于自用的、只追求速度的。
  • 自定义无刷新安装。则对你的HTML和JS水平有所要求,对于部分不遵守标准的浏览器兼容性较差,但是这种方法对SEO没有影响,比较适合于对seo注重的网站。
  • 自定义刷新安装对。seo略有影响,会在载入后阻断未经CW的请求并刷新一次,以便于CW及时托管,比较适合于网站提速

    因为我采用的第二种,所以这里讲解第二种说法。

自定义无刷新安装

    这种方式有一个重载的动作,即在无刷新的情况下将当前页面重新获取并填充。这可能会出现意外的兼容性错误,请慎行。 如果你不需要重载,请将下方重载标识框内的代码删除。不重载的后果就是用户首屏的大部分请求无法被CW拦截。如果你希望用户首屏进入就被托管,请使用自定义刷新安装。

    用户每次访问时都应该能运行接下来的脚本,如果你使用hexo等其他博客系统,可以在body或footer模板中添加这一段。我们强烈建议将这段代码加入在<head>标签中,越靠前越好,navigator.serviceWorker.register是异步函数不会阻塞页面加载。

    请不要使用window.stop(),这会导致重载失效

  • 修改网页的模板,添加一段html。如果是hexo用户,可以将这段代码通过引入的方式来引入博客。
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
38
39
<script>
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'); }
</script>

    接下来,就可以部署啦!然后打开你的博客,打开f12,享受cw带来的愉悦的浏览体验吧!

扩展

有待挖掘,未完待续... ...

评论

君既已浏览至此,何不留一句?