While troubleshooting an error message, I came across a common resolution that suggests adding a firebase-messaging-sw.js file. However, since I am using a bubble HTML element to run the script, I am unsure about the proper way to do this. I attempted using a CDN but I am not confident if it was done correctly or if there is a better approach. Any suggestions?
The error encountered is:
An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The document is in an invalid state. (messaging/failed-service-worker-registration).
at registerDefaultSw (registerDefaultSw.ts:43:25)
at async updateSwReg (updateSwReg.ts:28:5)
at async getToken$1 (getToken.ts:43:3)
An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The document is in an invalid state. (messaging/failed-service-worker-registration).
This is how I attempted to add the file:
<script type="importmap">
{
"imports": {
"firebase/app": "https://www.gstatic.com/firebasejs/9.6.9/firebase-app.js",
"firebase/messaging" :"https://www.gstatic.com/firebasejs/9.6.9/firebase-messaging.js"
}
}
</script>
<script type="module">
import { initializeApp } from 'firebase/app';
import { getMessaging,getToken } from "firebase/messaging";
const firebaseConfig = {
//my config
}
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
const swUrl = 'https://3b4293b7c2497062d0307b62bd49f75f.cdn.bubble.io/f1720473376600x761326990998907800/firebase-messaging-sw.js';
const sw = document.createElement('script');
sw.src = swUrl;
document.head.appendChild(sw);
getToken(messaging, {vapidKey: '...myactualvapidkey...'}).then((currentToken) => {
if (currentToken) {
console.log(currentToken);
} else {
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
</script>
It is worth noting that according to this tutorial, the service worker file should remain empty.
I also tried following advice from a similar thread on Stack Overflow. However, I faced import issues when attempting to use the 'firebase/messaging/sw' package.
EDIT
I realized that I could potentially place the file at the root (by navigating to Settings-->SEO/Metatags), but unfortunately, the file does not seem to be recognized. To rectify this issue, I have tried the following code snippet:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/firebase-messaging-sw.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
However, the output displays the following error:
ServiceWorker registration failed: DOMException: Failed to register a ServiceWorker: The document is in an invalid state.
Please note that this code is being rendered within an iFrame and the file firebase-messaging-sw.js remains empty.