feat(worker): an 'external' plugin which supports caching resources that have no build-time hash

Author: alxhub

service-worker/worker/src/plugins/external/index.ts

@@ -0,0 +1,53 @@
+import {
+  FetchInstruction,
+  Operation,
+  Plugin,
+  PluginFactory,
+  VersionWorker,
+  VersionWorkerImpl,
+  cacheFromNetworkOp,
+  fetchFromCacheInstruction,
+} from '@angular/service-worker/worker';
+
+interface UrlConfig {
+  url: string;
+}
+
+interface ExternalManifest {
+  urls: UrlConfig[];
+}
+
+export interface ExternalContentCacheOptions {
+  manifestKey?: string;
+}
+
+export function ExternalContentCache(options?: ExternalContentCacheOptions): PluginFactory<ExternalPlugin> {
+  const manifestKey = (options && options.manifestKey) || 'external';
+  return (worker: VersionWorker) => new ExternalPlugin(worker as VersionWorkerImpl, manifestKey);
+}
+
+export class ExternalPlugin implements Plugin<ExternalPlugin> {
+  private cacheKey: string;
+
+  constructor(public worker: VersionWorkerImpl, public key: string) {
+    this.cacheKey = key === 'external' ? key : `external:${key}`;
+  }
+
+  private get externalManifest(): ExternalManifest {
+    return this.worker.manifest[this.key];
+  }
+
+  setup(operations: Operation[]) {
+    if (!this.externalManifest || !this.externalManifest.urls) {
+      return;
+    }
+    operations.push(...this
+      .externalManifest
+      .urls
+      .map(url => cacheFromNetworkOp(this.worker, url.url, this.cacheKey)));
+  }
+
+  fetch(req: Request, instructions: FetchInstruction[]): void {
+    instructions.unshift(fetchFromCacheInstruction(this.worker, req, this.cacheKey));
+  }
+}

service-worker/worker/src/test/e2e/harness/client/debug/full.txt

@@ -0,0 +1 @@
+This is full text.

service-worker/worker/src/test/e2e/harness/client/debug/ngsw-manifest.json

@@ -3,5 +3,10 @@
     "urls": {
       "/hello.txt": "test"
     }
+  },
+  "external": {
+    "urls": [
+      {"url": "http://localhost:8080/full.txt"}
+    ]
   }
 }

service-worker/worker/src/test/e2e/spec/sanity.e2e.ts

@@ -14,6 +14,11 @@ const SIMPLE_MANIFEST = {
       '/goodbye.txt': 'same',
     }
   },
+  external: {
+    urls: [
+      {url: 'http://localhost:8080/full.txt'},
+    ],
+  },
   push: {
     showNotifications: true
   }
@@ -108,6 +113,7 @@ describe('world sanity', () => {
     server.addResponse('/ngsw-manifest.json.js', '/* mocked */');
     server.addResponse('/ngsw-manifest.json', JSON.stringify(SIMPLE_MANIFEST));
     server.addResponse('/hello.txt', 'Hello world!');
+    server.addResponse('/full.txt', 'Cached initially!');
     server.addResponse('/goodbye.txt', 'Goodbye world!');
     po.installServiceWorker('/worker-test.js');
     po
@@ -125,6 +131,13 @@ describe('world sanity', () => {
       .then(result => expect(result).toBe('Hello world!'))
       .then(done), 2000);
   });
+  it('and cached /full.txt with full url', done => {
+    server.addResponse('/full.txt', 'Not cached?');
+    po
+      .request('http://localhost:8080/full.txt')
+      .then(result => expect(result).toBe('Cached initially!'))
+      .then(done);
+});
   it('worker responds to ping', done => {
     po
       .ping()
@@ -159,6 +172,7 @@ describe('world sanity', () => {
     server.addResponse('/ngsw-manifest.json', JSON.stringify(UPDATE_MANIFEST));
     server.addResponse('/hello.txt', 'Hola mundo!');
     server.addResponse('/goodbye.txt', 'Should not be re-fetched.');
+    server.addResponse('/full.txt', 'Should be reloaded');
     po
       .checkForUpdate()
       .then(updated => expect(updated).toBeTruthy())
@@ -168,6 +182,8 @@ describe('world sanity', () => {
       .then(result => expect(result).toBe('Hola mundo!'))
       .then(() => po.request('/goodbye.txt'))
       .then(result => expect(result).toBe('Goodbye world!'))
+      .then(() => po.request('http://localhost:8080/full.txt'))
+      .then(result => expect(result).toBe('Should be reloaded'))
       .then(() => done());
   });
 });

service-worker/worker/src/worker/builds/basic.ts

@@ -1,12 +1,14 @@
 import {bootstrapServiceWorker} from '../bootstrap';
 import {StaticContentCache} from '../../plugins/static';
+import {ExternalContentCache} from '../../plugins/external';
 import {RouteRedirection} from '../../plugins/routes';
 import {Push} from '../../plugins/push';
 
 bootstrapServiceWorker({
   manifestUrl: 'ngsw-manifest.json',
   plugins: [
     StaticContentCache(),
+    ExternalContentCache(),
     RouteRedirection(),
     Push(),
   ],

service-worker/worker/src/worker/builds/test.ts

@@ -1,5 +1,6 @@
 import {bootstrapServiceWorker} from '../bootstrap';
 import {StaticContentCache} from '../../plugins/static';
+import {ExternalContentCache} from '../../plugins/external';
 import {RouteRedirection} from '../../plugins/routes';
 import {Push} from '../../plugins/push';
 import {Verbosity, HttpHandler} from '../logging';
@@ -8,6 +9,7 @@ bootstrapServiceWorker({
   manifestUrl: '/ngsw-manifest.json',
   plugins: [
     StaticContentCache(),
+    ExternalContentCache(),
     RouteRedirection(),
     Push(),
   ],