fix: service worker is only registered once user logs in

src/app/app.module.ts

@@ -26,7 +26,10 @@ import { SessionModule } from "./core/session/session.module";
 import { LatestChangesModule } from "./core/latest-changes/latest-changes.module";
 
 import { ChildrenModule } from "./child-dev-project/children/children.module";
-import { ServiceWorkerModule } from "@angular/service-worker";
+import {
+  ServiceWorkerModule,
+  SwRegistrationOptions,
+} from "@angular/service-worker";
 import { environment } from "../environments/environment";
 import { LoggingErrorHandler } from "./core/logging/logging-error-handler";
 import { AnalyticsService } from "./core/analytics/analytics.service";
@@ -72,6 +75,9 @@ import { ProgressDashboardWidgetModule } from "./features/progress-dashboard-wid
 import { ReportingModule } from "./features/reporting/reporting.module";
 import { RouterModule } from "@angular/router";
 import { TodosModule } from "./features/todos/todos.module";
+import { SessionService } from "./core/session/session-service/session.service";
+import { waitForChangeTo } from "./core/session/session-states/session-utils";
+import { LoginState } from "./core/session/session-states/login-state.enum";
 
 /**
  * Main entry point of the application.
@@ -82,9 +88,7 @@ import { TodosModule } from "./features/todos/todos.module";
   declarations: [AppComponent],
   imports: [
     // Global Angular modules
-    ServiceWorkerModule.register("ngsw-worker.js", {
-      enabled: environment.production,
-    }),
+    ServiceWorkerModule.register("ngsw-worker.js"),
     Angulartics2Module.forRoot({
       developerMode: !environment.production,
     }),
@@ -141,6 +145,15 @@ import { TodosModule } from "./features/todos/todos.module";
       provide: MAT_DATE_FORMATS,
       useValue: DATE_FORMATS,
     },
+    {
+      provide: SwRegistrationOptions,
+      useFactory: (session: SessionService) => ({
+        enabled: environment.production,
+        registrationStrategy: () =>
+          session.loginState.pipe(waitForChangeTo(LoginState.LOGGED_IN)),
+      }),
+      deps: [SessionService],
+    },
   ],
   bootstrap: [AppComponent],
 })

src/app/utils/database-testing.module.ts

@@ -10,6 +10,7 @@ import { AppModule } from "../app.module";
 import { ComponentRegistry } from "../dynamic-components";
 import { ConfigurableEnumService } from "../core/configurable-enum/configurable-enum.service";
 import { createTestingConfigurableEnumService } from "../core/configurable-enum/configurable-enum-testing";
+import { SwRegistrationOptions } from "@angular/service-worker";
 
 /**
  * Utility module that creates a simple environment where a correctly configured database and session is set up.
@@ -30,6 +31,7 @@ import { createTestingConfigurableEnumService } from "../core/configurable-enum/
       provide: ConfigurableEnumService,
       useValue: createTestingConfigurableEnumService(),
     },
+    { provide: SwRegistrationOptions, useValue: { enabled: false } },
   ],
 })
 export class DatabaseTestingModule {

src/app/utils/mocked-testing.module.ts

@@ -22,6 +22,7 @@ import { AppModule } from "../app.module";
 import { ComponentRegistry } from "../dynamic-components";
 import { ConfigurableEnumService } from "../core/configurable-enum/configurable-enum.service";
 import { createTestingConfigurableEnumService } from "../core/configurable-enum/configurable-enum-testing";
+import { SwRegistrationOptions } from "@angular/service-worker";
 
 export const TEST_USER = "test";
 export const TEST_PASSWORD = "pass";
@@ -48,6 +49,7 @@ export const TEST_PASSWORD = "pass";
     ReactiveFormsModule,
   ],
   providers: [
+    { provide: SwRegistrationOptions, useValue: { enabled: false } },
     {
       provide: AnalyticsService,
       useValue: { eventTrack: () => undefined },