高级 - PWA（渐进式网络应用程序Progressive web application）

// 为什么要使用
就发WebApp项目，项目一旦处于网络离线情况，就没法访问了

// 是什么
渐进式网络应用程序是一种可以提供类似于native app（原生应用程序）体验的Web App的技术
其中最重要的是在离线时应用程序能够继续运行功能
内部通过Service Workers技术实现的

// 安装
npm i workbox-webpack-plugin -D

// 配置
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

module.exports = {
    plugins: [
        new WorkboxWebpackPlugin({
            // 这些选项帮助快速启动 ServiceWorkers
            // 不允许遗留任何旧的 ServiceWorkers
            clientsClaim: true,
            skipWaiting: true,
        }),
    ]
}


// 在main.js内使用

if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
        navigator.serviceWorker
        .register("/service-work.js")
        .then(registration => {
            // 注册成功
            console.log("SW registered: ", registration)
        })
        .catch(registrationError => {
            // 注册失败
            console.log("SW registration failed: ", registrationError);
        })
    })
}




// 注意，打包后会发现目录查找失败，需要继续安装
npm i serve -g

// 然后终端执行， 此时浏览器url就不会出现dist了
serve dist