9.x.x, Webpack, and Service Workers

[eliw00d]

I am having a heck of a time finding documentation anywhere for how to go from this:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

to this:

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

I am guessing I'll need to register the service worker with type module, but how do I support that with Webpack? Currently, I am using the 'copy-webpack-plugin' to copy the service worker file to the public path. That works, but now I need to support the import syntax, and scouring the web has not produced many results. The documentation basically just says "we assume you know how to do this". Unfortunately, even Webpack's own documentation is lacking, so it would be nice to have an example to go by. Any help?

[adamhari]

Here's what I did to build the firebase-messaging-sw.js file with webpack (I'm not sure if this works because I'm having other issues with Firebase, I would be interested in knowing):

1. Add an additional item in the config's entry collection for the firebase-messaging-sw.js file. We do this because we want to bundle and output it separately from the rest of the app's files.

entry: {
  ...,
  'firebase-messaging-sw': path.join(__dirname, './web/firebase-messaging-sw.ts'),
}

2. Change your output.filename config if needed so that the service worker entry's output file is named correctly. Mine is doing something like this:

pathData => {
  return pathData.chunk.name === 'firebase-messaging-sw' ? '[name].js' : '[name].[hash].js';
},

3. Add the service worker file to your HtmlWebpackPlugin's excludeChunks collection. We do this because we don't want the script tag to be included and executed from the outputted index.html file, we only want it to exist in the outputted directory.

4. Disable optimization.runtimeChunk. I didn't want to do this, but it was affecting the naming and content of the service worker file.

[adamhari]

@eliw00d I don't ever call navigator.serviceWorker.register() directly.

[eliw00d]

@eliw00d I don't ever call navigator.serviceWorker.register() directly.

Ah okay, the reason I ended up doing so (but copied the way the SDK does it) was to pass URL search params for environment variables. I will try to find a way to avoid that.

[eliw00d]

Do you do anything differently for localhost?

[adamhari]

No, other than env vars (unique Firebase project for each env) everything is handled the same.

[eliw00d]

Sounds good. Must be something specific to my use of devServer, then. If I build the production version locally it works fine.