在webpack中开启PWA

PWA简称渐进式web应用，它是一种离线可访问技术，那么它的作用是什么呢？我们知道，当我们的电脑或手机没有连接网络时，任何一个网站都无法打开，而PWA技术允许你的应用在离线状态下，仍然可以正常加载。

不过PWA应用有些局限性，你的网站应用应该是静态的，因为只有静态的站点做离线访问才有意义，假如你的整个站点或大部分页面都是动态内容，则完全没有必要使用PWA。

使用方式

在前端中可以使用webpack来实现应用的PWA，不过我们需要借助第三方插件：

npm i workbox-webpack-plugin -D

接下来，只需要在配置文件中加入该插件即可

// webpack.config.js
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = {
    plugin: [
        new WorkboxWebpackPlugin.GenerateSW({
            clientsClaim: true, // 快速启动serviceWorker
            skipWaiting: true, // 删除旧的serviceWorker
        })
    ]
}

仅仅配置webpack插件还不够，因为并不是什么浏览器都支持PWA应用，通常只有较新的现代浏览器才支持，因此我们仍需要去对用户的浏览器做一个判断，同时还需要主动去注册serviceWorker。

打开我们的入口文件，加入以下代码

// main.js
if('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
        try {
            await navigator.serviceWorker.register('/service-worker.js');
            console.log('pwa开启成功');
        } cache (() => {
            console.log('pwa开启失败');
        })
    })
}

service-worker.js文件会在执行build构建的时候，由webpack自动生成