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=>{
  // 通訊
})