webpack配置使用PWA

pwa離線應用緩存使用APP在實際應用中不少會用到

重要插件：workbox-webpack-plugin

下載安裝

在webpack.config.js文件配置引入使用

plugins中添加

new WorkboxWebpackPlugin.GenrateSW({clientClaim: true, skipWaiting: true})

使用，在入口文件引入service-worker

// 判斷瀏覽器是否支持，須要添加對應的邏輯
if('serviceWorker' in navigator) {
  window.addEventListener('load', fucntion() {
    navigator.serviceWorker.register("/service-workre.js").
    then(
      ()=>{},
      ()=>{}
    )
  })
}

service-worker須要運行在服務器端
serve插件
serve -s (目錄)暴露目錄文件，並建立一個服務，訪問項目