0

currently I'm trying to implement push notification with firebase in next.js, I followed this guide from documentation: https://firebase.google.com/docs/cloud-messaging/js/receive?hl=es-419

but I'm getting this error on my localhost: someone had get this error before?

enter image description here

my implementation:

  • added the service worker: enter image description here

my firebase init: enter image description here

then I created a Notifications component to get firebase token:

enter image description here

then I implemented where I need to show the notification: enter image description here

versions:

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

some extra errors on the terminal:

    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'
}

any idea folks?. should I add something else? thanks in advance

0 Answers0