Vue 3 PWA实战：离线支持与消息推送

Vue 3 是一个现代化的前端框架，而 PWA（Progressive Web App）则是一种可以让网页应用具备原生应用特性的技术。通过 Vue 3 构建 PWA，可以实现离线支持和消息推送等功能，为用户提供更好的体验。

在本篇文章中，我们将深入探讨如何使用 Vue 3 实现 PWA 的离线支持与消息推送功能，并提供详细的步骤说明和代码示例。

1. Vue 3 中的 PWA 支持

Vue CLI 提供了对 PWA 的内置支持。如果你使用的是 Vue CLI 创建的项目，那么可以通过简单的配置启用 PWA 功能。

安装 PWA 插件

首先，确保你的 Vue 项目已经安装了 @vue/pwa 插件：

vue add pwa

这将自动安装并配置好 PWA 所需的 workbox-webpack-plugin 和 manifest.json 文件。

2. 配置 manifest.json

manifest.json 是 PWA 的核心配置文件之一，用于定义应用的名称、图标、主题颜色等信息。你可以在 public/manifest.json 文件中进行如下配置：

{
  "name": "My Vue PWA",
  "short_name": "VuePWA",
  "icons": [
    {
      "src": "img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#4db6ac",
  "background_color": "#ffffff"
}

上述配置定义了应用的基本信息以及离线时的显示样式。

3. 离线支持

离线支持的核心是 Service Worker。Service Worker 是一种运行在浏览器后台的脚本，可以拦截网络请求并缓存资源。

自动生成 Service Worker

Vue CLI 使用 Workbox 自动生成 Service Worker 文件。默认情况下，Workbox 会缓存所有静态资源（如 HTML、CSS、JavaScript）。你可以通过修改 vue.config.js 来自定义缓存策略。

例如，在 vue.config.js 中添加以下内容：

module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/service-worker.js',
      exclude: [/\.(?:png|jpg|jpeg|svg)$/],
      runtimeCaching: [
        {
          urlPattern: /.*\.js/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'js-cache',
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 * 24 // 24 hours
            }
          }
        }
      ]
    }
  }
};

自定义 Service Worker

如果需要更复杂的逻辑，可以创建自定义的 Service Worker 文件（如 src/service-worker.js），并在其中编写缓存逻辑。

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('app-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/manifest.json',
        '/css/app.css',
        '/js/app.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

上述代码会在安装阶段缓存指定的资源，并在请求阶段优先返回缓存中的内容。

4. 消息推送

消息推送是 PWA 的另一大特性，允许应用在后台向用户发送通知。

注册 Push API

要实现消息推送，首先需要注册 Push API 并获取用户的订阅信息。

navigator.serviceWorker.ready.then(registration => {
  return registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('your-public-key')
  });
}).then(subscription => {
  console.log('Push subscription:', JSON.stringify(subscription));
});

发送通知

当收到推送消息时，Service Worker 可以调用 showNotification 方法来显示通知。

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: data.icon
  });
});

后端集成

后端需要使用 VAPID 协议发送推送消息。这里推荐使用 Web Push Library 来简化推送过程。

const webPush = require('web-push');

webPush.setVapidDetails(
  'mailto:your-email@example.com',
  'your-public-key',
  'your-private-key'
);

const subscription = { /* 用户订阅信息 */ };
const payload = JSON.stringify({ title: 'Hello!', body: 'This is a notification!' });

webPush.sendNotification(subscription, payload)
  .catch(err => console.error('Error sending notification:', err));

5. 测试 PWA

在开发过程中，可以通过 Chrome DevTools 的 Application 面板测试 PWA 功能。具体步骤如下：

1. 打开开发者工具。
2. 切换到 Application 面板。
3. 在 Service Workers 下查看是否已注册。
4. 在 Cache Storage 中检查缓存的内容。
5. 使用 Notifications 面板测试消息推送。

sequenceDiagram
  participant Browser
  participant ServiceWorker
  participant Backend
  Browser->>ServiceWorker: Register Service Worker
  ServiceWorker->>Backend: Fetch Subscription Info
  Backend-->>ServiceWorker: Send Push Notification
  ServiceWorker->>Browser: Show Notification