webpack实现web应用的离线缓存之pwa

本文链接：https://blog.csdn.net/jieyucx/article/details/131272208

一、什么是pwa

`PWA（Progressive Web Apps）是一种可以将网站转变为类似于本地应用程序的技术，具有响应速度快、离线使用等优点。它采用渐进增强式开发技术，在不同浏览器中有不同程度的支持，可以实现许多类似于应用程序的特性，如推送通知、离线缓存、加速加载等

二、在webpack中配置使用

在webpack中配置PWA可以采用workbox-webpack-plugin插件。具体操作如下：

安装workbox-webpack-plugin插件

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

在webpack.config.js文件中配置插件

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

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

在应用入口文件中引入serviceWorker.js文件

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/serviceWorker.js').then(function(registration) {
      console.log('SW registered: ', registration);
    }).catch(function(registrationError) {
      console.log('SW registration failed: ', registrationError);
    });
  });
}

打包后的serviceWorker.js
在这里插入图片描述

举例：以vue-cli3为例，在项目中引入workbox-webpack-plugin插件并进行配置，在main.js中引入serviceWorker.js文件，然后运行build构建。最终生成dist目录中有一个serviceWorker.js和一个sourcemap的文件。

vue.config.js

// vue.config.js

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

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

main.js

// main.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('SW registered: ', registration);
    }).catch(function(registrationError) {
      console.log('SW registration failed: ', registrationError);
    });
  });
}