利用Service Worker实现CDN

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

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

以下service-worker.js代码使用监听fetch事件的方法拦截并修改所有的网络请求。


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啦。

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

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

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