Webpack系列——PWA的打包配置

安装 http-server:

npm install http-server -D

使用 http-server可以模拟实现服务器效果

package.json中配置命令，在 dist 目录下开启一个 http-server

{
    ...
    "scripts": {
        "start": "http-server dist"
        ...
    }
}

PWA(Progressive Web Application)，当客户端第一次成功访问成功网页后，服务器出错挂掉，客户端再次访问是将会显示错误，PWA可以实现第一次访问成功后，即使服务器挂掉，第二次访问的时候，本地有一份缓存，使用缓存展示之前访问的页面，这样即便服务器挂掉，客户端还是可以看到之前访问到的页面。

npm install workbox-webpack-plugin -D

只有线上代码需要做PWA的项目处理

webpack.prod.config.js

const WorkboxPlugin = require('workbox-webpack-plugin');
...
​
module.exports = {
    ...
    plugins: {
        new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true
        })
    }
    ...
}

index.js

// index.js 入口文件
console.log('PWA 简单使用')
​
if ('serviceWorker' in navigator) { // 如果浏览器支持 serviceworker
    window.addEventListener('load', () => {
        // service-worker.js 打包生成的用于PWA的文件，可在 dist 目录查看
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => { // 注册成功返回参数
                console.log('service-worker registed')
            }).catch(error => {
                console.log('service-worker register error')
        })
    })
}

对代码打包后，启动模拟的http-server，访问页面，关闭服务器，再次刷一下页面查看效果

以上就是简单实现PWA效果的操作。