Firebase messaging service worker file

[jcubic]

I'm trying to implement Firebase messaging. It requires a file: firebase-messaging-sw.js in root directory. I'm testing my website on GitHub pages in directory, so I set this:

baseUrl: process.env.NODE_ENV === 'production' ? '/jquery.terminal-docs/' : '',

And put the file in /static directory. The worker is registered, but I think that It needs to be bundled, since the documentation only say to write this code:

import { getMessaging, onMessage } from 'firebase/messaging';

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

How can I compile this static file so the firebase/messaging is included in the .js file?

Do you have any example of using service worker written in TypeScript?

[slorber]

I don't really understand the problem sorry.

Files in static are not compiled, they are exposed as is.

You can use the clientModule config/plugin API to include additional client-side code bundled alongside all the rest of the Docusaurus client app.

Our PWA plugin uses a service worker: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-plugin-pwa

[jcubic]

Yes, I've seen that plugin, was not sure if it would help me. Does the sw file compiled?

[slorber]

Yes it's comppiled in a postBuild plugin lifecycle hook. Note you don't necessarily have to do this. In our case we do this because we use modern syntax in it, but you can also write syntax that works directly in browsers without having to downgrade syntax.

Compilation is not mandatory, and if you do compile, you can do it with the tools of your choice (not even necessarily webpack/Rspack like us)

But here's our pwa plugin code reusing our compilation infrastructure

    async postBuild(props) {
      const swSourceFileTest = /\.m?js$/;

      const ProgressBarPlugin = await getProgressBarPlugin({
        currentBundler: props.currentBundler,
      });

      const swWebpackConfig: Configuration = {
        entry: require.resolve('./sw.js'),
        output: {
          path: outDir,
          filename: 'sw.js',
          publicPath: baseUrl,
        },
        target: 'webworker',
        mode: debug ? 'development' : 'production',
        devtool: debug ? 'source-map' : false,
        optimization: {
          splitChunks: false,
          minimize: !debug,
          // See https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
          minimizer: debug
            ? []
            : await getMinimizers({
                faster: props.siteConfig.future.experimental_faster,
                currentBundler: props.currentBundler,
              }),
        },
        plugins: [
          new props.currentBundler.instance.EnvironmentPlugin({
            // Fallback value required with Webpack 5
            PWA_SW_CUSTOM: swCustom ?? '',
          }),
          new ProgressBarPlugin({
            name: 'Service Worker',
            color: 'red',
          }),
        ],
        module: {
          rules: [
            {
              test: swSourceFileTest,
              exclude: /node_modules/,
              use: getSWBabelLoader(),
            },
          ],
        },
      };

      await compile({
        configs: [swWebpackConfig],
        currentBundler: props.currentBundler,
      });

      const swDest = path.resolve(props.outDir, 'sw.js');

      await injectManifest({
        ...injectManifestConfig,
        globPatterns: [
          '**/*.{js,json,css,html}',
          '**/*.{png,jpg,jpeg,gif,svg,ico}',
          '**/*.{woff,woff2,eot,ttf,otf}',
          // @ts-expect-error: internal API?
          ...((injectManifest.globPatterns as string[] | undefined) ?? []),
        ],
        // Those attributes are not overrideable
        swDest,
        swSrc: swDest,
        globDirectory: props.outDir,
      });
    },