Recently, I have been working on integrating Firebase Cloud Messaging into an iOS Safari browser due to the support for Push Notification and Notification API.
function requestPermission() {
console.log("request permission")
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('FIREBASE CLOUD MESSAGING Notification permission granted.');
messaging.getToken(messaging, { vapidKey: '<my-key>' }).then((currentToken) => {
if (currentToken) {
// Send the token to your server and update the UI if necessary
// ...
console.log("FIREBASE CLOUD MESSAGING currentToken", currentToken)
} else {
// Show permission request UI
console.log('FIREBASE CLOUD MESSAGING No registration token available. Request permission to generate one.');
// ...
}
}).catch((err) => {
console.log('FIREBASE CLOUD MESSAGING An error occurred while retrieving token. ', err);
// ...
});
}
})
}
When using the requestPermission() function on a desktop, it successfully requests permission without any issues. However, when trying the same on iOS Safari, Notification.requestPermission() does not prompt the user or show errors, even though notifications are enabled in the browser.
The function is triggered by a button click, which seems to prevent any errors related to "user gesture." How can I go about resolving this issue?