Ionic Angular应用Firebase Cloud Messaging服务工作者注册失败求助

问题根源分析 #

1. Firebase版本不兼容：项目使用Firebase v9模块化版本，但服务工作者（Service Worker）代码混用了v8的命名空间语法，且错误尝试导入Angular环境配置（Service Worker无法解析ES模块）。
2. 服务工作者文件配置错误：文件位置或Angular打包配置未正确设置，导致无法通过HTTP URL访问。
3. 初始化语法错误：未采用Firebase v9对应的Service Worker模块化初始化方式。

分步解决方案 #

1. 修正Service Worker代码（适配Firebase v9） #

将src/firebase-messaging-sw.js替换为以下代码，注意直接写入Firebase配置（不要导入Angular的environment）：

// 导入Firebase v9兼容版SW脚本
importScripts('https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.18.0/firebase-messaging-compat.js');

// 从Firebase控制台复制你的项目配置
firebase.initializeApp({
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
});

const messaging = firebase.messaging();

// 可选：后台消息处理逻辑
messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] 收到后台消息:', payload);
  const notificationTitle = payload.notification?.title || '新消息';
  const notificationOptions = {
    body: payload.notification?.body || '您有一条新通知',
    icon: '/assets/icon/favicon.ico' // 替换为你的应用图标路径
  };

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

2. 配置Angular打包规则，确保Service Worker可访问 #

修改angular.json中的assets配置，将Service Worker文件加入打包资源列表：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/firebase-messaging-sw.js" // 添加此行，确保文件被复制到打包根目录
],

3. 修正MessagingService代码（统一Firebase v9语法） #

简化并修正服务端代码，避免混用compat与模块化API：

import { Injectable } from '@angular/core';
import { getMessaging, getToken, onMessage } from '@angular/fire/messaging';

@Injectable({
  providedIn: 'root'
})
export class MessagingService {

  constructor() { }

  async saveDeviceToken() {
    const VAPID_KEY = '你的VAPID公钥'; // 从Firebase控制台"云消息传递"页面获取
    const messaging = getMessaging();
    
    try {
      const currentToken = await getToken(messaging, { vapidKey: VAPID_KEY });
      if (currentToken) {
        console.log('设备Token:', currentToken);
        // 此处可将Token发送至后端保存
      } else {
        console.log('无可用注册Token，请求通知权限');
        // 触发浏览器通知权限请求
        await Notification.requestPermission();
        // 权限授权后重新获取Token
        this.saveDeviceToken();
      }
    } catch (error) {
      console.error('获取Token失败:', error);
    }
  }

  // 可选：监听前台消息
  listenForForegroundMessages() {
    const messaging = getMessaging();
    onMessage(messaging, (payload) => {
      console.log('前台收到消息:', payload);
      // 可在此处显示自定义弹窗或通知
    });
  }
}

4. 手动指定Service Worker注册路径（可选） #

如果Firebase自动注册失败，可在app.module.ts中手动注册：

import { NgModule } from '@angular/core';
import { getMessaging, registerServiceWorker } from '@angular/fire/messaging';

@NgModule({
  // ...其他配置
})
export class AppModule {
  constructor() {
    const messaging = getMessaging();
    // 明确指定Service Worker路径
    registerServiceWorker(messaging, {
      serviceWorkerUrl: '/firebase-messaging-sw.js'
    });
  }
}

5. 升级依赖版本 #

你的firebase-tools版本过低（v8.0.0），建议升级至最新版以兼容Firebase v9：

npm install firebase-tools@latest --save-dev

测试验证 #

1. 重启Ionic开发服务：ionic serve
2. 访问http://localhost:8100/firebase-messaging-sw.js，确认能看到Service Worker脚本内容
3. 调用saveDeviceToken()方法，检查控制台是否成功获取Token

内容的提问来源于stack exchange，提问作者D.Hodges