CODEWITHSUNDEEP
javascriptfirebase-cloud-messagingprogressive-web-appsnuxt.jsworkbox
Lukas Mauser
Lukas Mauser

Reputation: 11

Whats the best solution to use nuxt pwa features together with fcm?

I want to add firebase cloud messaging to my nuxt.js app that uses workbox to integrate pwa features. The problem is that fcm requires a service worker (firebase-messaging-sw.js) that handles incoming messages but workbox also uses a service worker (sw.js) to provide pwa features.

As one site can only handle one service worker I tried using the workbox service worker (sw.js) for firebase:

navigator.serviceWorker.register('/sw.js')
        .then((registration) => {
            fcm.useServiceWorker(registration)
        })
        .catch(err => {
            console.error(err);
        })

and copying the code from firebase-messaging-sw.js into sw.js:

importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');


const config = {
        messagingSenderId: "12345",
    }

    !firebase.apps.length ? firebase.initializeApp(config) : ''



const messaging = firebase.messaging()

But every time I build the project with nuxt the sw.js file gets overwritten and the code I copied to handle incoming messages is gone.

whats the best solution to use workbox together with fcm?

Upvotes: 1

Views: 955

Answers (1)

sachiko-kame
sachiko-kame

Reputation: 141

I'm sorry. I made a mistake.

Just keep the '/firebase-messaging-sw.js' file.

It seems that the firebase function reads it.

I'm sorry if you don't get the answer you want.

Upvotes: 0

Related Questions