随着 17 年年底苹果宣布 Safari 支持 Service Worker,越来越多的网站势必会在生产环境中引入它。不过由于存在接入的成本,大家无法立马体验到 Service Worker 应用在自己网站上所带来的优点。为了能快速体验到 Service Worker 带来的丝滑快感,趁着春节后上班第一周的空闲时间,我开发了一款 whistle.service-worker 的小工具,只需四步就可以为想要使用 Service Worker 的网站测试效果。

举个例子

假设我们想测试 Github Help 使用 Service Worker 后的效果,那么只需如下四步:

1. 安装插件

whistle.service-worker 是基于 whistle 制作的一款插件,所以需要同时安装它们两个,执行如下命令进行安装并启动即可:

1
2
$ npm install --global whistle whistle.service-worker
$ w2 start

启动成功后可看到如下提示:

w1

2. 设置代理

将代理设置为 127.0.0.1:8899,如果是 Chrome 的话推荐使用 SwitchyOmega,Firefox 则推荐使用 Proxy Selector 进行设置。设置后结果如下:

w2

3. 配置规则

在浏览器中打开 配置界面 并添加如下规则:

1
help.github.com whistle.service-worker://route=/.*/&strategy=cacheFirst

rule

4. 打开网站

终于来到最后一步了,只需要打开 Github Help 即可发现 Service Worker 注册成功。再次刷新页面,就能享受到它带来的丝滑快感了 O(∩_∩)O~~

registered

fetch

写在最后

实际上,Service Worker 主要是在两个方面发挥作用:

  • 对未加载文件的预拉取能力,例如用户在 A 页面的时候就可以拉取 B、C 页面的文件,从而让用户在页面间的跳转更加流畅;
  • 对已加载文件的缓存控制能力,相较于现有的 HTTP(S) 协议中缓存相关的内容,Service Worker 带来的缓存控制能力不仅粒度更小,而且策略更加丰富。

whistle.service-worker 工具目前只是在第二个方面做了一点工作,若想完整享受 Service Worker 带来的好处,建议接入 Google 开发的 Workbox 工具,功能十分强大👍

whistle.service-worker 实际上是基于跨平台的代理工具 whistle 制作的一款插件,是我迄今为止用过体验最好、功能最强大的开源、跨平台web调试代理工具,强烈推荐大家使用。