I have a small Nuxt SSR website with push notifications via FCM. For the push notifications (Push-API) I use nuxt-fire. At Windows and Android in Chrome (Blink Engine) or FireFox (Gecko Engine) this works great. Now a friend has a problem that the website doesn't display any content. He is using Apple devices. Apple has a WebKit requirement, so Chrome also uses WebKit as an engine under Apple. WebKit does not support the Push-API but has its own solution, the APN (Apple Push Notifications).
The error message under WebKit is the following: "FirebaseError: Messaging: This browser doesn't support the API's required to user the firebase SDK. (messaging/unsupported-browser)"
Now I'm looking for a way not to load the firebase messaging in nuxt-fire into Nuxt.js on unsupported devices/engines (Internet Explorer doesn't support the Push API either). Here is the posibility in JS to check for supported devices/engines:
if (firebase.messaging.isSupported())
const messaging = firebase.messaging();
}
But how and where do I use that in Nuxt.js with nuxt-fire?
In the nuxt.config.js I config the nuxt-fire module like this:
[
'nuxt-fire',
{
config: {
development: {
...
},
production: {
...
}
},
useOnly: ['storage', 'messaging'],
customEnv: false,
}
]
Is there a way to do this here in the nuxt.config.js? or as plugin/middleware?
Thank you very much and best regards,
Jakob
Turns out the issue can be fixed by reinstalling the module. To be sure it installs correctly, remove the node_modules folder, remove package-lock.json and then rerun npm i - that should fix it.
With v2.4.0 we rearranged the folder structure of the plugin, see Release Notes. We mention in the release notes to reinstall the package if the Template src not found appears. For some reason your app took 2 npm install's to fix? Maybe package-lock.json wasn't deleted, other reason I can think of is that there could have been caching done of node_modules on your host (e.g. on Netlify you should do Clear Cache and trigger deploy) which might be another reason why the deployed app broke.
Pascal from nuxt-fire here.
As you can see here, we already do the if firebase.messaging.isSupported()check when setting up $fireMess for you. If a browser does not support Firebase Messaging, $fireMess will be undefined.
So what you will have to do before calling $fireMess.requestPermission() or getToken() (e.g. in your messaging plugin, or wherever you do it?) is to check if $fireMess exists, like so:
if (!this.$fireMess) {
// No browser support
return
}
Since I do not know how exactly you implemented Firebase Messaging, it is hard to say where the issues lies exactly - but that might be it.
Be aware that all that nuxt-fire does is inject $fireMess into the global context, we don't do any initilalization.
If that doesn't solve your issue you think something might be, feel free to create an issue on our GitHub issues page, we'll be happy to look into it.
Hope that helped.
Pascal from nuxt-fire here.
As you can see here, we already do the if firebase.messaging.isSupported()check when setting up $fireMess for you. If a browser does not support Firebase Messaging, $fireMess will be undefined.
So what you will have to do before calling $fireMess.requestPermission() or getToken() (e.g. in your messaging plugin, or wherever you do it?) is to check if $fireMess exists, like so:
if (!this.$fireMess) {
// No browser support
return
}
Since I do not know how exactly you implemented Firebase Messaging, it is hard to say where the issues lies exactly - but that might be it.
Be aware that all that nuxt-fire does is inject $fireMess into the global context, we don't do any initilalization.
If that doesn't solve your issue you think something might be, feel free to create an issue on our GitHub issues page, we'll be happy to look into it.
Hope that helped.