Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service WorkerTitle for the bug

[daytonabg]

Operating System

MacOS

Browser Version

Chrome

Firebase SDK Version

9.22.1

Firebase SDK Product:

Messaging

Describe your project's tooling

I'm trying to implement Firebase Messaging into my website so my visits can subscribe for push notifications. I've put a button on the page with an ID notificationActivate that should check if the browser is supported, request for permissions, register the ServiceWorker and print the token to the console.

Describe the problem

This is the page code:

<script type="module">
    import {
        initializeApp
    } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
    import {
        getMessaging,
        getToken,
        isSupported,
    } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging.js";

    const firebaseConfig = {
        apiKey: "XXX",
        authDomain: "XXX",
        projectId: "XXX",
        storageBucket: "XXX",
        messagingSenderId: "XXX",
        appId: "XXX",
        measurementId: "XXX",
    };

    const app = initializeApp(firebaseConfig);

    const messaging = getMessaging();

    isSupported().then((supported) => {
        if (supported) {
            document.getElementById("notificationActivate").addEventListener("click", function() {
                Notification.requestPermission().then(permission => {
                    if (permission == "granted") {
                        navigator.serviceWorker.register("/firebase-messaging-sw.js").then(swRegistration => {
                            getToken(messaging, {
                                serviceWorkerRegistration: swRegistration,
                                vapidKey: "XXX",
                            }).then(token => {
                                console.log("TOKEN: " + token);
                            });
                        })
                    } else {
                        console.log("TOKEN: PERMISSION DENIED");
                    }
                }).catch(error => {
                    console.log("TOKEN: " + error);
                });
            });
        }
    });
</script>

This is the ServiceWorker:

importScripts(
  "https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"
);
importScripts(
  "https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js"
);

const firebaseConfig = {
  apiKey: "XXX",
  authDomain: "XXX",
  projectId: "XXX",
  storageBucket: "XXX",
  messagingSenderId: "XXX",
  appId: "XXX",
  measurementId: "XXX",
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

Steps and code to reproduce issue

When I click the button for the first time I see the following error in the console:

Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker

And when I click it again then I see the token.

It's been countless hours researching the Internet and trying all kinds of code, because it seems that they constantly update it and in the end nothing works. It is safe to say that this is the most poorly documented module I've ever encountered. And to be ran from one of the largest companies on the planet is just ridiculous. I was planning to use their paid services but I'll definitely look for an alternatives now. I'll now start to investigate how to reach Firebase support directly and explain about all the issues they have with their code, hopefully some developer get fired.

[LanderBeeuwsaert]

We see in our logging that our users on Mac have this issue as well intermittently. Is already happening for years.

[daytonabg]

We see in our logging that our users on Mac have this issue as well intermittently. Is already happening for years.

Thank you for this information. I confirm that this is happening only on my Mac, I haven't tried another OS so I thought it's happening in all platforms. As a workaround, I've set the button to get disabled when clicked and gets enabled again if the system doesn't get the token, so the user will know that he should click on the button again.