refactor(service-worker): pull less RxJS symbols (angular#60657)

In this commit, we reduce the number of imported RxJS symbols since they are redundant.

- We replace `merge` with a manual observable because `merge` internally pulls in `from()`.
- We remove `defer` and `throwError`, replacing them with `new Observable(s => s.error(..))`.
- We replace `toPromise()` with `new Promise`, as `toPromise()` is deprecated.
- We convert `readyToRegister` to a promise to avoid using RxJS operators like `delay`.

PR Close angular#60657

Author: arturovt

goldens/public-api/service-worker/index.api.md

@@ -6,6 +6,7 @@
 
 import { EnvironmentProviders } from '@angular/core';
 import * as i0 from '@angular/core';
+import { Injector } from '@angular/core';
 import { ModuleWithProviders } from '@angular/core';
 import { Observable } from 'rxjs';
 

packages/service-worker/src/low_level.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {concat, ConnectableObservable, defer, Observable, of, throwError} from 'rxjs';
-import {filter, map, publish, switchMap, take, tap} from 'rxjs/operators';
+import {ApplicationRef, type Injector} from '@angular/core';
+import {Observable, Subject} from 'rxjs';
+import {filter, map, switchMap, take} from 'rxjs/operators';
 
 export const ERR_SW_NOT_SUPPORTED = 'Service workers are disabled or not supported by this browser';
 
@@ -125,19 +126,6 @@ type OperationCompletedEvent =
       error: string;
     };
 
-function errorObservable(message: string): Observable<any> {
-  return defer(() => throwError(new Error(message)));
-}
-
-// Manually creating the observable imports fewer symbols
-// from RxJS than using `fromEvent(...)`.
-const fromEvent = <T extends Event>(serviceWorker: ServiceWorkerContainer, eventName: string) =>
-  new Observable<T>((subscriber) => {
-    const onEvent: EventListener = (event) => subscriber.next(event as T);
-    serviceWorker.addEventListener(eventName, onEvent);
-    return () => serviceWorker.removeEventListener(eventName, onEvent);
-  });
-
 /**
  * @publicApi
  */
@@ -148,44 +136,70 @@ export class NgswCommChannel {
 
   readonly events: Observable<TypedEvent>;
 
-  constructor(private serviceWorker: ServiceWorkerContainer | undefined) {
+  constructor(
+    private serviceWorker: ServiceWorkerContainer | undefined,
+    injector?: Injector,
+  ) {
     if (!serviceWorker) {
-      this.worker = this.events = this.registration = errorObservable(ERR_SW_NOT_SUPPORTED);
+      this.worker =
+        this.events =
+        this.registration =
+          new Observable<never>((subscriber) => subscriber.error(new Error(ERR_SW_NOT_SUPPORTED)));
     } else {
-      const controllerChangeEvents = fromEvent<Event>(serviceWorker, 'controllerchange');
-      const controllerChanges = controllerChangeEvents.pipe(map(() => serviceWorker.controller));
-      const currentController = defer(() => of(serviceWorker.controller));
-      const controllerWithChanges = concat(currentController, controllerChanges);
-
-      this.worker = controllerWithChanges.pipe(filter((c): c is ServiceWorker => !!c));
+      let currentWorker: ServiceWorker | null = null;
+      const workerSubject = new Subject<ServiceWorker>();
+      this.worker = new Observable((subscriber) => {
+        if (currentWorker !== null) {
+          subscriber.next(currentWorker);
+        }
+        return workerSubject.subscribe((v) => subscriber.next(v));
+      });
+      const updateController = () => {
+        const {controller} = serviceWorker;
+        if (controller === null) {
+          return;
+        }
+        currentWorker = controller;
+        workerSubject.next(currentWorker);
+      };
+      serviceWorker.addEventListener('controllerchange', updateController);
+      updateController();
 
       this.registration = <Observable<ServiceWorkerRegistration>>(
         this.worker.pipe(switchMap(() => serviceWorker.getRegistration()))
       );
 
-      const rawEvents = fromEvent<MessageEvent>(serviceWorker, 'message');
-      const rawEventPayload = rawEvents.pipe(map((event) => event.data));
-      const eventsUnconnected = rawEventPayload.pipe(filter((event) => event && event.type));
-      const events = eventsUnconnected.pipe(publish()) as ConnectableObservable<IncomingEvent>;
-      events.connect();
-
-      this.events = events;
+      const _events = new Subject<TypedEvent>();
+      this.events = _events.asObservable();
+
+      const messageListener = (event: MessageEvent) => {
+        const {data} = event;
+        if (data?.type) {
+          _events.next(data);
+        }
+      };
+      serviceWorker.addEventListener('message', messageListener);
+
+      // The injector is optional to avoid breaking changes.
+      const appRef = injector?.get(ApplicationRef, null, {optional: true});
+      appRef?.onDestroy(() => {
+        serviceWorker.removeEventListener('controllerchange', updateController);
+        serviceWorker.removeEventListener('message', messageListener);
+      });
     }
   }
 
   postMessage(action: string, payload: Object): Promise<void> {
-    return this.worker
-      .pipe(
-        take(1),
-        tap((sw: ServiceWorker) => {
-          sw.postMessage({
-            action,
-            ...payload,
-          });
-        }),
-      )
-      .toPromise()
-      .then(() => undefined);
+    return new Promise<void>((resolve) => {
+      this.worker.pipe(take(1)).subscribe((sw) => {
+        sw.postMessage({
+          action,
+          ...payload,
+        });
+
+        resolve();
+      });
+    });
   }
 
   postMessageWithOperation(
@@ -217,18 +231,23 @@ export class NgswCommChannel {
   }
 
   waitForOperationCompleted(nonce: number): Promise<boolean> {
-    return this.eventsOfType<OperationCompletedEvent>('OPERATION_COMPLETED')
-      .pipe(
-        filter((event) => event.nonce === nonce),
-        take(1),
-        map((event) => {
-          if (event.result !== undefined) {
-            return event.result;
-          }
-          throw new Error(event.error!);
-        }),
-      )
-      .toPromise() as Promise<boolean>;
+    return new Promise<boolean>((resolve, reject) => {
+      this.eventsOfType<OperationCompletedEvent>('OPERATION_COMPLETED')
+        .pipe(
+          filter((event) => event.nonce === nonce),
+          take(1),
+          map((event) => {
+            if (event.result !== undefined) {
+              return event.result;
+            }
+            throw new Error(event.error!);
+          }),
+        )
+        .subscribe({
+          next: resolve,
+          error: reject,
+        });
+    });
   }
 
   get isEnabled(): boolean {

packages/service-worker/src/provider.ts

@@ -7,78 +7,75 @@
  */
 
 import {
-  APP_INITIALIZER,
   ApplicationRef,
   EnvironmentProviders,
+  inject,
   InjectionToken,
   Injector,
   makeEnvironmentProviders,
   NgZone,
+  provideAppInitializer,
 } from '@angular/core';
-import {merge, from, Observable, of} from 'rxjs';
-import {delay, take} from 'rxjs/operators';
+import type {Observable} from 'rxjs';
 
 import {NgswCommChannel} from './low_level';
 import {SwPush} from './push';
 import {SwUpdate} from './update';
 
 export const SCRIPT = new InjectionToken<string>(ngDevMode ? 'NGSW_REGISTER_SCRIPT' : '');
 
-export function ngswAppInitializer(
-  injector: Injector,
-  script: string,
-  options: SwRegistrationOptions,
-): Function {
-  return () => {
-    if (typeof ngServerMode !== 'undefined' && ngServerMode) {
-      return;
-    }
+export function ngswAppInitializer(): void {
+  if (typeof ngServerMode !== 'undefined' && ngServerMode) {
+    return;
+  }
 
-    if (!('serviceWorker' in navigator && options.enabled !== false)) {
-      return;
-    }
+  const options = inject(SwRegistrationOptions);
 
-    const ngZone = injector.get(NgZone);
-    const appRef = injector.get(ApplicationRef);
+  if (!('serviceWorker' in navigator && options.enabled !== false)) {
+    return;
+  }
 
-    // Set up the `controllerchange` event listener outside of
-    // the Angular zone to avoid unnecessary change detections,
-    // as this event has no impact on view updates.
-    ngZone.runOutsideAngular(() => {
-      // Wait for service worker controller changes, and fire an INITIALIZE action when a new SW
-      // becomes active. This allows the SW to initialize itself even if there is no application
-      // traffic.
-      const sw = navigator.serviceWorker;
-      const onControllerChange = () => sw.controller?.postMessage({action: 'INITIALIZE'});
+  const script = inject(SCRIPT);
+  const ngZone = inject(NgZone);
+  const appRef = inject(ApplicationRef);
 
-      sw.addEventListener('controllerchange', onControllerChange);
+  // Set up the `controllerchange` event listener outside of
+  // the Angular zone to avoid unnecessary change detections,
+  // as this event has no impact on view updates.
+  ngZone.runOutsideAngular(() => {
+    // Wait for service worker controller changes, and fire an INITIALIZE action when a new SW
+    // becomes active. This allows the SW to initialize itself even if there is no application
+    // traffic.
+    const sw = navigator.serviceWorker;
+    const onControllerChange = () => sw.controller?.postMessage({action: 'INITIALIZE'});
 
-      appRef.onDestroy(() => {
-        sw.removeEventListener('controllerchange', onControllerChange);
-      });
+    sw.addEventListener('controllerchange', onControllerChange);
+
+    appRef.onDestroy(() => {
+      sw.removeEventListener('controllerchange', onControllerChange);
     });
+  });
 
-    let readyToRegister$: Observable<unknown>;
+  // Run outside the Angular zone to avoid preventing the app from stabilizing (especially
+  // given that some registration strategies wait for the app to stabilize).
+  ngZone.runOutsideAngular(() => {
+    let readyToRegister: Promise<void>;
 
-    if (typeof options.registrationStrategy === 'function') {
-      readyToRegister$ = options.registrationStrategy();
+    const {registrationStrategy} = options;
+    if (typeof registrationStrategy === 'function') {
+      readyToRegister = new Promise((resolve) => registrationStrategy().subscribe(() => resolve()));
     } else {
-      const [strategy, ...args] = (
-        options.registrationStrategy || 'registerWhenStable:30000'
-      ).split(':');
+      const [strategy, ...args] = (registrationStrategy || 'registerWhenStable:30000').split(':');
 
       switch (strategy) {
         case 'registerImmediately':
-          readyToRegister$ = of(null);
+          readyToRegister = Promise.resolve();
           break;
         case 'registerWithDelay':
-          readyToRegister$ = delayWithTimeout(+args[0] || 0);
+          readyToRegister = delayWithTimeout(+args[0] || 0);
           break;
         case 'registerWhenStable':
-          const whenStable$ = from(injector.get(ApplicationRef).whenStable());
-          readyToRegister$ = !args[0]
-            ? whenStable$
-            : merge(whenStable$, delayWithTimeout(+args[0]));
+          readyToRegister = Promise.race([appRef.whenStable(), delayWithTimeout(+args[0])]);
           break;
         default:
           // Unknown strategy.
@@ -89,30 +86,28 @@ export function ngswAppInitializer(
     }
 
     // Don't return anything to avoid blocking the application until the SW is registered.
-    // Also, run outside the Angular zone to avoid preventing the app from stabilizing (especially
-    // given that some registration strategies wait for the app to stabilize).
     // Catch and log the error if SW registration fails to avoid uncaught rejection warning.
-    ngZone.runOutsideAngular(() =>
-      readyToRegister$
-        .pipe(take(1))
-        .subscribe(() =>
-          navigator.serviceWorker
-            .register(script, {scope: options.scope})
-            .catch((err) => console.error('Service worker registration failed with:', err)),
-        ),
+    readyToRegister.then(() =>
+      navigator.serviceWorker
+        .register(script, {scope: options.scope})
+        .catch((err) => console.error('Service worker registration failed with:', err)),
     );
-  };
+  });
 }
 
-function delayWithTimeout(timeout: number): Observable<unknown> {
-  return of(null).pipe(delay(timeout));
+function delayWithTimeout(timeout: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
 }
 
-export function ngswCommChannelFactory(opts: SwRegistrationOptions): NgswCommChannel {
+export function ngswCommChannelFactory(
+  opts: SwRegistrationOptions,
+  injector: Injector,
+): NgswCommChannel {
   const isBrowser = !(typeof ngServerMode !== 'undefined' && ngServerMode);
 
   return new NgswCommChannel(
     isBrowser && opts.enabled !== false ? navigator.serviceWorker : undefined,
+    injector,
   );
 }
 
@@ -205,13 +200,8 @@ export function provideServiceWorker(
     {
       provide: NgswCommChannel,
       useFactory: ngswCommChannelFactory,
-      deps: [SwRegistrationOptions],
-    },
-    {
-      provide: APP_INITIALIZER,
-      useFactory: ngswAppInitializer,
-      deps: [Injector, SCRIPT, SwRegistrationOptions],
-      multi: true,
+      deps: [SwRegistrationOptions, Injector],
     },
+    provideAppInitializer(ngswAppInitializer),
   ]);
 }