Skip to content

feat(service-worker): add support for ? in SW config globbing #24105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gkalpak wants to merge 1 commit into from
Closed

feat(service-worker): add support for ? in SW config globbing #24105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions aio/content/guide/service-worker-config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.<br>
_(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`

Expand All @@ -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.<br>
_(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.
Expand Down
8 changes: 4 additions & 4 deletions packages/service-worker/config/src/generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
};
}));
}
Expand All @@ -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),
Expand Down Expand Up @@ -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 {
Expand Down
19 changes: 14 additions & 5 deletions packages/service-worker/config/src/glob.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down
35 changes: 25 additions & 10 deletions packages/service-worker/config/test/generator_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {MockFilesystem} from '../testing/mock';
it('generates a correct config', (done: DoneFn) => {
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',
Expand All @@ -28,8 +31,9 @@ import {MockFilesystem} from '../testing/mock';
name: 'test',
resources: {
files: [
'/**/*.html', '!/ignored/**',
// '/*.html',
'/**/*.html',
'/**/*.?s',
'!/ignored/**',
],
versionedFiles: [
'/**/*.txt',
Expand All @@ -46,6 +50,7 @@ import {MockFilesystem} from '../testing/mock';
urls: [
'/api/**',
'relapi/**',
'https://example.com/**/*?with+escaped+chars',
],
cacheConfig: {
maxSize: 100,
Expand All @@ -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',
],
Expand All @@ -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,
Expand All @@ -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'
}
});
Expand All @@ -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: {}
});
Expand Down