美文网首页
webpack学习第十九步—— PWA

webpack学习第十九步—— PWA

作者: Love小六六 | 来源:发表于2020-02-14 20:10 被阅读0次

    使用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时功能也正常

    相关文章

      网友评论

          本文标题:webpack学习第十九步—— PWA

          本文链接:https://www.haomeiwen.com/subject/ozzniqtx.html