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

This commit is contained in:
Ward Bell 2017-04-04 14:24:24 -06:00 committed by Hans
parent c530c5d317
commit 0799f184dc
4 changed files with 232 additions and 153 deletions

View File

@ -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] }];

View File

@ -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
]

View File

@ -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();
}
}

View File

@ -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); }
}