1. 简介

PWA 是 Progressive Web App 的缩写，即渐进式 Web 应用，目的是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。

2. 普通的应用

我们来看一个最简单的 web 应用，打开网页后仅打印一段文字：

// index.js
console.log('this is index');

打包后如下

image.png

进入 dist 文件，开启一个服务：

cd dist
http-server -p 8080

打开网页后如图：

image.png

然后我们关闭服务器，刷新页面，如图：

image.png
此时我们无法在访问页面资源。

3. PWA

如何保证网页在离线时仍然能正常展示呢？我们可以使用 workbox-webpack-plugin 插件：

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

// webpack.prod.js
...
const WorkBoxPlugin = require('workbox-webpack-plugin')
...
    plugins: [
      new WorkBoxPlugin.GenerateSW({
          clientsClaim: true,
          skipWaiting: true
      })
    ]
...

// index.js
console.log('this is index');

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('service-worker registered');
      }).catch(err => {
        console.log('service-worker register error')
    });
  });
}

打包后如下：

image.png

停掉服务器后，刷新页面如下：

image.png

发现依然能够访问。

4. 小结

本节只是简单介绍了如何利用 webpack 配置 PWA，引入了这样一个概念，更详细的 PWA 应用和配置，等有需要的时候可以详细了解。

参考

GitChat · 前端 | Webpack 工程的 PWA 实战
Workbox 3.0 – Web 站点轻松做到离线可访问
webpack 中使用 workbox 实现 PWA
2019前端必会黑科技之PWA