Question

Firebase Messaging：无法读取未定义的 addEventListener 的属性

2022-08-22

1973

node.js firebase vue.js firebase-cloud-messaging addeventlistener

我使用 NodeJS/VueJS 创建了一个 Firebase 应用，并尝试设置云消息传递。

我创建了一个 firebase-messaging-sw.js 文件，并在 main.js 上添加了消息传递。

在我的应用中，我包含了 firebase，并且在我的挂载上执行了此操作（如文档中所述）：

const messaging = firebase.messaging();

    messaging.getToken({ vapidKey: "<KEY>" })
            .then((currentToken) => {
                if (currentToken) {
                    console.log('client token', currentToken)
                } else {
                    console.log('No registration token available. Request permission to generate one.');
                }
            }).catch((err) => {
                console.log('An error occurred while retrieving token. ', err);
    });

然后我转到我的 web 应用，出现以下错误： “未捕获的 TypeError：无法读取未定义的属性（读取‘addEventListener’）”

这个错误让我有点困惑，因为我不知道它来自哪里。

查看错误时，我看到：

查看源 register.ts 它将我重定向到此：

navigator.serviceWorker.addEventListener('message', e =>
messageEventListener(messaging as MessagingService, e));

但我不明白这个问题，我试图尽可能多地描述导致错误的所有步骤。即使我评论了我的安装代码，我仍然有错误

提前致谢，

Answer 1

解决方法是在服务工作线程中导入正确的部分。而不是

import { getMessaging } from "firebase/messaging/";

使用

import { getMessaging } from "firebase/messaging/sw";

保留您的逻辑，它就会起作用。

Answer 2

我想我已经搞明白了。我在服务工作线程中使用了 FCM，显然我不应该这样做。FCM 尝试在 navigator.serviceWorker 上调用 addEventListener ，但服务工作线程中未定义 navigator.serviceWorker ，这导致了此错误。

您应该在单独的脚本中实现 FCM。我们将其命名为 initFCM.js ：

import { initializeApp } from "firebase/app"
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
  // your Firebase config
  // TODO: Replace the following with your app's Firebase project configuration
  // See: https://firebase.google.com/docs/web/learn-more#config-object
}

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

getToken(messaging, { vapidKey: "<KEY>" })
        .then((currentToken) => {
            if (currentToken) {
                console.log('client token', currentToken)
            } else {
                console.log('No registration token available. Request permission to generate one.');
            }
        }).catch((err) => {
            console.log('An error occurred while retrieving token. ', err);
});

现在您只需在 html 中包含此脚本：

<script type="module" src="initFCM.js"></script>

就这样。请注意，我使用“Web 版本 9”而不是“Web 版本 8”来实现它。