FastSW

service-worker web代理。获取页面的方法是 libcurl.js 在一个 卷成一捆 服务器，重写（HTML， CSS和JS）通过嵌入 橡子 AST pass)，并从service worker传递回浏览器。

• 在页面中加载一个文件(fastsw.min.js),加上 libcurl_full.js 在它旁边
• Fastsw.createFrame() 将代理页面放入 <iframe> 你控制
• location / top / parent 在代理页面中被替换，因此它们无法导航或破坏框架
• cookie、存储、IndexedDB和 postMessage 每个代理站点保持独立

快速启动

1. 提供文件

// server.js
import express from "express";
import { fastswPath } from "fastsw";

const app = express();
app.use("/fastsw/", express.static(fastswPath)); // fastsw.min.js, fastsw.all.js, libcurl_full.js
app.use(express.static("public"));               // your own frontend
app.listen(3000);

npm i ./fastsw-1.0.0.tgz express
node server.js

require("fastsw") 作品。任何静态主机都可以工作，只要这三个文件最终在一个文件夹中(参见 事物生活的地方）。

2. 添加前端

<!-- public/index.html -->
<form id="form"><input id="url" placeholder="Search or enter a URL"><button>Go</button></form>
<div id="view" style="height:90vh"></div>

<script src="/fastsw/fastsw.min.js"></script>
<script>
  const frame = Fastsw.createFrame({ container: document.getElementById("view") });
  document.getElementById("form").onsubmit = (e) => {
    e.preventDefault();
    frame.go(document.getElementById("url").value);
  };
</script>

createFrame 为你注册service worker。看到 example__frontend.html 的完整页面 后退/前进/重新加载按钮。

3. 将它指向一个小精灵服务器

中设置了默认值 CONFIG 对象的顶部 fastsw.all.js （wisp: "wss://…/wisp/"）. 把它设为你自己的 小服务器，还是要 null 使用 /wisp/ 在同一个主机上。

API

所有这些都将继续存在 window.Fastsw.

Fastsw.createFrame(arg?, options?) → Frame

arg 可以是URL或搜索文本，一个现有的 <iframe>，或一个options对象。

const f = Fastsw.createFrame("https://example.com", { container: document.body });

f.go("wikipedia.org");   // URL, bare domain, or search text
f.back();  f.forward();  f.reload();
f.url;                   // the REAL address of the page shown, never /fastsw/service/...
f.title;
f.ready;                 // promise: service worker registered and active
f.element;               // the <iframe>
f.destroy();

f.addEventListener("navigate",  (e) => console.log(e.detail.url)); // every load
f.addEventListener("urlchange", (e) => console.log(e.detail.url)); // also pushState / hash changes

其他的助手

事物生活的地方

所有东西都是从那个文件夹里算出来的 fastsw.*.js ，因此您可以将它安装在任何地方。 在 /fastsw/：

service worker只能声明位于或低于自己脚本文件夹的作用域，这就是FastSW从不注册的原因 /。如果将文件夹挂载到未调用的位置 fastsw (说 /static/),一个 fastsw/ 添加文件夹 下面是：范围 /static/fastsw/， libcurl将留在脚本的旁边 /static/libcurl_full.js.

想要完整的 / 范围?发送 Service-Worker-Allowed: / 为脚本和电话 Fastsw.register({ scope: "/" }).

配置

CONFIG 坐在顶端 fastsw.all.js：

故障排除

Failed to register a ServiceWorker … not under the max scope allowed：脚本的文件夹不包含 你要的范围。不通过 scope: "/" 除非主机发送 Service-Worker-Allowed: /.

“FastSW无法加载/…/libcurl_full.js”文件不在脚本旁边。直接打开那个URL；它应该 下载大约2mb的JavaScript，而不是HTML页面。然后注销该worker并重新加载。

页上有什么东西断掉了。 两个工具:

• 开放 /fastsw/debug 在代理源上查找工作器最近的请求(报头、状态、cookie ?f=<text> 过滤)。秘密是保密的。
• localStorage.__fastswDebug = "1" 并重新加载，以便从代理页面内部进行额外的控制台日志记录。

WebSocket生命周期总是被记录为 [fastsw] websocket … 行，包括libcurl错误码 握手失败。

文件