webpack @5.x 配置PWA(渐进式网络应用程序)

F2E_keze

于 2024-02-22 14:00:11 发布

阅读量535

点赞数 6

分类专栏： PWA webpack vue 文章标签： webpack 前端

本文链接：https://blog.csdn.net/m0_56104994/article/details/136230961

版权

PWA 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

1. 之前在公司要求实现：在离线时，应用程序能够继续运行功能，现在简单写个DEMO来演示

我们将网络状态改为“离线”，然后刷新页面，会显示“未连接到互联网”

接下来演示如何使用PWA

2. 首先添加 Workbox, 下载依赖

cnpm install workbox-webpack-plugin --save-dev

3. 配置webpack

//引入workbox
const WorkboxPlugin = require('workbox-webpack-plugin'); 
//配置plugins
new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),

4. 在main.js中注册Service Worker

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