Service worker registration error

[bytrangle]

Your Environment

• Version used: Latest version from Master branch
• Operating System and version: Linux Mint
• Desktop Environment:
• Browser Name and version: Firefox 108.0.1

Current Behavior

When the app is bootstrapped, the service worker is registered according to src/main.ts

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(() => {
    if (
      'serviceWorker' in navigator &&
      (environment.production || environment.stage) &&
      !IS_ELECTRON
    ) {
      console.log('Registering Service worker');
      return navigator.serviceWorker.register('ngsw-worker.js');
  }
  .catch((err: any) => {
    console.log('Service Worker Registration Error');
    console.log(err);
  });

Looking at the console, there is an error with registering service worker and the catch clause is run. The error is:

TypeError: ServiceWorker script at http://localhost:4200/ngsw-worker.js for scope http://localhost:4200/ encountered an error during installation.

Expected Behavior

If you register it, you expect it to be successful, correct?

The service worker not being installed also means that this code block in the NotifyService is skipped:

    const svcReg =
      this._isServiceWorkerAvailable() &&
      (await navigator.serviceWorker.getRegistration('ngsw-worker.js'));
    console.log({ svcReg })
    if (svcReg && svcReg.showNotification) {
      // service worker also seems to need to request permission...
      // @see: https://github.com/johannesjo/super-productivity/issues/408
      const per = await Notification.requestPermission();
      // not supported for basic notifications so we delete them
      if (per === 'granted') {
        await svcReg.showNotification(title, {
          icon: 'assets/icons/icon-128x128.png',
          vibrate: [100, 50, 100],
          silent: false,
          data: {
            dateOfArrival: Date.now(),
            primaryKey: 1,
          },
          ...options,
          body,
        });
      }

Steps to Reproduce (for bugs)

1. In the terminal, run npm run serveProd. This is to ensure that we are in production environment and the app will register the service worker.
2. Open the app at http://localhost:4200.
3. Open the web console.
4. You should see an error for registering service worker.

Can you reproduce this reliably?

Yes

Console Output

Error Log (Desktop only)

[github-actions]

Thank you very much for opening up this issue! I am currently a bit overwhelmed by the many requests that arrive each week, so please forgive me, if I fail to respond personally. I am still very likely to at least skim read your request and I'll probably try to fix all (real) bugs if possible and I will likely review every single PR being made (please, give me a heads up if you intent to do so) and I will try to work on popular requests (please upvote via thumbs up on the original issue) whenever possible, but trying to respond to every single issue over the last years has been kind of draining and I need to adjust my approach for this project to remain fun for me and to make any progress with actually coding new stuff. Thanks for your understanding!

[bytrangle]

Update: I've discovered that the error was due to the ngsw-worker.js file not being generated. And service worker doesn't work with ng serve anyway, so I ran npm run build. The ngsw-worker file is not present in the dist/ directory either.

It turns out that in the angular.json file, you set servviceWorker to false for production mode. Is it the intention?

[johannesjo]

Service Worker is only run for web. If you Use buildFrontend:prodWeb everything should work fine.