Skip to content

Commit 25a465b

Browse files
henry-alakazhanghenry-alakazhang
committed
feat(service-worker): allow specifying maxAge for entire application
This commit adds an `applicationMaxAge` to the service worker configuration. When set, it will only assign a cached version to clients within the `maxAge`. Afterwards, it will ignored any expired application versions and fetch exclusively from the network. The default is `undefined`, for which the behaviour is the same as it currently is.
1 parent 95bee15 commit 25a465b

File tree

9 files changed

+91
-2
lines changed

9 files changed

+91
-2
lines changed

‎adev/src/content/ecosystem/service-workers/config.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ A request is considered to be a navigation request if:
330330
* The URL must not contain a file extension (that is, a `.`) in the last path segment
331331
* The URL must not contain `__`
332332

333-
HELPFUL: To configure whether navigation requests are sent through to the network or not, see the [navigationRequestStrategy](#navigationrequeststrategy) section.
333+
HELPFUL: To configure whether navigation requests are sent through to the network or not, see the [navigationRequestStrategy](#navigationrequeststrategy) section and [applicationMaxAge](#application-max-age) sections.
334334

335335
#### Matching navigation request URLs
336336

@@ -374,3 +374,7 @@ This optional property enables you to configure how the service worker handles n
374374
| `'freshness'` | Passes the requests through to the network and falls back to the `performance` behavior when offline. This value is useful when the server redirects the navigation requests elsewhere using a `3xx` HTTP redirect status code. Reasons for using this value include: <ul> <li> Redirecting to an authentication website when authentication is not handled by the application </li> <li> Redirecting specific URLs to avoid breaking existing links/bookmarks after a website redesign </li> <li> Redirecting to a different website, such as a server-status page, while a page is temporarily down </li> </ul> |
375375

376376
IMPORTANT: The `freshness` strategy usually results in more requests sent to the server, which can increase response latency. It is recommended that you use the default performance strategy whenever possible.
377+
378+
### `applicationMaxAge`
379+
380+
This optional property enables you to configure how long the service worker will cache any requests. Within the `maxAge`, files will be served from cache. Beyond it, all requests will only be served from the network, including asset and data requests.

‎goldens/public-api/service-worker/config/index.api.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export interface Config {
2626
// (undocumented)
2727
appData?: {};
2828
// (undocumented)
29+
applicationMaxAge?: Duration;
30+
// (undocumented)
2931
assetGroups?: AssetGroup[];
3032
// (undocumented)
3133
dataGroups?: DataGroup[];

‎packages/service-worker/config/schema.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,10 @@
173173
],
174174
"default": "performance",
175175
"description": "The Angular service worker can use two request strategies for navigation requests. 'performance', the default, skips navigation requests. The other strategy, 'freshness', forces all navigation requests through the network."
176+
},
177+
"applicationMaxAge": {
178+
"type": "string",
179+
"description": "Indicates how long the entire application is allowed to remain in the cache before being considered invalid and bypassed. 'maxAge' is a duration string, using the following unit suffixes: d= days, h= hours, m= minutes, s= seconds, u= milliseconds. For example, the string '3d12h' will cache content for up to three and a half days."
176180
}
177181
},
178182
"required": [

‎packages/service-worker/config/src/generator.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ export class Generator {
4343
hashTable: withOrderedKeys(unorderedHashTable),
4444
navigationUrls: processNavigationUrls(this.baseHref, config.navigationUrls),
4545
navigationRequestStrategy: config.navigationRequestStrategy ?? 'performance',
46+
applicationMaxAge: config.applicationMaxAge
47+
? parseDurationToMs(config.applicationMaxAge)
48+
: undefined,
4649
};
4750
}
4851

‎packages/service-worker/config/src/in.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface Config {
2828
dataGroups?: DataGroup[];
2929
navigationUrls?: string[];
3030
navigationRequestStrategy?: 'freshness' | 'performance';
31+
applicationMaxAge?: Duration;
3132
}
3233

3334
/**

‎packages/service-worker/config/test/generator_spec.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ describe('Generator', () => {
5858
'http://example.com/included',
5959
'!http://example.com/excluded',
6060
],
61+
applicationMaxAge: '1d',
6162
});
6263

6364
expect(config).toEqual({
@@ -114,6 +115,7 @@ describe('Generator', () => {
114115
{positive: false, regex: '^http:\\/\\/example\\.com\\/excluded$'},
115116
],
116117
navigationRequestStrategy: 'performance',
118+
applicationMaxAge: 86400000,
117119
hashTable: {
118120
'/test/foo/test.html': '18f6f8eb7b1c23d2bb61bff028b83d867a9e4643',
119121
'/test/index.html': 'a54d88e06612d820bc3be72877c74f257b561b19',
@@ -207,6 +209,7 @@ describe('Generator', () => {
207209
{positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$'},
208210
],
209211
navigationRequestStrategy: 'performance',
212+
applicationMaxAge: undefined,
210213
});
211214
});
212215

@@ -233,6 +236,7 @@ describe('Generator', () => {
233236
{positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$'},
234237
],
235238
navigationRequestStrategy: 'performance',
239+
applicationMaxAge: undefined,
236240
hashTable: {},
237241
});
238242
});
@@ -418,6 +422,7 @@ describe('Generator', () => {
418422
{positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$'},
419423
],
420424
navigationRequestStrategy: 'performance',
425+
applicationMaxAge: undefined,
421426
hashTable: {},
422427
});
423428
});
@@ -489,6 +494,7 @@ describe('Generator', () => {
489494
{positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$'},
490495
],
491496
navigationRequestStrategy: 'performance',
497+
applicationMaxAge: undefined,
492498
hashTable: {
493499
'/index.html': 'a54d88e06612d820bc3be72877c74f257b561b19',
494500
'/main.js': '41347a66676cdc0516934c76d9d13010df420f2c',

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -497,10 +497,14 @@ export class Driver implements Debuggable, UpdateSource {
497497
// Decide which version of the app to use to serve this request. This is asynchronous as in
498498
// some cases, a record will need to be written to disk about the assignment that is made.
499499
const appVersion = await this.assignVersion(event);
500+
// If there's a configured max age, check whether this version is within that age.
501+
const isVersionWithinMaxAge =
502+
appVersion?.manifest.applicationMaxAge === undefined ||
503+
this.adapter.time - appVersion.manifest.timestamp < appVersion.manifest.applicationMaxAge;
500504
let res: Response | null = null;
501505

502506
try {
503-
if (appVersion !== null) {
507+
if (appVersion !== null && isVersionWithinMaxAge) {
504508
try {
505509
// Handle the request. First try the AppVersion. If that doesn't work, fall back on the
506510
// network.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export interface Manifest {
1919
dataGroups?: DataGroupConfig[];
2020
navigationUrls: {positive: boolean; regex: string}[];
2121
navigationRequestStrategy: 'freshness' | 'performance';
22+
applicationMaxAge?: number;
2223
hashTable: {[url: string]: string};
2324
}
2425

‎packages/service-worker/worker/test/happy_spec.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2562,6 +2562,70 @@ import {envIsSupported} from '../testing/utils';
25622562
return {server, scope, driver};
25632563
}
25642564
});
2565+
2566+
describe('applicationMaxAge', () => {
2567+
// When within the `applicationMaxAge`, the app should act like `performance` mode
2568+
// When outside of it, it should act like `freshness` mode, except it also uncaches asset
2569+
// requests
2570+
it("doesn't create navigate requests within the maxAge", async () => {
2571+
const {server, scope, driver} = createSwForMaxAge();
2572+
2573+
await makeRequest(scope, '/foo.txt');
2574+
await driver.initialized;
2575+
await server.clearRequests();
2576+
2577+
// Create multiple requests to prove no navigation OR asset requests were made.
2578+
// By default the navigation request is not sent, it's replaced
2579+
// with the index request - thus, the `this is foo` value.
2580+
expect(await makeNavigationRequest(scope, '/', '')).toBe('this is foo');
2581+
expect(await makeNavigationRequest(scope, '/foo', '')).toBe('this is foo');
2582+
2583+
expect(await makeRequest(scope, '/foo.txt')).toBe('this is foo');
2584+
expect(await makeRequest(scope, '/bar.txt')).toBe('this is bar');
2585+
2586+
server.assertNoOtherRequests();
2587+
});
2588+
2589+
it('creates navigate requests outside the maxAge', async () => {
2590+
const {server, scope, driver} = createSwForMaxAge();
2591+
2592+
await makeRequest(scope, '/foo.txt');
2593+
await driver.initialized;
2594+
await server.clearRequests();
2595+
2596+
await scope.advance(3000);
2597+
2598+
// Create multiple requests to prove the navigation and asset requests are all made
2599+
// When enabled, the navigation request is made each time and not replaced
2600+
// with the index request - thus, the `null` value.
2601+
expect(await makeNavigationRequest(scope, '/', '')).toBe(null);
2602+
expect(await makeNavigationRequest(scope, '/foo', '')).toBe(null);
2603+
2604+
expect(await makeRequest(scope, '/foo.txt')).toBe('this is foo');
2605+
expect(await makeRequest(scope, '/bar.txt')).toBe('this is bar');
2606+
2607+
server.assertSawRequestFor('/');
2608+
server.assertSawRequestFor('/foo');
2609+
server.assertSawRequestFor('/foo.txt');
2610+
server.assertSawRequestFor('/bar.txt');
2611+
server.assertNoOtherRequests();
2612+
});
2613+
2614+
function createSwForMaxAge() {
2615+
const scope = new SwTestHarnessBuilder().build();
2616+
// set the timestamp of the manifest using the server time so it's always "new" on test start
2617+
const maxAgeManifest: Manifest = {
2618+
...manifest,
2619+
timestamp: scope.time,
2620+
applicationMaxAge: 2000,
2621+
};
2622+
const server = serverBuilderBase.withManifest(maxAgeManifest).build();
2623+
const driver = new Driver(scope, scope, new CacheDatabase(scope));
2624+
scope.updateServerState(server);
2625+
2626+
return {server, scope, driver};
2627+
}
2628+
});
25652629
});
25662630
})();
25672631

0 commit comments

Comments
 (0)