相关代码

渐进式网络应用程序（Progressive Web Application - PWA），是一种可以提供类似于原生应用程序（native app）体验的网络应用程序（web app）。PWA 可以用来做很多事，其中最重要的是，在离线（offline）时应用程序能够继续运行功能，这是通过使用名为 Service Workers 的 web 技术来实现的。

一般来说，我们的项目都是在启动了一个 server 的情况下运行的，当用户处于离线（offline）状态，或者我们关闭了 server，用户就不能正常使用程序。

现在，我们可以通过 PWA，解决这个问题，即停止了 server 也能正常运行程序。

1. 添加 Workbox

使用 workbox-webpack-plugin 插件：

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

// webpack.config.js

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

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

执行 npx webpack，可以看到打包出了两个额外的文件。其中 service-worker.js 是 Service Worker 文件， workbox-36b4d269.js 是 service-worker.js 引用的文件。

2. 注册 Service Worker

在入口文件 index.js 中写以下代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then( registration => {
        console.log('SW 注册成功：', registration)
      })
      .catch( registrationError => {
        console.log('SW 注册失败：', registrationError)
      })
  })
}

如果使用 webpack-dev-serve 启动服务，记得在 webpack.config.js 中配置：

module.exports = {
    devServer: {
        static: resolve(__dirname, './dist'),
    }
}

先执行 npx webpack ，再执行 npx webpack serve，就可以正常访问程序了。

现在在命令行把 server 关闭，再查看浏览器，发现页面仍然可以正常访问：

PS：报错是因为关闭了 server，访问不到服务器。浏览器会一直尝试连接服务器，但最终都是失败的。

之所以能实现这个效果，是因为 Chrome 浏览器对页面进行了缓存。在 Chrome 浏览器地址栏输入：

chrome://serviceworker-internals

找到对应的域名并清理缓存：

再次刷新页面，现在就无法访问了。