diff --git a/aio/content/guide/service-worker-config.md b/aio/content/guide/service-worker-config.md index d2293d0e48..e5ba6e3afe 100644 --- a/aio/content/guide/service-worker-config.md +++ b/aio/content/guide/service-worker-config.md @@ -23,6 +23,7 @@ Unless otherwise noted, patterns use a limited glob format: * `**` matches 0 or more path segments. * `*` matches 0 or more characters excluding `/`. +* `?` matches exactly one character excluding `/`. * The `!` prefix marks the pattern as being negative, meaning that only files that don't match the pattern will be included. Example patterns: @@ -106,7 +107,7 @@ This section describes the resources to cache, broken up into three groups. * `versionedFiles` has been deprecated. As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. * `urls` includes both URLs and URL patterns that will be matched at runtime. These resources are not fetched directly and do not have content hashes, but they will be cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service.
- _(Negative glob patterns are not supported.)_ + _(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_ ## `dataGroups` @@ -133,7 +134,7 @@ Similar to `assetGroups`, every data group has a `name` which uniquely identifie ### `urls` A list of URL patterns. URLs that match these patterns will be cached according to this data group's policy.
- _(Negative glob patterns are not supported.)_ + _(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_ ### `version` Occasionally APIs change formats in a way that is not backward-compatible. A new version of the app may not be compatible with the old API format and thus may not be compatible with existing cached resources from that API. diff --git a/packages/service-worker/config/src/generator.ts b/packages/service-worker/config/src/generator.ts index fc9dfb31a6..659e615afd 100644 --- a/packages/service-worker/config/src/generator.ts +++ b/packages/service-worker/config/src/generator.ts @@ -75,7 +75,7 @@ export class Generator { installMode: group.installMode || 'prefetch', updateMode: group.updateMode || group.installMode || 'prefetch', urls: matchedFiles.map(url => joinUrls(this.baseHref, url)), - patterns: (group.resources.urls || []).map(url => urlToRegex(url, this.baseHref)), + patterns: (group.resources.urls || []).map(url => urlToRegex(url, this.baseHref, true)), }; })); } @@ -84,7 +84,7 @@ export class Generator { return (config.dataGroups || []).map(group => { return { name: group.name, - patterns: group.urls.map(url => urlToRegex(url, this.baseHref)), + patterns: group.urls.map(url => urlToRegex(url, this.baseHref, true)), strategy: group.cacheConfig.strategy || 'performance', maxSize: group.cacheConfig.maxSize, maxAge: parseDurationToMs(group.cacheConfig.maxAge), @@ -132,12 +132,12 @@ function matches(file: string, patterns: {positive: boolean, regex: RegExp}[]): return res; } -function urlToRegex(url: string, baseHref: string): string { +function urlToRegex(url: string, baseHref: string, literalQuestionMark?: boolean): string { if (!url.startsWith('/') && url.indexOf('://') === -1) { url = joinUrls(baseHref, url); } - return globToRegex(url); + return globToRegex(url, literalQuestionMark); } function joinUrls(a: string, b: string): string { diff --git a/packages/service-worker/config/src/glob.ts b/packages/service-worker/config/src/glob.ts index e886296cd2..bfd22236f1 100644 --- a/packages/service-worker/config/src/glob.ts +++ b/packages/service-worker/config/src/glob.ts @@ -6,17 +6,26 @@ * found in the LICENSE file at https://angular.io/license */ -const WILD_SINGLE = '[^\\/]*'; +const QUESTION_MARK = '[^/]'; +const WILD_SINGLE = '[^/]*'; const WILD_OPEN = '(?:.+\\/)?'; -const TO_ESCAPE = [ +const TO_ESCAPE_BASE = [ {replace: /\./g, with: '\\.'}, - {replace: /\?/g, with: '\\?'}, {replace: /\+/g, with: '\\+'}, {replace: /\*/g, with: WILD_SINGLE}, ]; +const TO_ESCAPE_WILDCARD_QM = [ + ...TO_ESCAPE_BASE, + {replace: /\?/g, with: QUESTION_MARK}, +]; +const TO_ESCAPE_LITERAL_QM = [ + ...TO_ESCAPE_BASE, + {replace: /\?/g, with: '\\?'}, +]; -export function globToRegex(glob: string): string { +export function globToRegex(glob: string, literalQuestionMark = false): string { + const toEscape = literalQuestionMark ? TO_ESCAPE_LITERAL_QM : TO_ESCAPE_WILDCARD_QM; const segments = glob.split('/').reverse(); let regex: string = ''; while (segments.length > 0) { @@ -28,7 +37,7 @@ export function globToRegex(glob: string): string { regex += '.*'; } } else { - const processed = TO_ESCAPE.reduce( + const processed = toEscape.reduce( (segment, escape) => segment.replace(escape.replace, escape.with), segment); regex += processed; if (segments.length > 0) { diff --git a/packages/service-worker/config/test/generator_spec.ts b/packages/service-worker/config/test/generator_spec.ts index fd614d1215..9932524654 100644 --- a/packages/service-worker/config/test/generator_spec.ts +++ b/packages/service-worker/config/test/generator_spec.ts @@ -14,6 +14,9 @@ import {MockFilesystem} from '../testing/mock'; it('generates a correct config', done => { const fs = new MockFilesystem({ '/index.html': 'This is a test', + '/main.css': 'This is a CSS file', + '/main.js': 'This is a JS file', + '/main.ts': 'This is a TS file', '/test.txt': 'Another test', '/foo/test.html': 'Another test', '/ignored/x.html': 'should be ignored', @@ -28,8 +31,9 @@ import {MockFilesystem} from '../testing/mock'; name: 'test', resources: { files: [ - '/**/*.html', '!/ignored/**', - // '/*.html', + '/**/*.html', + '/**/*.?s', + '!/ignored/**', ], versionedFiles: [ '/**/*.txt', @@ -46,6 +50,7 @@ import {MockFilesystem} from '../testing/mock'; urls: [ '/api/**', 'relapi/**', + 'https://example.com/**/*?with+escaped+chars', ], cacheConfig: { maxSize: 100, @@ -56,8 +61,9 @@ import {MockFilesystem} from '../testing/mock'; navigationUrls: [ '/included/absolute/**', '!/excluded/absolute/**', - '/included/some/url?with+escaped+chars', + '/included/some/url/with+escaped+chars', '!excluded/relative/*.txt', + '!/api/?*', 'http://example.com/included', '!http://example.com/excluded', ], @@ -76,17 +82,23 @@ import {MockFilesystem} from '../testing/mock'; urls: [ '/test/foo/test.html', '/test/index.html', + '/test/main.js', + '/test/main.ts', '/test/test.txt', ], patterns: [ '\\/absolute\\/.*', '\\/some\\/url\\?with\\+escaped\\+chars', - '\\/test\\/relative\\/[^\\/]*\\.txt', + '\\/test\\/relative\\/[^/]*\\.txt', ] }], dataGroups: [{ name: 'other', - patterns: ['\\/api\\/.*', '\\/test\\/relapi\\/.*'], + patterns: [ + '\\/api\\/.*', + '\\/test\\/relapi\\/.*', + 'https:\\/\\/example\\.com\\/(?:.+\\/)?[^/]*\\?with\\+escaped\\+chars', + ], strategy: 'performance', maxSize: 100, maxAge: 259200000, @@ -96,14 +108,17 @@ import {MockFilesystem} from '../testing/mock'; navigationUrls: [ {positive: true, regex: '^\\/included\\/absolute\\/.*$'}, {positive: false, regex: '^\\/excluded\\/absolute\\/.*$'}, - {positive: true, regex: '^\\/included\\/some\\/url\\?with\\+escaped\\+chars$'}, - {positive: false, regex: '^\\/test\\/excluded\\/relative\\/[^\\/]*\\.txt$'}, + {positive: true, regex: '^\\/included\\/some\\/url\\/with\\+escaped\\+chars$'}, + {positive: false, regex: '^\\/test\\/excluded\\/relative\\/[^/]*\\.txt$'}, + {positive: false, regex: '^\\/api\\/[^/][^/]*$'}, {positive: true, regex: '^http:\\/\\/example\\.com\\/included$'}, {positive: false, regex: '^http:\\/\\/example\\.com\\/excluded$'}, ], hashTable: { '/test/foo/test.html': '18f6f8eb7b1c23d2bb61bff028b83d867a9e4643', '/test/index.html': 'a54d88e06612d820bc3be72877c74f257b561b19', + '/test/main.js': '41347a66676cdc0516934c76d9d13010df420f2c', + '/test/main.ts': '7d333e31f0bfc4f8152732bb211a93629484c035', '/test/test.txt': '18f6f8eb7b1c23d2bb61bff028b83d867a9e4643' } }); @@ -129,9 +144,9 @@ import {MockFilesystem} from '../testing/mock'; dataGroups: [], navigationUrls: [ {positive: true, regex: '^\\/.*$'}, - {positive: false, regex: '^\\/(?:.+\\/)?[^\\/]*\\.[^\\/]*$'}, - {positive: false, regex: '^\\/(?:.+\\/)?[^\\/]*__[^\\/]*$'}, - {positive: false, regex: '^\\/(?:.+\\/)?[^\\/]*__[^\\/]*\\/.*$'}, + {positive: false, regex: '^\\/(?:.+\\/)?[^/]*\\.[^/]*$'}, + {positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*$'}, + {positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$'}, ], hashTable: {} });