Next.js - Firebase 云消息：未捕获的 ReferenceError：导航器未在 Component.WindowMessagingFactory [作为实例工厂] next.js 处定义

Question

目前我正在尝试在 next.js 中使用 firebase 实现推送通知， 我按照文档中的指南进行操作：https://firebase.google.com/docs/cloud-messaging/js/receive?hl=es-419

但是我在本地主机上收到此错误： 以前有人遇到过这个错误吗？

我的实现：

• 添加了服务人员：

我的 firebase 初始化：

然后我创建了一个通知组件来获取 firebase 令牌：

然后我实现了需要显示通知的地方：

版本：

"firebase": "^10.0.0",
"next": "13.2.4",
"react": "18.2.0",

终端上出现一些额外错误：

    error - unhandledRejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser).
    at file:///Users/fauricio/Documents/emprendimientos/reservations/node_modules/@firebase/messaging/dist/esm/index.esm2017.js:1167:33 {
  code: 'messaging/unsupported-browser',
  customData: {}
}
error - ReferenceError: navigator is not defined
    at Component.WindowMessagingFactory [as instanceFactory] (file:///Users/fauricio/Documents/emprendimientos/reservations/node_modules/@firebase/messaging/dist/esm/index.esm2017.js:1019:5)
    at Provider.getOrInitializeService (file:///Users/fauricio/Documents/emprendimientos/reservations/node_modules/@firebase/component/dist/esm/index.esm2017.js:290:39)
    at Provider.getImmediate (file:///Users/fauricio/Documents/emprendimientos/reservations/node_modules/@firebase/component/dist/esm/index.esm2017.js:128:29)
    at getMessagingInWindow (file:///Users/fauricio/Documents/emprendimientos/reservations/node_modules/@firebase/messaging/dist/esm/index.esm2017.js:1173:63)
    at eval (webpack-internal:///./src/config/firebaseInit.ts:25:83) {
  page: '/admin/mis-reservas'
}

大家有什么想法吗？我应该添加其他东西吗？ 预先感谢

Answer 1

它无法在带有 http 的本地开发服务器上工作 如果你想在本地开发服务器上测试它，你可以尝试 ngrok 使用 ngrok 代理，您可以简单地将其放在互联网上并使用 ngrok 的身份验证令牌安全地访问它

ngrok http "your local dev route"