service worker详解

什么是渐进式应用程序

• 增加用户体验
• 即使在不确定的网络条件下，也可立即加载且永不显示downasaur(chrome联网不存在的页面)。
• 使用柔滑流畅的动画快速响应用户交互，并且不会出现混乱的滚动。
• 感觉像设备上的自然应用程序一样，具有身临其境的用户体验
• PWA

为什么会出现service worker

• 随着 Web 业务不断复杂，我们逐渐在 js 中加了很多耗资源、耗时间的复杂运算过程，这些过程导致的性能问题在 WebApp 的复杂化过程中更加凸显出来。
• 解决数据不能持久的缓存
• Service Worker 在 Web Worker 的基础上加上了持久离线缓存能力

特性

• 不能直接操作 DOM
• 用到的时候可以直接唤醒，不用的时候自动睡眠
• 离线内容开发者可控
• 一旦被 install，就永远存在，除非被手动 unregister
• 必须在 HTTPS 环境下才能工作
• 异步实现，内部大都是通过 Promise 实现
• 一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
• 可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）
• 能向客户端推送消息

cache与cacheStorage区别

• 两者方法的返回值都是promise,且都是异步的
  Cache - Cache 接口为缓存的 Request / Response 对象对提供存储机制
• CacheStorage - 表示 Cache 对象的存储, 可以通过 caches 属性访问 CacheStorage.
• 使用 CacheStorage.open(cacheName) 打开一个Cache 对象，再使用 Cache 对象的方法去处理缓存.

生命周期

• 注册,安装中, 安装后, 激活中, 激活后, 废弃
• 参考

例子

• github

工具

• sw-precache - 预缓存列表。
• sw-toolbox - 配置动态缓存列表
• workbox - 以上两者的混合
• 例子

service worker调试

• offline 离线的调试
• update reload 每次重新安装service worker 都会进行激活
• bypass for network 跳过service worker,直接请求

参考

• 学习文档
• PWA