PWA:漸進式網絡開發應用程序(離線可訪問),需要通過serviceWorker 實現,
首先,webpack 配置使用 workbox-webpack-plugin 這個插件,生成一個 serviceWorker 配置文件
引入插件:
在plugins插件入口處引入插件
接着,在入口文件 index.js 中注冊 serviceWorker
然后在修改package.json中 eslintConfig 配置
因為 eslint不認識 window、navigator 等全局變量
使用webpack打包
然后運行代碼:
serviceWorke 必須運行在服務器上,所以需要啟動服務器,
1. 可以通過 node.js,運行
2.全局安裝 npm i serve -g
然后啟動服務器,將 build 目錄下的所有資源作為靜態資源暴露出去
啟動: serve -s buid
打開:http://localhost:5000/ serviceWorker 注冊成功:
將瀏覽器置於 offine ,資源同樣可以加載出來,