docs(service-worker): minor fixes/improvements in the SW Communication guide (#37555)
This commit includes various fixes/improvements for the "Service worker communication" guide. This partially addresses #37527. PR Close #37555
This commit is contained in:
parent
bcc0a035cc
commit
a7faa6bb65
|
@ -31,26 +31,27 @@ You can use these events to notify the user of a pending update or to refresh th
|
||||||
|
|
||||||
### Checking for updates
|
### Checking for updates
|
||||||
|
|
||||||
It's possible to ask the service worker to check if any updates have been deployed to the server. You might choose to do this if you have a site that changes frequently or want updates to happen on a schedule.
|
It's possible to ask the service worker to check if any updates have been deployed to the server.
|
||||||
|
The service worker checks for updates during initialization and on each navigation request—that is, when the user navigates from a different address to your app.
|
||||||
|
However, you might choose to manually check for updates if you have a site that changes frequently or want updates to happen on a schedule.
|
||||||
|
|
||||||
Do this with the `checkForUpdate()` method:
|
Do this with the `checkForUpdate()` method:
|
||||||
|
|
||||||
<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" header="check-for-update.service.ts"></code-example>
|
<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" header="check-for-update.service.ts"></code-example>
|
||||||
|
|
||||||
|
|
||||||
This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the app.
|
This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the app.
|
||||||
|
|
||||||
<div class="alert is-important">
|
<div class="alert is-important">
|
||||||
|
|
||||||
In order to avoid negatively affecting the initial rendering of the page, `ServiceWorkerModule` will by default wait for up to 30 seconds for the app to stabilize, before registering the ServiceWorker script.
|
In order to avoid negatively affecting the initial rendering of the page, `ServiceWorkerModule` waits for up to 30 seconds by default for the app to stabilize, before registering the ServiceWorker script.
|
||||||
Constantly polling for updates, e.g. with [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) or RxJS' [interval()](https://rxjs.dev/api/index/function/interval), will prevent the app from stabilizing and the ServiceWorker script will not be registered with the browser until the 30 seconds upper limit is reached.
|
Constantly polling for updates, for example, with [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) or RxJS' [interval()](https://rxjs.dev/api/index/function/interval), will prevent the app from stabilizing and the ServiceWorker script will not be registered with the browser until the 30 seconds upper limit is reached.
|
||||||
|
|
||||||
You can avoid that by waiting for the app to stabilize first, before starting to poll for updates
|
|
||||||
(as shown in the example above).
|
|
||||||
|
|
||||||
Note that this is true for any kind of polling done by your application.
|
Note that this is true for any kind of polling done by your application.
|
||||||
Check the {@link ApplicationRef#isStable isStable} documentation for more information.
|
Check the {@link ApplicationRef#isStable isStable} documentation for more information.
|
||||||
|
|
||||||
|
You can avoid that delay by waiting for the app to stabilize first, before starting to poll for updates, as shown in the example above.
|
||||||
|
Alternatively, you might want to define a different {@link SwRegistrationOptions#registrationStrategy registration strategy} for the ServiceWorker.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
### Forcing update activation
|
### Forcing update activation
|
||||||
|
@ -59,7 +60,12 @@ If the current tab needs to be updated to the latest app version immediately, it
|
||||||
|
|
||||||
<code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" header="prompt-update.service.ts" region="sw-activate"></code-example>
|
<code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" header="prompt-update.service.ts" region="sw-activate"></code-example>
|
||||||
|
|
||||||
Doing this could break lazy-loading in currently running apps, especially if the lazy-loaded chunks use filenames with hashes, which change every version.
|
<div class="alert is-important">
|
||||||
|
|
||||||
|
Calling `activateUpdate()` without reloading the page could break lazy-loading in a currently running app, especially if the lazy-loaded chunks use filenames with hashes, which change every version.
|
||||||
|
Therefore, it is recommended to reload the page once the promise returned by `activateUpdate()` is resolved.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
## More on Angular service workers
|
## More on Angular service workers
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue