feat(service-worker): add support for configuring navigations URLs (#23339)

The ServiceWorker will redirect navigation requests that don't match any
`asset` or `data` group to the specified index file. The rules for a
request to be classified as a navigation request are as follows:
1. Its `mode` must be `navigation`.
2. It must accept a `text/html` response.
3. Its URL must match certain criteria (see below).

By default, a navigation request can have any URL except for:
1. URLs containing `__`.
2. URLs to files (i.e. containing a file extension in the last path
   segment).

While these rules are fine in many cases, sometimes it is desirable to
configure different rules for the URLs of navigation requests (e.g.
ignore specific URLs and pass them through to the server).

This commit adds support for specifying an optional `navigationUrls`
list in `ngsw-config.json`, which contains URLs or simple globs
(currently only recognizing `!`, `*` and `**`).
Only requests whose URLs match any of the positive URLs/patterns and
none of the negative ones (i.e. URLs/patterns starting with `!`) will be
considered navigation requests (and handled accordingly by the SW).

(This is an alternative implementation to #23025.)

Fixes #20404

PR Close #23339

packages/service-worker/worker/src/app-version.ts

@@ -13,7 +13,6 @@ import {DataGroup} from './data';
 import {Database} from './database';
 import {IdleScheduler} from './idle';
 import {Manifest} from './manifest';
-import {isNavigationRequest} from './util';
 
 
 /**
@@ -40,6 +39,12 @@ export class AppVersion implements UpdateSource {
    */
   private dataGroups: DataGroup[];
 
+  /**
+   * Requests to URLs that match any of the `include` RegExps and none of the `exclude` RegExps
+   * are considered navigation requests and handled accordingly.
+   */
+  private navigationUrls: {include: RegExp[], exclude: RegExp[]};
+
   /**
    * Tracks whether the manifest has encountered any inconsistencies.
    */
@@ -79,6 +84,14 @@ export class AppVersion implements UpdateSource {
                               config => new DataGroup(
                                   this.scope, this.adapter, config, this.database,
                                   `ngsw:${config.version}:data`));
+
+    // Create `include`/`exclude` RegExps for the `navigationUrls` declared in the manifest.
+    const includeUrls = manifest.navigationUrls.filter(spec => spec.positive);
+    const excludeUrls = manifest.navigationUrls.filter(spec => !spec.positive);
+    this.navigationUrls = {
+      include: includeUrls.map(spec => new RegExp(spec.regex)),
+      exclude: excludeUrls.map(spec => new RegExp(spec.regex)),
+    };
   }
 
   /**
@@ -151,15 +164,36 @@ export class AppVersion implements UpdateSource {
 
     // Next, check if this is a navigation request for a route. Detect circular
     // navigations by checking if the request URL is the same as the index URL.
-    if (isNavigationRequest(req, this.scope.registration.scope, this.adapter) &&
-        req.url !== this.manifest.index) {
+    if (req.url !== this.manifest.index && this.isNavigationRequest(req)) {
       // This was a navigation request. Re-enter `handleFetch` with a request for
       // the URL.
       return this.handleFetch(this.adapter.newRequest(this.manifest.index), context);
     }
+
     return null;
   }
 
+  /**
+   * Determine whether the request is a navigation request.
+   * Takes into account: Request mode, `Accept` header, `navigationUrls` patterns.
+   */
+  isNavigationRequest(req: Request): boolean {
+    if (req.mode !== 'navigate') {
+      return false;
+    }
+
+    if (!this.acceptsTextHtml(req)) {
+      return false;
+    }
+
+    const urlPrefix = this.scope.registration.scope.replace(/\/$/, '');
+    const url = req.url.startsWith(urlPrefix) ? req.url.substr(urlPrefix.length) : req.url;
+    const urlWithoutQueryOrHash = url.replace(/[?#].*$/, '');
+
+    return this.navigationUrls.include.some(regex => regex.test(urlWithoutQueryOrHash)) &&
+        !this.navigationUrls.exclude.some(regex => regex.test(urlWithoutQueryOrHash));
+  }
+
   /**
    * Check this version for a given resource with a particular hash.
    */
@@ -239,4 +273,16 @@ export class AppVersion implements UpdateSource {
    * Get the opaque application data which was provided with the manifest.
    */
   get appData(): Object|null { return this.manifest.appData || null; }
+
+  /**
+   * Check whether a request accepts `text/html` (based on the `Accept` header).
+   */
+  private acceptsTextHtml(req: Request): boolean {
+    const accept = req.headers.get('Accept');
+    if (accept === null) {
+      return false;
+    }
+    const values = accept.split(',');
+    return values.some(value => value.trim().toLowerCase() === 'text/html');
+  }
 }

packages/service-worker/worker/src/driver.ts

@@ -15,7 +15,6 @@ import {SwCriticalError} from './error';
 import {IdleScheduler} from './idle';
 import {Manifest, ManifestHash, hashManifest} from './manifest';
 import {MsgAny, isMsgActivateUpdate, isMsgCheckForUpdates} from './msg';
-import {isNavigationRequest} from './util';
 
 type ClientId = string;
 
@@ -551,13 +550,14 @@ export class Driver implements Debuggable, UpdateSource {
       // Check if there is an assigned client id.
       if (this.clientVersionMap.has(clientId)) {
         // There is an assignment for this client already.
-        let hash = this.clientVersionMap.get(clientId) !;
+        const hash = this.clientVersionMap.get(clientId) !;
+        let appVersion = this.lookupVersionByHash(hash, 'assignVersion');
 
         // Ordinarily, this client would be served from its assigned version. But, if this
         // request is a navigation request, this client can be updated to the latest
         // version immediately.
         if (this.state === DriverReadyState.NORMAL && hash !== this.latestHash &&
-            isNavigationRequest(event.request, this.scope.registration.scope, this.adapter)) {
+            appVersion.isNavigationRequest(event.request)) {
           // Update this client to the latest version immediately.
           if (this.latestHash === null) {
             throw new Error(`Invariant violated (assignVersion): latestHash was null`);
@@ -566,11 +566,11 @@ export class Driver implements Debuggable, UpdateSource {
           const client = await this.scope.clients.get(clientId);
 
           await this.updateClient(client);
-          hash = this.latestHash;
+          appVersion = this.lookupVersionByHash(this.latestHash, 'assignVersion');
         }
 
         // TODO: make sure the version is valid.
-        return this.lookupVersionByHash(hash, 'assignVersion');
+        return appVersion;
       } else {
         // This is the first time this client ID has been seen. Whether the SW is in a
         // state to handle new clients depends on the current readiness state, so check

packages/service-worker/worker/src/manifest.ts

@@ -16,6 +16,7 @@ export interface Manifest {
   index: string;
   assetGroups?: AssetGroupConfig[];
   dataGroups?: DataGroupConfig[];
+  navigationUrls: {positive: boolean, regex: string}[];
   hashTable: {[url: string]: string};
 }
 
@@ -40,4 +41,4 @@ export interface DataGroupConfig {
 
 export function hashManifest(manifest: Manifest): ManifestHash {
   return sha1(JSON.stringify(manifest));
-}
+}

packages/service-worker/worker/src/util.ts

@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Adapter} from './adapter';
-
-export function isNavigationRequest(req: Request, relativeTo: string, adapter: Adapter): boolean {
-  if (req.mode !== 'navigate') {
-    return false;
-  }
-  if (req.url.indexOf('__') !== -1) {
-    return false;
-  }
-  if (hasFileExtension(req.url, relativeTo, adapter)) {
-    return false;
-  }
-  if (!acceptsTextHtml(req)) {
-    return false;
-  }
-  return true;
-}
-
-function hasFileExtension(url: string, relativeTo: string, adapter: Adapter): boolean {
-  const path = adapter.parseUrl(url, relativeTo).path;
-  const lastSegment = path.split('/').pop() !;
-  return lastSegment.indexOf('.') !== -1;
-}
-
-function acceptsTextHtml(req: Request): boolean {
-  const accept = req.headers.get('Accept');
-  if (accept === null) {
-    return false;
-  }
-  const values = accept.split(',');
-  return values.some(value => value.trim().toLowerCase() === 'text/html');
-}