FCM says that the browser is unsupported (Chrome/Safari, iOS 17)? #7734
Description
Operating System
iOS/Latest
Browser Version
Safari/Latest
Firebase SDK Version
10.5.2
Firebase SDK Product:
Messaging
Describe your project's tooling
The following code works on Chrome/Safari for MacOS, but not for iOS. For iOS, the website has been added to the home screen before requesting the permissions.
Describe the problem
firebase-messaging.html
<html>
<head>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-app.js";
import {
getMessaging,
getToken,
isSupported,
} from "https://www.gstatic.com/firebasejs/10.5.2/firebase-messaging.js";
const firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX",
};
const app = initializeApp(firebaseConfig);
const supported = await isSupported();
if (supported) {
document
.getElementById("request")
.addEventListener("click", async () => {
const permission = await Notification.requestPermission();
if (permission === "granted") {
const messaging = getMessaging();
const token = await getToken(messaging, {
vapidKey:
"XXX",
});
document.getElementById("token").value = token;
} else {
document.getElementById("token").value = "Permission denied";
}
});
} else {
document.getElementById("token").value = "Browser unsupported";
}
</script>
</head>
<body>
<button id="request">Request</button>
<input type="text" id="token" />
</body>
</html>
firebase-messaging-sw.js
importScripts(
"https://www.gstatic.com/firebasejs/10.5.2/firebase-app-compat.js"
);
importScripts(
"https://www.gstatic.com/firebasejs/10.5.2/firebase-messaging-compat.js"
);
firebase.initializeApp({
apiKey: "XXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX",
});
const messaging = firebase.messaging();
manifest.json
{
"name": "Daytona",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "/assets/img/favicon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/assets/img/favicon/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "/assets/img/favicon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/assets/img/favicon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/assets/img/favicon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/assets/img/favicon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}
Steps and code to reproduce issue
As I understand, notifications should be now available for iOS, right? Maybe I'm missing something. Any help is appreciated. Thanks!