From 73b0275dc2dd64bbb39be3a8079b418a40e89cfd Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Wed, 23 Jun 2021 15:27:50 +0300 Subject: [PATCH] fix(service-worker): improve ServiceWorker cache names (#42622) This commit improves the cache names generated by the ServiceWorker by making them shorter and non-repetitive. In particular, the following changes are made: - Data-group cache names no longer include the `dynamic` infix, since it does not add any value. Before: `ngsw:<...>:data:dynamic:<...>` After: `ngsw:<...>:data:<...>` - `CacheDatabase` table names no longer include the `ngsw:` prefix twice. Before: `ngsw::db:ngsw::<...>` After: `ngsw::db:<...>` NOTE 1: This change will result in different cache names being generated for the same app-versions with the new SericeWorker script. This means that some of the previously cached data will need to be re-downloaded (because the ServiceWorker will not be able to re-use the old caches), but that should be transparent for the end user. While possible, adding logic to allow the ServiceWorker to retrieve data from the old caches is not worth the extra complecity and maintenance cost. NOTE 2: Generating different cache names for some of the caches means that the ServiceWorker will not be able to clean-up some of the old caches. This will be taken care of in a subsequent commit that will rework the clean-up logic to be more robust (covering changes such as this one and other edgecases). PR Close #42622 --- .../service-worker/worker/src/app-version.ts | 12 ++++++------ packages/service-worker/worker/src/assets.ts | 6 ++++-- packages/service-worker/worker/src/data.ts | 16 ++++++++-------- .../service-worker/worker/test/happy_spec.ts | 10 +++++----- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/service-worker/worker/src/app-version.ts b/packages/service-worker/worker/src/app-version.ts index a94dcff8690..07cf0159ca4 100644 --- a/packages/service-worker/worker/src/app-version.ts +++ b/packages/service-worker/worker/src/app-version.ts @@ -77,7 +77,7 @@ export class AppVersion implements UpdateSource { // Process each `AssetGroup` declared in the manifest. Each declared group gets an `AssetGroup` // instance created for it, of a type that depends on the configuration mode. - const assetCacheNamePrefix = `${adapter.cacheNamePrefix}:${manifestHash}:assets`; + const assetCacheNamePrefix = `${manifestHash}:assets`; this.assetGroups = (manifest.assetGroups || []).map(config => { // Check the caching mode, which determines when resources will be fetched/updated. switch (config.installMode) { @@ -91,11 +91,11 @@ export class AppVersion implements UpdateSource { }); // Process each `DataGroup` declared in the manifest. - this.dataGroups = (manifest.dataGroups || []) - .map( - config => new DataGroup( - scope, adapter, config, database, debugHandler, - `${adapter.cacheNamePrefix}:${config.version}:data`)); + this.dataGroups = + (manifest.dataGroups || []) + .map( + config => new DataGroup( + scope, adapter, config, database, debugHandler, `${config.version}:data`)); // This keeps backwards compatibility with app versions without navigation urls. // Fix: https://github.com/angular/angular/issues/27209 diff --git a/packages/service-worker/worker/src/assets.ts b/packages/service-worker/worker/src/assets.ts index 2c2e69988b0..b511f082f22 100644 --- a/packages/service-worker/worker/src/assets.ts +++ b/packages/service-worker/worker/src/assets.ts @@ -67,7 +67,8 @@ export abstract class AssetGroup { // This is the primary cache, which holds all of the cached requests for this group. If a // resource isn't in this cache, it hasn't been fetched yet. - this.cache = scope.caches.open(`${cacheNamePrefix}:${config.name}:cache`); + this.cache = + scope.caches.open(`${adapter.cacheNamePrefix}:${cacheNamePrefix}:${config.name}:cache`); // This is the metadata table, which holds specific information for each cached URL, such as // the timestamp of when it was added to the cache. @@ -103,7 +104,8 @@ export abstract class AssetGroup { * Clean up all the cached data for this group. */ async cleanup(): Promise { - await this.scope.caches.delete(`${this.cacheNamePrefix}:${this.config.name}:cache`); + await this.scope.caches.delete( + `${this.adapter.cacheNamePrefix}:${this.cacheNamePrefix}:${this.config.name}:cache`); await this.db.delete(`${this.cacheNamePrefix}:${this.config.name}:meta`); } diff --git a/packages/service-worker/worker/src/data.ts b/packages/service-worker/worker/src/data.ts index 2515b1ba6e4..1803571f6ee 100644 --- a/packages/service-worker/worker/src/data.ts +++ b/packages/service-worker/worker/src/data.ts @@ -249,11 +249,10 @@ export class DataGroup { private config: DataGroupConfig, private db: Database, private debugHandler: DebugHandler, private cacheNamePrefix: string) { this.patterns = config.patterns.map(pattern => new RegExp(pattern)); - this.cache = scope.caches.open(`${cacheNamePrefix}:dynamic:${config.name}:cache`); - this.lruTable = - this.db.open(`${cacheNamePrefix}:dynamic:${config.name}:lru`, config.cacheQueryOptions); - this.ageTable = - this.db.open(`${cacheNamePrefix}:dynamic:${config.name}:age`, config.cacheQueryOptions); + this.cache = + scope.caches.open(`${adapter.cacheNamePrefix}:${cacheNamePrefix}:${config.name}:cache`); + this.lruTable = this.db.open(`${cacheNamePrefix}:${config.name}:lru`, config.cacheQueryOptions); + this.ageTable = this.db.open(`${cacheNamePrefix}:${config.name}:age`, config.cacheQueryOptions); } /** @@ -550,9 +549,10 @@ export class DataGroup { async cleanup(): Promise { // Remove both the cache and the database entries which track LRU stats. await Promise.all([ - this.scope.caches.delete(`${this.cacheNamePrefix}:dynamic:${this.config.name}:cache`), - this.db.delete(`${this.cacheNamePrefix}:dynamic:${this.config.name}:age`), - this.db.delete(`${this.cacheNamePrefix}:dynamic:${this.config.name}:lru`), + this.scope.caches.delete( + `${this.adapter.cacheNamePrefix}:${this.cacheNamePrefix}:${this.config.name}:cache`), + this.db.delete(`${this.cacheNamePrefix}:${this.config.name}:age`), + this.db.delete(`${this.cacheNamePrefix}:${this.config.name}:lru`), ]); } diff --git a/packages/service-worker/worker/test/happy_spec.ts b/packages/service-worker/worker/test/happy_spec.ts index 881f7159f78..21a72fa1346 100644 --- a/packages/service-worker/worker/test/happy_spec.ts +++ b/packages/service-worker/worker/test/happy_spec.ts @@ -1269,12 +1269,12 @@ describe('Driver', () => { const cacheKeysFor = (baseHref: string, manifestHash: string) => [`ngsw:${baseHref}:db:control`, `ngsw:${baseHref}:${manifestHash}:assets:eager:cache`, - `ngsw:${baseHref}:db:ngsw:${baseHref}:${manifestHash}:assets:eager:meta`, + `ngsw:${baseHref}:db:${manifestHash}:assets:eager:meta`, `ngsw:${baseHref}:${manifestHash}:assets:lazy:cache`, - `ngsw:${baseHref}:db:ngsw:${baseHref}:${manifestHash}:assets:lazy:meta`, - `ngsw:${baseHref}:42:data:dynamic:api:cache`, - `ngsw:${baseHref}:db:ngsw:${baseHref}:42:data:dynamic:api:lru`, - `ngsw:${baseHref}:db:ngsw:${baseHref}:42:data:dynamic:api:age`, + `ngsw:${baseHref}:db:${manifestHash}:assets:lazy:meta`, + `ngsw:${baseHref}:42:data:api:cache`, + `ngsw:${baseHref}:db:42:data:api:lru`, + `ngsw:${baseHref}:db:42:data:api:age`, ]; const createManifestWithBaseHref = (baseHref: string, distDir: MockFileSystem): Manifest => ({