5 lines
14 KiB
JSON
5 lines
14 KiB
JSON
|
{
|
||
|
|
"id": "guide/service-worker-communications",
|
||
|
|
"title": "Service worker communication",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/service-worker-communications.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"service-worker-communication\">Service worker communication<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-communications#service-worker-communication\"><i class=\"material-icons\">link</i></a></h1>\n<p>Importing <code><a href=\"api/service-worker/ServiceWorkerModule\" class=\"code-anchor\">ServiceWorkerModule</a></code> into your <code>AppModule</code> doesn't just register the service worker, it also provides a few services you can use to interact with the service worker and control the caching of your app.</p>\n<h4 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-communications#prerequisites\"><i class=\"material-icons\">link</i></a></h4>\n<p>A basic understanding of the following:</p>\n<ul>\n<li><a href=\"guide/service-worker-getting-started\">Getting Started with Service Workers</a>.</li>\n</ul>\n<h2 id=\"swupdate-service\"><code><a href=\"api/service-worker/SwUpdate\" class=\"code-anchor\">SwUpdate</a></code> service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-communications#swupdate-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code><a href=\"api/service-worker/SwUpdate\" class=\"code-anchor\">SwUpdate</a></code> service gives you access to events that indicate when the service worker has discovered an available update for your app or when it has activated such an update—meaning it is now serving content from that update to your app.</p>\n<p>The <code><a href=\"api/service-worker/SwUpdate\" class=\"code-anchor\">SwUpdate</a></code> service supports four separate operations:</p>\n<ul>\n<li>Getting notified of <em>available</em> updates. These are new versions of the app to be loaded if the page is refreshed.</li>\n<li>Getting notified of update <em>activation</em>. This is when the service worker starts serving a new version of the app immediately.</li>\n<li>Asking the service worker to check the server for new updates.</li>\n<li>Asking the service worker to activate the latest version of the app for the current tab.</li>\n</ul>\n<h3 id=\"available-and-activated-updates\">Available and activated updates<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-communications#available-and-activated-updates\"><i class=\"material-icons\">link</i></a></h3>\n<p>The two update events, <code>available</code> and <code>activated</code>, are <code>Observable</code> properties of <code><a href=\"api/service-worker/SwUpdate\" class=\"code-anchor\">SwUpdate</a></code>:</p>\n<code-example path=\"service-worker-getting-started/src/app/log-update.service.ts\" header=\"log-update.service.ts\" region=\"sw-update\">\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class LogUpdateService {\n\n constructor(updates: <a href=\"api/service-worker/SwUpdate\" class=\"code-anchor\">SwUpdate</a>) {\n updates.available.subscribe(event => {\n console.log('current version is', event.current);\n console.log('available version is', event.available);\n });\n updates.activated.subscribe(event => {\n console.log('old version was', event.previous);\n console.log('new version is', event.current);\n });\n }\n}\n\n</code-example>\n<p>You can use these events to notify the user of a pending update or to refresh their pages when the code they are running is out of date.</p>\n<h3 id=\"checking-for-updates\">Checking for updates<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-communi
|
||
|
|
}
|