fix(aio): v2 - when browser lacks service worker, disable sw feature

aio/src/app/sw-updates/noop-ng-service-worker.ts

@@ -0,0 +1,35 @@
+// Alternative to NgServiceWorker when the browser doesn't support NgServiceWorker
+//
+// Many browsers do not support ServiceWorker (e.g, Safari).
+// The Angular NgServiceWorker assumes that the browser supports ServiceWorker
+// and starts talking to it immediately in its constructor without checking if it exists.
+// Merely injecting the `NgServiceWorker` is an exception in any browser w/o ServiceWorker.
+//
+// Solution: when the browser doesn't support service worker and a class injects `NgServiceWorker`
+// substitute the inert `NoopNgServiceWorker`.
+
+import { Injector } from '@angular/core';
+import { NgServiceWorker } from '@angular/service-worker';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+export class NoopNgServiceWorker  {
+  // Service worker is supported if `navigator['serviceWorker'] is defined.
+  isServiceWorkerSupported = !!navigator['serviceWorker'];
+
+  checkForUpdate() { return of(false); }
+  activateUpdate(version: string) { return of(false); }
+}
+
+export abstract class NgServiceWorkerForReals {}
+
+export function NgServiceWorkerFactory(injector: Injector, nsw: NoopNgServiceWorker) {
+  return nsw.isServiceWorkerSupported ? injector.get(NgServiceWorkerForReals) : nsw;
+}
+
+export const noopNgServiceWorkerProviders = [
+    NoopNgServiceWorker,
+    { provide: NgServiceWorkerForReals, useClass: NgServiceWorker },
+    { provide: NgServiceWorker, useFactory: NgServiceWorkerFactory,
+        deps: [Injector, NoopNgServiceWorker] }];

aio/src/app/sw-updates/sw-updates.module.ts

@@ -2,16 +2,17 @@ import { NgModule } from '@angular/core';
 import { MdSnackBarModule } from '@angular/material';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
+import { noopNgServiceWorkerProviders } from './noop-ng-service-worker';
 import { SwUpdateNotificationsService } from './sw-update-notifications.service';
 import { SwUpdatesService } from './sw-updates.service';
 
-
 @NgModule({
   imports: [
     MdSnackBarModule,
     ServiceWorkerModule
   ],
   providers: [
+    noopNgServiceWorkerProviders,
     SwUpdateNotificationsService,
     SwUpdatesService
   ]

aio/src/app/sw-updates/sw-updates.service.spec.ts

@@ -1,32 +1,41 @@
 import { ReflectiveInjector } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { NgServiceWorker } from '@angular/service-worker';
+import { of } from 'rxjs/observable/of';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/take';
 
+import { NgServiceWorkerForReals, NoopNgServiceWorker, noopNgServiceWorkerProviders } from './noop-ng-service-worker';
 import { SwUpdatesService } from './sw-updates.service';
 
-
 describe('SwUpdatesService', () => {
   let injector: ReflectiveInjector;
   let service: SwUpdatesService;
   let sw: MockNgServiceWorker;
+  let nsw: NoopNgServiceWorker;
   let checkInterval: number;
+  let isServiceWorkerSupportedInTest: boolean;
 
   // Helpers
   // NOTE:
   //  Because `SwUpdatesService` uses the `debounceTime` operator, it needs to be instantiated
   //  inside the `fakeAsync` zone (when `fakeAsync` is used for the test). Thus, we can't run
-  //   `setup()` in a `beforeEach()` block. We use the `run()` helper to call it inside each test's
-  //    zone.
+  //  `setup()` in a `beforeEach()` block. We use the `run()` helper to call it inside each test' zone.
   const setup = () => {
     injector = ReflectiveInjector.resolveAndCreate([
-      { provide: NgServiceWorker, useClass: MockNgServiceWorker },
+      noopNgServiceWorkerProviders,
+      { provide: NgServiceWorkerForReals, useClass: MockNgServiceWorker },
+      { provide: NoopNgServiceWorker, useClass: MockNoopNgServiceWorker },
       SwUpdatesService
     ]);
+
+    nsw = injector.get(NoopNgServiceWorker);
+    // Set whether service worker exists before getting the SwUpdatesService!
+    nsw.isServiceWorkerSupported = isServiceWorkerSupportedInTest;
+
     service = injector.get(SwUpdatesService);
-    sw = injector.get(NgServiceWorker);
     checkInterval = (service as any).checkInterval;
+    sw = injector.get(NgServiceWorkerForReals);
   };
   const tearDown = () => service.ngOnDestroy();
   const run = specFn => () => {
@@ -35,11 +44,23 @@ describe('SwUpdatesService', () => {
     tearDown();
   };
 
+  describe('when service worker is supported', () => {
+
+    beforeEach(() => {
+      isServiceWorkerSupportedInTest = true;
+    });
 
     it('should create', run(() => {
       expect(service).toBeTruthy();
     }));
 
+    it('should call the NgServiceWorker', run(() => {
+      // does not call the Angular ServiceWorker
+      expect(sw.checkForUpdate).toHaveBeenCalled();
+      // calls the noop Angular ServiceWorker instead
+      expect(nsw.checkForUpdate).not.toHaveBeenCalled();
+    }));
+
     it('should immediatelly check for updates when instantiated', run(() => {
       expect(sw.checkForUpdate).toHaveBeenCalled();
     }));
@@ -191,7 +212,7 @@ describe('SwUpdatesService', () => {
         })))
       );
 
-    it('should emit not emit a vew value after activation if already `false`',
+      it('should not emit a new value after activation if already `false`',
         fakeAsync(run(withSubscription(() => {
           sw.$$checkForUpdateSubj.next(false);
           expect(emittedValues).toEqual([false]);
@@ -205,8 +226,30 @@ describe('SwUpdatesService', () => {
     });
   });
 
+  describe('when service worker isn\'t supported (Safari)', () => {
+
+    beforeEach(() => {
+      isServiceWorkerSupportedInTest = false;
+    });
+
+    it('should create', run(() => {
+      expect(service).toBeTruthy();
+    }));
+
+    it('should call the NoopNgServiceWorker', run(() => {
+      // does not call the Angular ServiceWorker
+      expect(sw.checkForUpdate).not.toHaveBeenCalled();
+      // calls the noop Angular ServiceWorker instead
+      expect(nsw.checkForUpdate).toHaveBeenCalled();
+    }));
+
+  });
+
+});
+
 // Mocks
 class MockNgServiceWorker {
+
   $$activateUpdateSubj = new Subject<boolean>();
   $$checkForUpdateSubj = new Subject<boolean>();
 
@@ -216,3 +259,12 @@ class MockNgServiceWorker {
   checkForUpdate = jasmine.createSpy('MockNgServiceWorker.checkForUpdate')
                           .and.callFake(() => this.$$checkForUpdateSubj.take(1));
 }
+
+class MockNoopNgServiceWorker extends NoopNgServiceWorker {
+  constructor() {
+    super();
+    this.isServiceWorkerSupported = true; // assume it is by default
+    spyOn(this, 'activateUpdate').and.callThrough();
+    spyOn(this, 'checkForUpdate').and.callThrough();
+  }
+}

aio/src/app/sw-updates/sw-updates.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Injector, OnDestroy } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { NgServiceWorker } from '@angular/service-worker';
 import { Observable } from 'rxjs/Observable';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
@@ -36,13 +36,9 @@ export class SwUpdatesService implements OnDestroy {
   private onDestroy = new Subject();
   private checkForUpdateSubj = new Subject();
   private isUpdateAvailableSubj = new ReplaySubject<boolean>(1);
-  private sw: NgServiceWorker | NullServiceWorker = null;
   isUpdateAvailable = this.isUpdateAvailableSubj.distinctUntilChanged();
-  isServiceWorkAvailable = !!navigator['serviceWorker'];
-
-  constructor(injector: Injector) {
-    this.sw = this.isServiceWorkAvailable ? injector.get(NgServiceWorker) : new NullServiceWorker();
 
+  constructor(private sw: NgServiceWorker) {
     this.checkForUpdateSubj
         .debounceTime(this.checkInterval)
         .takeUntil(this.onDestroy)
@@ -78,8 +74,3 @@ export class SwUpdatesService implements OnDestroy {
         .subscribe(v => this.isUpdateAvailableSubj.next(v));
   }
 }
-
-class NullServiceWorker {
-  checkForUpdate() { return Observable.of(false); }
-  activateUpdate(version: string) { return Observable.of(false); }
-}