diff --git a/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts b/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
index 86d09e80d0e..dab9b69a448 100755
--- a/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
+++ b/aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
@@ -13,6 +13,13 @@ export class CheckForUpdateService {
const everySixHours$ = interval(6 * 60 * 60 * 1000);
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
- everySixHoursOnceAppIsStable$.subscribe(() => updates.checkForUpdate());
+ everySixHoursOnceAppIsStable$.subscribe(async () => {
+ try {
+ const updateFound = await updates.checkForUpdate();
+ console.log(updateFound ? 'A new version is available.' : 'Already on the latest version.');
+ } catch (err) {
+ console.error('Failed to check for updates:', err);
+ }
+ });
}
}
diff --git a/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts b/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
index 3d2ea87bae6..78eeac2bb6b 100755
--- a/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
+++ b/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
@@ -1,20 +1,40 @@
+// #docplaster
import { Injectable } from '@angular/core';
-import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
+// #docregion sw-replicate-available
+ import { filter, map } from 'rxjs/operators';
+// #enddocregion sw-replicate-available
+import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
-function promptUser(event: UpdateAvailableEvent): boolean {
+function promptUser(event: VersionReadyEvent): boolean {
return true;
}
-// #docregion sw-activate
+// #docregion sw-version-ready
@Injectable()
export class PromptUpdateService {
- constructor(updates: SwUpdate) {
- updates.available.subscribe(event => {
- if (promptUser(event)) {
- updates.activateUpdate().then(() => document.location.reload());
- }
- });
+ constructor(swUpdate: SwUpdate) {
+ swUpdate.versionUpdates
+ .pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'))
+ .subscribe(evt => {
+ if (promptUser(evt)) {
+ // Reload the page to update to the latest version.
+ document.location.reload();
+ }
+ });
+ // #enddocregion sw-version-ready
+ // #docregion sw-replicate-available
+ // ...
+ const updatesAvailable = swUpdate.versionUpdates.pipe(
+ filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),
+ map(evt => ({
+ type: 'UPDATE_AVAILABLE',
+ current: evt.currentVersion,
+ available: evt.latestVersion,
+ })));
+ // #enddocregion sw-replicate-available
+ // #docregion sw-version-ready
}
+
}
-// #enddocregion sw-activate
+// #enddocregion sw-version-ready
diff --git a/aio/content/guide/service-worker-communications.md b/aio/content/guide/service-worker-communications.md
index a0023d30421..d5d4f9aa7d0 100644
--- a/aio/content/guide/service-worker-communications.md
+++ b/aio/content/guide/service-worker-communications.md
@@ -64,16 +64,20 @@ Alternatively, you might want to define a different [registration strategy](api/
-### Forcing update activation
+### Updating to the latest version
-If the current tab needs to be updated to the latest application version immediately, it can ask to do so with the `activateUpdate()` method:
+You can update an existing tab to the latest version by reloading the page as soon as a new version is ready.
+To avoid disrupting the user's progress, it is generally a good idea to prompt the user and let them confirm that it is OK to reload the page and update to the latest version:
-