getToken() for Push API, requires Notification API support

[SteveKennedy]

Operating System

macOS 14.1

Browser Version

Safari 17.4

Firebase SDK Version

10.11

Firebase SDK Product:

Messaging

Describe your project's tooling

Angular only

Describe the problem

When calling getToken() to get token to use for Web Push API, it responds with error about not having Notification API support. Specifically "ReferenceError: Can't find variable: Notification"

If someone wants to use getToken() only for Web Push API support, and never plans to support Notification API, this seems like a bug?

This issue is also described in: https://stackoverflow.com/questions/78359582/push-api-without-notification-api

Steps and code to reproduce issue

1. Create a template Angular project.
2. Add FirebaseJS or even Angular Fire.
3. Call getToken() on a browser that does not support Notification API.

[juyeongnoh]

Did you try add your web app to the home screen?
It seems Safari does not support web push feature but web app added to the home screen (or dock).
+ I am setting this thread straight. Safari for mac does not need to be added to dock to use Push API. (05/03/2024)

I faced same issue in my React project and resolved like this:

// firebaseConfig.js
const firebaseConfig = {
  // API KEYS
};
const app = initializeApp(firebaseConfig);
const isFirebaseSupported = async () => {
  const supported = await isSupported(); // imported from 'firebase/messaging'
  return supported ? getMessaging(app) : null;
}
export const messaging = await isFirebaseSupported();

// LoginPage.jsx
const handleLogin = () => {
  if ('Notification' in window && Notification.permission !== 'granted') {
    alert('Click allow when dialog shows up');
    const clientToken = await getToken(messaging, { vapidKey });
  }
}

return <Button onClick={handleLogin} />
}

Make sure to put if statement to check if the browser support Notification API(only home screen web apps works in iOS), and don't let getToken automatically run without user gesture.

Hope this helps.

[SteveKennedy]

Safari says it does support Push API (aka "messages") natively, without adding to home screen. You only have to add your app to the home screen if you want Notifications API. I'm really trying my best to avoid Notifications API. I don't want Notification API. I simply only want Push API.

You still need a token to use Push API. And calling firebase 's getToken() for some reason also requires you to have Notification API support. Which feels like a bug.

https://developer.mozilla.org/en-US/docs/Web/API/Push_API

https://developer.mozilla.org/en-US/docs/Web/API/notification

[juyeongnoh]

I think this is why you're getting that error message.
getToken() itself uses Notification API internally.

[SteveKennedy]

I think this is why you're getting that error message.
getToken() itself uses Notification API internally.

I agree. It references the Notification type, which isn't valid for browsers that don't support notification API.

But if I just need to use getToken() to get a token for Push Message API, then this fails horribly.

I don't want to use Notification API at all.

[zwu52]

Receiving on mac safari shouldn't require app being added to home screen.

Unsure why your browser isn't supporting Notification API. According to browser compatibility, notification api is supported/enabled years before push API. My expectation is that any safari clients that has push api enabled should have notification api enabled as well (unless there is some secret config somewhere)

[juyeongnoh]

I'll set my thread straight. Didn't know that Safari for mac does not need to be added to home screen to use push api.