渐进式网络应用程序(progressive web application - PWA)在离线时给用户以原生app体验

Web应用在网络断开时可以借助Workbox插件来使应用程序能够继续运行功能。

1. 安装 workbox-webpack-plugin插件：

    npm install workbox-webpack-plugin --save-dev

2. 配置文件中声明并在plugins中初始化该插件：

const WorkboxPlugin = require('workbox-webpack-plugin');



plugins: [
        new WorkboxPlugin.GenerateSW({
            // 这些选项帮助快速启用 ServiceWorkers
            // 不允许遗留任何“旧的” ServiceWorkers
            clientsClaim: true,
            skipWaiting: true,
        }),
]

3. 在主js文件中注册service worker

//注册 Service Worker 完成安装、配置workbox插件后还需要注册service worker
//因为兼容性问题，先做判断，存在service worker才用
//只是这样配置还会有问题，因为我们的网页打包后在dist目录，但浏览器会在根目录下找寻service worker
//因此需要安装serve静态资源服务器
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(registration => {
            console.log('SW registered: ', registration);
        }).catch(registrationError => {
            console.log('SW registration failed: ', registrationError);
        });
    });
}

4. 需要注意的是，Webpack打包的输出文件往往在dist目录下，这样在注册serviceWorker时会失败，可以全局安装一个静态资源服务器，在相应的目录下启动服务器，就可以离线使用web app:

 npm i serve -g

serve dist

配置完成