CODEWITHSUNDEEP
reactjsfirebasewebpackprogressive-web-appsservice-worker
S.Aminnejad
S.Aminnejad

Reputation: 107

how to merge FCM service worker with workboxWebpackPlugin default serviceworker

I am using FCM in my react app and now I am developing the same app as a PWA. So I added workboxWebpackPlugin to generate its default SW. I need to merge firebaseSW.js and serviceworker.js as they both are running on the same scope. Another challenge I'm having is that firebaseSW.js will be installed only when the user accepts the notification permission but the other service worker will be installed as the app starts running. I will appreciate any hint and guide.

Here is my workboxWebpackPlugin setup

 new WorkboxWebpackPlugin.GenerateSW({
        clientsClaim: true,
        exclude: [/\.map$/, /asset-manifest\.json$/],
        // importWorkboxFrom: "cdn",
        navigateFallback: "/static-files/fallback.html",
        navigateFallbackBlacklist: [
          // Exclude URLs starting with /_, as they're likely an API call
          new RegExp("^/_"),
          // Exclude URLs containing a dot, as they're likely a resource in
          // public/ and not a SPA route
          new RegExp("/[^/]+\\.[^/]+$"),
        ],
        importsDirectory: __dirname + "/../build/static-files",
        swDest: "static-files/sw.js",
      }),

and here is my FCM sw setup

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

firebase.initializeApp(FIREBASE_CONFIG);

firebase.messaging();

Upvotes: 0

Views: 917

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

The most straightforward approach would be to include that FCM code in a standalone JavaScript file, called fcm-sw.js or something like that, served from the same directory as your generated service worker, and then use the importScripts option in the GenerateSW plugin to include it:

new WorkboxWebpackPlugin.GenerateSW({
  importScripts: ['fcm-sw.js'],
  // ...other options...
}),

Upvotes: 2

Related Questions