demo17源码地址
    本节使用 demo15 的代码为基础
    我们来模拟平时开发中，将打包完的代码防止到服务器上的操作，首先打包代码 npm run build
    然后安装一个插件 npm i http-server -D

    在package.json中设置script

    1. {
    2.   "scripts": {
    3.     "start": "http-server dist",
    4.     "dev": "webpack-dev-server --open --config ./build/webpack.dev.conf.js",
    5.     "build": "webpack --config ./build/webpack.prod.conf.js"
    6.   }
    7. }

    运行npm run start
    image.png
    现在就起了一个服务，端口是 8080，现在访问 http://127.0.0.1:8080 就能看到效果了

    如果你有在跑别的项目，端口也是 8080，端口就冲突，记得先关闭其他项目的 8080 端口，再 npm run start

    我们按 ctrl + c 关闭 http-server 来模拟服务器挂了的场景，再访问 http://127.0.0.1:8080 就会是这样
    image.png
    页面访问不到了，因为我们服务器挂了，PWA 是什么技术呢，它可以在你第一次访问成功的时候，做一个缓存，当服务器挂了之后，你依然能够访问这个网页
    首先安装一个插件：workbox-webpack-plugin

    npm i workbox-webpack-plugin -D

    只有要上线的代码，才需要做 PWA 的处理，打开 webpack.prod.conf.js

    1. const WorkboxPlugin = require('workbox-webpack-plugin') // 引入 PWA 插件
    3. const prodConfig = {
    4.   plugins: [
    5.     // 配置 PWA
    6.     new WorkboxPlugin.GenerateSW({
    7.       clientsClaim: true,
    8.       skipWaiting: true
    9.     })
    10.   ]
    11. }

    重新打包，在 dist 目录下会多出 service-worker.js 和 precache-manifest.js 两个文件，通过这两个文件就能使我们的网页支持 PWA 技术，service-worker.js 可以理解为另类的缓存
    image.png
    还需要去业务代码使用service-worker
    在app.js加上如下判断

    1. // 判断该浏览器支不支持 serviceWorker
    2. if ('serviceWorker' in navigator) {
    3.   window.addEventListener('load', () => {
    4.     navigator.serviceWorker
    5.       .register('/service-worker.js')
    6.       .then(registration => {
    7.         console.log('service-worker registed')
    8.       })
    9.       .catch(error => {
    10.         console.log('service-worker registed error')
    11.       })
    12.   })
    13. }

    重新打包，然后运行 npm run start 来模拟服务器上的操作，最好用无痕模式打开http://127.0.0.1:8080 ，打开控制台
    image.png

    现在文件已经被缓存住了，再按 ctrl + c 关闭服务，再次刷新页面也还是能显示的