pwa

 PWA

PWA Progressive web app 离线、推送消息、添加到桌面 
service worker

workbox  google官方PWA框架
service worker ios低版本不支持 需要https  依赖fetch api 无法访问dom  缓存机制：cache api
fudao.qq.com

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('./sw.js', {
        scope: './'
      }).then(function (reg) {
        console.log('注册service worker成功', reg.scope);
      }).catch(err => {
        console.log('err', err);
      });
    });
  }

sw.js

// 缓存名
var cacheName = 'helloPwa'

self.addEventListener('install',event=>{
  // 安装
  event.waitUntil(   // 等
    caches.open(cacheName).then(cache=>{
      // 缓存文件，也可以缓存接口数据
      return cache.addAll(["./js/a.js","./img/a.png"])
    })
  )
  // event.skipWaiting() // 跳过等待
})

self.addEventListener('activate',event=>{
  // 激活

  // 清缓存
  // var cachePromise=caches.keys().then()
})

self.addEventListener('fetch',event=>{
  // 拦截   可以缓存接口数据
})

self.addEventListener('message',event=>{
  // 通信
})