什么是渐进式应用程序
- 增加用户体验
- 即使在不确定的网络条件下,也可立即加载且永不显示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 对象的方法去处理缓存.
生命周期
- 注册,安装中, 安装后, 激活中, 激活后, 废弃
- 参考
例子
工具
- sw-precache - 预缓存列表。
- sw-toolbox - 配置动态缓存列表
- workbox - 以上两者的混合
- 例子
service worker调试
- offline 离线的调试
- update reload 每次重新安装service worker 都会进行激活
- bypass for network 跳过service worker,直接请求