5-2 PWA 的打包配置

love丁酥酥

发布于 2020-05-04 21:23:06

1.2K0

发布于 2020-05-04 21:23:06

文章被收录于专栏：coding for lovecoding for love

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')
    });
  });
}

打包后如下：