webpack学习-PWA离线可访问技术

概念

PWA：Progressive Web App。渐进式网络开发应用程序(离线可访问)

插件

PWA通过WorkBox使用，在webpack中是通过workbox-webpack-plugin

1、安装workbox-webpack-plugin插件

2、在webpack.config.js中配置workbox-webpack-plugin插件

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

ServiceWorker的代码必须运行在服务器上，所以可以启动本地服务

启动本地服务的方式：

安装: npm i serve -g

构建:serve -s build（build指的是要运行的文件路径，这个命令的意思就是启动服务器，将build目录下的所有资源作为静态资源暴露出去）。

构建之后：

PWA使用

不使用PWA

使用PWA

在index.js中注册serviceWorker

/*
注册ServiceWorker并且需要处理兼容性问题
*/
if("serviceWorker" in navigator){
    window.addEventListener('load',()=>{
        // service-worker.js是WorkboxWebpackPlugin生