Service worker(详细介绍)是一个浏览器 API,它可以拦截并修改网页所有发出的网络请求。

利用这一点可以将所有需要加速的网络请求的 URL 修改为 CDN 地址实现加速。

以下service-worker.js代码使用监听fetch事件的方法拦截并修改所有的网络请求。(https://coco.zrt.io/service-worker.js)

 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

self.addEventListener('fetch', event => {
  if (event.request.url.startsWith(self.location.origin)) {
    var url = event.request.url.replace(self.location.origin, 'https://yourcdnhostname.com')

    var req = new Request(url, {
        method: event.request.method,
        headers: event.request.headers,
        body: event.request.body,
        mode: event.request.mode,
        credentials: 'omit',
        cache: 'default',
        redirect: 'follow',
        referrer: event.request.referrer,
        integrity: event.request.integrity
    })

    event.respondWith(
      fetch(req).then(function(response) {
        console.log('Response from network is:', response);

        return response;
      }).catch(function(error) {
        console.error('Fetching failed:', error);

        throw error;
      })
    );
  }
});

部属service-worker.js后还需要注册这个 service worker,将这几行代码放到网页 head 中就能在首次访问页面时注册 service worker啦。

1
2
3
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

部属成功后可以在 Chrome/Edge浏览器的开发人员工具-网络中看到页面的请求都使用了CDN。

Service worker 可以在 Chrome/Edge 浏览器的开发人员工具-应用程序-Service Workers 界面进行调试。