Open
Description
Operating System
macOS Ventura 13.6.7, Intel processor
Browser Version
Safari 17.5 (18618)
Firebase SDK Version
10.12.3
Firebase SDK Product:
Messaging
Describe your project's tooling
Plain javascript
Describe the problem
The following exception is raised when trying to get an FCM token on Safari:
- Failed to load resource: the server responded with a status of 400 (Bad Request)
- Unhandled Promise Rejection: FirebaseError: Messaging: A problem occurred while subscribing the user to FCM: Request contains an invalid argument. (messaging/token-subscribe-failed).
Steps and code to reproduce issue
- Copy/paste the following code to an .html page
- Make sure you test this page with no risk of having the
Notificationpermission denied: if you're using macOS Ventura, create a shortcut to the test web page on your desktop (I just use http://localhost/...), then double click this shortcut to open the web. If you're using macOS Sonoma, I believe you can use the 'Add to dock' feature to do the same thing. - Test the web page: click the button.
- Look at the Javascript console. It will contain errors:
- Failed to load resource: the server responded with a status of 400 (Bad Request)
- Unhandled Promise Rejection: FirebaseError: Messaging: A problem occurred while subscribing the user to FCM: Request contains an invalid argument. (messaging/token-subscribe-failed).
I also tested with firebase-js-sdk 9.6.0, with identical results.
My Firebase set up does work perfectly fine on Chrome and Firefox (macOS and Windows platforms).
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/10.12.3/firebase-app-compat.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/10.12.3/firebase-messaging-compat.js"></script>
<script type="text/javascript">
function getFCMToken() {
const firebaseConfig = {
apiKey: '...',
appId: '...',
messagingSenderId: '...',
projectId: '...',
authDomain: '...',
storageBucket: '...',
measurementId: '...'
};
const app = firebase.initializeApp(firebaseConfig);
console.log("Calling messaging()");
const messaging = firebase.messaging();
messaging.getToken({vapidKey: '...'})
.then((currentToken) => {
console.log("The token is");
console.log(currentToken);
});
}
</script>
</head>
<body>
<button id="getTokenBtn" onclick="getFCMToken()">getToken()</button>
</body>
</html>