1. 1. 前言
  2. 2. 正文
    1. 2.1. 什么是 ClientWorker
    2. 2.2. 如何安装
    3. 2.3. 判断是否成功安装
    4. 2.4. 配置 ClientWorker
  3. 3. 结语


前言

2022 年 7 月 12 日某时,ElemeCDN 确认停止回源,仅可访问之前回源过的资源

至此,几乎所有公开在 cn 国境内提供免费高速静态资源 cdn 的厂商的服务全部关闭

不可否认的是,无论 ElemeCDN 受到打压,亦或者阿里被薅秃了,这家伙确实也是使用着 阿里 cdn的,在国内访问速度可观

反观在年初被吊销 ICP 许可的 Jsdelivr,在国内前前后后被GFW 污染了两三次,访问情况不能说是完全访问不了,但速度真的很不乐观

我们能够依赖的也只有那些愿意做公益的大佬了,虽然回源依旧是 Unpkg 亦或者Jsdelivr,但最起码部分数据也被国内的 cdn 缓存了

目前我遇到的解决方案几乎都有在使用 ServiceWorker,就比如 静态博客接入 freecdn 提升访问速度 欲善其事,必利其器 - 论如何善用 ServiceWorker,当然 ClientWorker 的技术基础也还是 ServiceWorker

ClientWorker 的作者 CYF 对 ServiceWorker 的评价其实很简单ServiceWorker 作为前端革命领袖,毫不夸张地被誉为前端黑科技

但是 ServiceWorker 作为一种前端技术是有学习及试错成本的,如果单单只为了加速个静态网页而学习 ServiceWorker 我觉得这肯定是不合理的

正文

什么是 ClientWorker

引用原作者 CYF 的话(来自 cw 官方文档)

ClientWorker 是利用规则全局驱动 sw 的插件
目前涵盖了 ServiceWorker 的 路由拦截、路由劫持、请求 / 响应(标头、状态、响应主体)修改、缓存调控,允许用户并发(双引擎),并且有一个自定义规则系统,可以自定义规则,拦截请求,修改响应,缓存颗粒化等功能。

如何安装

<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.log('[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>
  1. 将以上这串代码安放在 <head> 里面,越靠前越好,当然 navigator.serviceWorker.register 是异步函数不会阻塞页面加载。
  2. 进入 ClientWorker Github Release 发布页,下载最新版本内容。
  3. 解压,将文件夹中 cw.js 拷出,放在网页服务器下
  4. 新建 config.yml 在其中填写配置

以上内容摘抄至ClientWorker 官方文档

判断是否成功安装

这里可以在域名后方加上 /cw-cgi 查询 cw 是否正常安装

如果返回的是 Not Found!, Client Worker! 则代表 cw 正常安装

配置 ClientWorker

这个可以参考ClientWorker 官方文档

而我的配置则是

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

      - search: ^https:\/\/(cdn|fastly|test1|gcore)\.jsdelivr\.net\/npm\/
        replace:
          - https://s-cd-1806-tnxg-oss-cdn.oss.dogecdn.com/npm/
          - https://cdn.bilicdn.tk/npm/
          - https://jsd.onmicrosoft.cn/npm/
          - https://unpkg.com/
          - https://cdn.jsdelivr.net/npm/
          - https://jsd.8b9.cn/npm/
          - https://cdn1.tianli0.top/npm/

      - search: ^https:\/\/s-cd-1806-tnxg-oss-cdn\.oss\.dogecdn\.com\/npm\/
        replace:
          - https://s-cd-1806-tnxg-oss-cdn.oss.dogecdn.com/npm/
          - https://cdn.bilicdn.tk/npm/
          - https://jsd.onmicrosoft.cn/npm/
          - https://unpkg.com/
          - https://cdn.jsdelivr.net/npm/
          - https://jsd.8b9.cn/npm/
          - https://cdn1.tianli0.top/npm/

      - search: ^https:\/\/unpkg\.com\/
        replace:
          - https://s-cd-1806-tnxg-oss-cdn.oss.dogecdn.com/npm/
          - https://cdn.bilicdn.tk/npm/
          - https://jsd.onmicrosoft.cn/npm/
          - https://unpkg.com/
          - https://cdn.jsdelivr.net/npm/
          - https://jsd.8b9.cn/npm/
          - https://cdn1.tianli0.top/npm/

      - search: ^https:\/\/(cdn|fastly|test1|gcore)\.jsdelivr\.net\/gh\/
        replace:
          - https://s-cd-1806-tnxg-oss-cdn.oss.dogecdn.com/gh/
          - https://cdn.bilicdn.tk/gh/
          - https://jsd.onmicrosoft.cn/gh/
          - https://gcore.jsdelivr.net/gh/
          - https://jsd.8b9.cn/gh/
          - https://cdn1.tianli0.top/gh/

      - search: ^https:\/\/s-cd-1806-tnxg-oss-cdn\.oss\.dogecdn\.com\/gh\/
        replace:
          - https://s-cd-1806-tnxg-oss-cdn.oss.dogecdn.com/gh/
          - https://cdn.bilicdn.tk/gh/
          - https://jsd.onmicrosoft.cn/gh/
          - https://gcore.jsdelivr.net/gh/
          - https://jsd.8b9.cn/gh/
          - https://cdn1.tianli0.top/gh/

      - search: _
        replace:
          - _ 
          - s-cd-1806-tnxg-oss-cdn.oss.dogecdn.com/npm/tnxg-blog@latest
          - jsd.onmicrosoft.cn/npm/tnxg-blog@latest
          - cdn.bilicdn.tk/npm/tnxg-blog@latest
          - unpkg.com/tnxg-blog@latest
          - cdn-api.vercel.app

      - search: \.html$
        header:
          Content-Type: text/html;charset=UTF-8

      - search: _
        action: fetch
        fetch:
          status: 200
          engine: classic
          preflight: false
          timeout: 5000
          
  - rule: (?<=^https\:\/\/s-bj-1806-tnxg-oss-normal.oss.dogecdn.com/(.*))\.jpg$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .jpg/webp
        replacein: url
        replacekey: .jpg
  - rule: (?<=^https\:\/\/s-bj-1806-tnxg-oss-normal.oss.dogecdn.com/(.*))\.png$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .png/webp
        replacein: url
        replacekey: .png
  - rule: (?<=^https\:\/\/s-bj-1806-tnxg-oss-normal.oss.dogecdn.com/(.*))\.jpeg$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .jpeg/webp
        replacein: url
        replacekey: .jpeg
  - rule: (?<=^https\:\/\/s-bj-1806-tnxg-oss-normal.oss.dogecdn.com/(.*))\.gif$
    transform_rules:
      - search: image\/webp
        searchin: header
        searchkey: Accept
        replace: .gif/webp
        replacein: url
        replacekey: .gif
        

关于我配置的最新内容都可以在 Config.yaml 找到

后面的那些是我给 dogecloud-oss 写的 webp 自适应内容

当我把这配置发出去的时候 CFY 就表示

我寻思 Safari 这个玩意还有人用?我眼里(Safari=IE)

咳咳,问题不大,反正我不用 Safari 我也看不到会出什么 bug (掩耳盗铃)

应该可以尝试使用 cw 修改 header 头来使某些以校验 referrer 的网站的防盗链失效

- rule: ^https:\/\/(i0|i1|i2|i3|s1|s2|s3)\.hdslb\.com # 匹配 B 站资源链接
  transform_rules:
    - search: _ # 多 cdn 并发
      replace:
        - https://i0.hdslb.com
        - https://i1.hdslb.com
        - https://i2.hdslb.com
        - https://i3.hdslb.com
        - https://s1.hdslb.com
        - https://s2.hdslb.com
        - https://s3.hdslb.com
      action: fetch
      fetch:
        status: 200
        engine: classic
        preflight: false
        timeout: 5000
    - search: _
      header:
        Referrer-Policy: no-referrer # 更改引用策略

这张就是 b 站的图片

结语

善待公益项目,每个开发者都是普通人

jsd 反代(回源)

https://cdn.bilicdn.tk/
https://jsd.onmicrosoft.cn/
https://jsd.8b9.cn/
https://cdn1.tianli0.top/

我自己写的项目就不放出来了,回源是我自己的服务器,挺慢的