在使用Workbox的Nuxt.js项目中整合FCM的最优解决方案

我之前在Nuxt项目里整合Workbox和FCM时也碰到过一模一样的问题——手动修改生成的sw.js每次构建都会被覆盖，简直头疼。后来摸索出了利用Nuxt PWA模块的扩展能力来解决的方案，亲测有效，分享给你：

核心思路 #

不要直接修改Workbox自动生成的sw.js，而是通过Nuxt的配置，将FCM的service worker代码注入到最终生成的sw.js中，这样构建时会自动合并代码，不会被覆盖。

具体步骤 #

1. 确保Nuxt PWA模块已安装 #

如果你还没装@nuxtjs/pwa，先执行安装命令：

npm install @nuxtjs/pwa
# 或者用yarn
yarn add @nuxtjs/pwa

2. 配置Nuxt的Workbox扩展 #

在项目根目录的nuxt.config.js中，添加PWA模块的配置，指定自定义的service worker扩展文件：

export default {
  // ...其他配置
  pwa: {
    workbox: {
      // 指定扩展文件的路径，这里我放在plugins目录下
      extensions: '@/plugins/fcm-sw.js'
    },
    // 别忘了配置你的PWA图标，FCM后台通知会用到
    icon: {
      source: './static/icons/icon.png',
      // 其他图标配置...
    }
  }
}

3. 编写FCM的Service Worker代码 #

创建plugins/fcm-sw.js文件，把原来firebase-messaging-sw.js里的代码放进来，还可以加上后台消息处理逻辑：

// 引入Firebase SDK
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');

// 初始化Firebase
const firebaseConfig = {
  messagingSenderId: "12345", // 替换成你的Sender ID
  // 如果需要其他Firebase配置（比如apiKey）也可以加上
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const messaging = firebase.messaging();

// 处理后台消息（应用在后台时收到通知）
messaging.setBackgroundMessageHandler((payload) => {
  console.log('[FCM] 收到后台消息:', payload);
  // 自定义通知内容
  const notificationTitle = payload.notification?.title || '新消息';
  const notificationOptions = {
    body: payload.notification?.body || '您有一条新通知',
    icon: '/icons/icon-192x192.png', // 对应PWA配置的图标
    data: payload.data // 携带额外数据
  };

  return self.registration.showNotification(notificationTitle, notificationOptions);
});

4. 客户端初始化FCM并关联Service Worker #

创建客户端专用的插件plugins/fcm.client.js（后缀.client.js确保只在浏览器环境执行）：

import firebase from 'firebase/app';
import 'firebase/messaging';

export default async ({ app }) => {
  const firebaseConfig = {
    messagingSenderId: "12345", // 和上面一致的Sender ID
    // 其他Firebase配置...
  };

  // 初始化Firebase
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
  }

  try {
    const messaging = firebase.messaging();

    // 请求用户通知权限
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      // 获取FCM令牌，可发送到后端保存
      const token = await messaging.getToken();
      console.log('FCM令牌:', token);
      // 这里可以调用API把token存到你的服务器
    }

    // 关联Workbox生成的Service Worker
    if ('serviceWorker' in navigator) {
      const registration = await navigator.serviceWorker.register('/sw.js');
      messaging.useServiceWorker(registration);
    }

    // 处理前台消息（应用在前台时收到通知）
    messaging.onMessage((payload) => {
      console.log('[FCM] 收到前台消息:', payload);
      // 这里可以自定义前台消息的展示逻辑，比如弹出自定义弹窗
    });
  } catch (error) {
    console.error('FCM初始化失败:', error);
  }
};

然后在nuxt.config.js中注册这个客户端插件：

export default {
  plugins: [
    { src: '@/plugins/fcm.client.js', mode: 'client' }
  ],
  // ...其他配置
}

关键注意点 #

• Firebase版本一致性：确保client端和service worker中引入的Firebase SDK版本一致，避免兼容性问题。如果用的是Firebase 9.x+的模块化版本，service worker里需要改用兼容的引入方式（比如importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js')）。
• 安全环境测试：FCM和Service Worker都需要HTTPS环境，本地测试可以用localhost，部署时要确保站点是HTTPS。
• 通知权限：一定要处理用户拒绝通知权限的情况，避免代码报错。

这样配置后，每次构建Nuxt时，Workbox会自动把你写的FCM service worker代码合并到生成的sw.js里，再也不用担心代码被覆盖啦！

内容的提问来源于stack exchange，提问作者Lukas Mauser