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?
my implementation:
then I created a Notifications component to get firebase token:
then I implemented where I need to show the notification:
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