Firebase Messaging报错：无法读取undefined的addEventListener属性

这个错误的核心原因是navigator.serviceWorker为undefined，导致无法调用addEventListener。下面是具体的排查和解决步骤：

1. 验证浏览器环境与访问协议 #

• 确认使用的是支持Service Worker的现代浏览器（Chrome、Firefox、Edge等，IE完全不支持）
• 必须通过HTTPS访问应用，localhost/127.0.0.1是唯一例外，本地开发可以用这两个地址测试

2. 检查firebase-messaging-sw.js的位置与内容 #

• 该文件必须放在项目根目录（和index.html同一层级），如果放在src或其他子文件夹，浏览器无法正确加载
• 文件内容需正确初始化Firebase，示例如下：

  importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
  importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');
  
  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();
  

3. 确保Firebase初始化顺序正确 #

在main.js中，必须先初始化Firebase App，再获取Messaging实例，避免异步加载导致的问题：

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

const firebaseConfig = {
  // 你的Firebase配置信息
};

// 初始化App（避免重复初始化）
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// 再获取Messaging实例
const messaging = firebase.messaging();

4. 手动注册Service Worker（自动注册失败时） #

如果Firebase自动注册Service Worker失败，可手动注册并关联到Messaging：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js')
    .then(registration => {
      console.log('Service Worker 注册成功:', registration);
      // 将Messaging与注册的Service Worker关联
      messaging.useServiceWorker(registration);
    })
    .catch(err => {
      console.error('Service Worker 注册失败:', err);
    });
} else {
  console.error('当前浏览器不支持Service Worker');
}

5. 清除旧的Service Worker缓存 #

打开浏览器开发者工具 → Application → Service Workers，点击Unregister清除旧的缓存，然后刷新页面重新加载。

内容的提问来源于stack exchange，提问作者Raphael Lopes