webpack学习第十九步—— PWA

使用http-server

• 安装http-server

npm install http-server -D

• 修改package.json

"scripts": {
    "server": "http-server build",
    "start": "webpack-dev-server --config ./config/webpack.common.js",
    "build": "webpack --env.production=abc --config ./config/webpack.common.js"
}

• 修改index.js

console.log('Hello Dingding')

• 运行

npm build
npm run server

• 此时关闭http-server,页面无法访问

PWA

• 安装workbox-webpack-plugin

npm install workbox-webpack-plugin -D

• PWA用于生产包，因此修改webpack.prod.js

plugins:[
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[name].chunk.css'
    }),
    // 使用WorkBox插件
    new WorkBoxPlugin.GenerateSW({
        clientsClaim: true,
        skipWaiting: true
    })
]

• 修改index.js

console.log('Hello Dingding')

if('serviceWorker' in navigator) {
    window.addEventListener('load',() => {
        navigator.serviceWorker.register('./service-worker.js')
            .then(register => {
                console.log('success')
            })
            .catch(e => console.log(e))
    })
}

• 使用http-server时

• 关闭http-server时功能也正常