V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ChenYFan
V2EX  ›  分享创造

ClientWorker 用规则驱动黑科技 || 一个基于规则的前端路由拦截器

  •  2
     
  •   ChenYFan · 2022-07-13 11:08:08 +08:00 · 2326 次点击
    这是一个创建于 645 天前的主题,其中的信息可能已经有所发展或是发生改变。

    ClientWorker

    文档地址:ClientWorker

    ↑这也是用 ClientWorker 搭建的!

    ClientWorker 目前只涵盖了 ServiceWorker 的 路由拦截、路由劫持、请求 /响应(头、状态)修改,未来将支持缓存控制、请求 /响应(内容)修改。

    它能干什么

    • 绕备,在域名不变动的情况下,其余用户所有请求均可以定向到你的其他服务器或者 cdn ,而首屏域名无需 ICP 备案。
    • 降本,你可以用廉价的家宽+公网 ipv4/ipv6 ,即使是 80/443 被封锁,你也可以在不变动端口的情况下将用户流量引向家宽。
    • 白嫖,可以用免费的公网穿透服务,接近零成本托管你的服务。
    • 加速,将静态资源流量(乃至动态资源)并发到全球 cdn ,实现前端级负载均衡。
    • 绕禁,通过在前端修改标头的方式,修复被故意篡改的MIME,正常托管网站,绕过各大托管商对于网站部署的限制,可以毫无负担的使用阿里云、腾讯云等对象存储而不用开启网站模式,乃至 GithubRaw 无限流量(绕过 GithubPage 100GB 限制)。
    • 愈合:通过并发方式,辅助 JSDelivr 、Unpkg 、cdnjs 等大陆几乎不可达请求重定向至其他 cdn ,从而实现无修改、全球加速。
    • 不宕机,即使首屏服务器离线或不可达,已访问过的用户依旧可以正常命中备用服务器。
    • ...更多玩法等你挖掘

    由 ServiceWorker 驱动,目的是用正则规则定义一切。

    虽然我开发的目的是为了给小白好好用 ServiceWorker ,但其要求一点也不小白,是问哪里有不熟悉 JavaScript ,却非常熟悉正则和 yaml 的小白呢

    引擎

    独创的两台前端并发引擎:ClassicParallel,可以用于同时并发请求多个请求,差异请见Engine

    规则

    分为捕捉规则和搜索规则,具体请见文档Rule

    第 1 条附言  ·  2022-07-13 11:51:48 +08:00
    第 2 条附言  ·  2022-07-14 14:07:19 +08:00

    目前2.2.1版本已支持:

    缓存颗粒化控制

    请求/响应标头搜索

    请求/响应内容搜索与替换

    可以实现:

    • 缓存,颗粒化控制缓存,多种情况不同选择,智能调度缓存和请求,避免有缓存时无返回、缓存无法及时更新问题,确保缓存在客户端工作的更顺畅。
    • 离线,可以迅速支撑普通离线应用,助力快速构建PWA。
    • Webp无缝,可以通过判断标头来判断是否支持Webp,并且自动替换图片请求,为网站加速助力。
    • 审核,通过内置的规则可以屏蔽并替换、拦截敏感词汇,实现网站内容安全。
    18 条回复    2022-07-21 08:14:40 +08:00
    ChenYFan
        1
    ChenYFan  
    OP
       2022-07-13 11:51:29 +08:00
    项目地址忘记贴了。。。
    https://github.com/ChenYFan/ClientWorker
    SunsetShimmer
        2
    SunsetShimmer  
       2022-07-13 13:28:23 +08:00
    ~~不熟悉 JavaScript ,认识正则,熟悉 yaml 的小白就在这里呀~~
    文档比 freecdn 清晰( freecdn 好像没文档?),接入方式也很友好。
    lzgshsj
        3
    lzgshsj  
       2022-07-13 13:43:30 +08:00
    我记得 freecdn 的作者好像也在 v 站来着
    zhaohai
        4
    zhaohai  
       2022-07-13 13:47:00 +08:00
    不知道怎么绕备案
    ChenYFan
        5
    ChenYFan  
    OP
       2022-07-13 13:52:19 +08:00
    @lzgshsj 不不不不不,两个工作原理基本不一样,除了两个并发引擎撞了一个(那个并发引擎也不是故意撞的,之前看没看懂,后来自己写出来了才发现原理一样,但确实是受 freecdn 启发;另一个并发引擎则完全不一样)

    此外,ClientWorker 的目的是用规则定义工作,和 freecdn 的清单转发天差地别
    ChenYFan
        6
    ChenYFan  
    OP
       2022-07-13 13:52:51 +08:00
    @zhaohai 其实就是路由重写到国内服务器,裸 ip 或非标端口就行
    qq316107934
        7
    qq316107934  
       2022-07-13 14:30:12 +08:00
    @ChenYFan 这么做没有 CORS 问题吗,是不是需要后端改造支持 CORS
    ChenYFan
        8
    ChenYFan  
    OP
       2022-07-13 15:17:16 +08:00   ❤️ 1
    @qq316107934 yep ,虽然 ClientWorker 有一键降级 SimpleRequest 功能可以避免大部分 Preflight 问题,但是 CORS 是最基础的浏览器保护,这个是无法绕过的,Access-Control-Allow-Origin 必须包含当前站
    learningman
        9
    learningman  
       2022-07-13 15:37:44 +08:00 via Android
    第一次访问不就寄了,sw 升级的时候也寄了
    ChenYFan
        10
    ChenYFan  
    OP
       2022-07-13 16:15:59 +08:00
    @learningman 对,所以只要确保首屏不宕机,新用户是不会受影响的。

    至于更新,配置更新可以用在配置里写上下一次更新的地址,这样原配置服务器宕机了也没关系。
    而 sw 配置应该可以用 eval+fetch 热补丁,在下一次关闭 SW 前确保最新
    zhaohai
        11
    zhaohai  
       2022-07-13 21:21:51 +08:00
    @zhaohai #4 腾讯云试过非标端口,一样检测到啊。试过用 CDN 指向国内 x.x.x.x:xxxx 还是检测到未备案
    ChenYFan
        12
    ChenYFan  
    OP
       2022-07-13 23:18:37 +08:00
    @zhaohai 纯 ip ,无域名,https ( zerossl ),我自己都用了一年了...你是不是绑域名了
    yanyaovo
        13
    yanyaovo  
       2022-07-19 23:18:08 +08:00
    @ChenYFan 大佬,我按那个 ICP 绕备、家宽、动态加速的试例去做了,但是 cw 不知道为什么,会一直卡在反复尝试安装,能在项目地址那提个 issues 不。用的也是纯 ip ,zerossl ,应该和您是相似的 QwQ
    ChenYFan
        14
    ChenYFan  
    OP
       2022-07-20 12:07:39 +08:00
    @yanyaovo 可以啊,如果 v2 上解释不清可以去提 issue
    zckevin
        15
    zckevin  
       2022-07-20 15:59:14 +08:00
    不得不说 ServiceWorker 这一套东西使用体验真的非常难受,很难理解为什么会这样。
    ChenYFan
        16
    ChenYFan  
    OP
       2022-07-20 20:54:44 +08:00
    @zckevin 哈?具体有啥难受能说一说吗
    zckevin
        17
    zckevin  
       2022-07-20 22:36:55 +08:00
    @ChenYFan 纯主观感知,之前用 ServiceWorker 总感觉用的时候会突然卡 /顿挫那么一下,包括且不限于加载、刷新...尤其是和正常 /普通的网页对比起来。不过你这个网站似乎没有这种感受,也许是我之前的错觉?或者是 Chrome 更新了?已 Star ,有空研究起来。
    ChenYFan
        18
    ChenYFan  
    OP
       2022-07-21 08:14:40 +08:00   ❤️ 1
    @zckevin 唔,使用了 ServiceWorker 或 workbox 通常会存在 缓存无限填充不删除、一瞬间缓存过多文件或者重安装假死的问题,这个是网上泛滥的教程里面都没解决的问题。我博客的 ChenBlogHelper 和 ClientWorker 都对此进行了优化,缓存重填充和按请求填充的方式能够很好解决这些问题。目前我博客缓存占用保持在 10M-200M 之间,相较于动辄 2G-5G 的缓存已经好了不少
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1206 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 23:19 · PVG 07:19 · LAX 16:19 · JFK 19:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.