Service Worker 初探

性能优化的方式

• CDN

• CSS Sprite

• Compress / Gzip

• Async / Defer

• HTTP Cache

性能优化的核心在于提升用户体验。

认识 Service Worker

不仅能使页面达到“秒开”的效果，还能使站点在网络较差或者无网络的情况下依然能做出很好的响应。
提供离线缓存功能。

Service Worker 能拦截页面向服务端的网络请求，根据一些条件来决定是使用本地存储还是请求服务器再把内容写入本地进行管理。在 2014 年 5 月由 W3C 提出，它之前的 API 是 Application Cache。Application Cache 虽然在2012 年出现并被浏览器支持，但它假定你要严格遵守一些规则。

Service Worker 的特性

• 不能直接访问 / 操作 DOM

• 需要时直接唤醒，不需要时自动休眠

• 离线缓存内容开发者可控

• 一旦被安装则永远存活，除非手动装卸

• 必须在 HTTPS 环境下工作（本地环境除外）

• 广泛使用了 Promise

注册

注册 Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/sw-demo.js', {scope: '/js'})
    .then(function (registration) {
      console.log(registration);
    })
    .catch(function (error) {
      console.log(error);
    });
  });
}

Service Worker 默认的域为注册文件所在的目录，默认情况下不能跨域或者指定文件上级都会造成注册失败。
当服务器设置 service-worker-allowed: / 的响应头时，只要在此声明的最大域下就能注册。
同域下可以注册多个不同 scope 的 Service Worker。

安装

如果浏览器发现这个 Service Worker 没有被安装过或者过期，它将开始安装.

支持度