5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
|
{
|
||
|
|
"id": "guide/service-worker-intro",
|
||
|
|
"title": "Angular service worker introduction",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/service-worker-intro.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=\"angular-service-worker-introduction\">Angular service worker introduction<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-intro#angular-service-worker-introduction\"><i class=\"material-icons\">link</i></a></h1>\n<p>Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code. Adding a service worker to an Angular application is one of the steps for turning an application into a <a href=\"https://developers.google.com/web/progressive-web-apps/\">Progressive Web App</a> (also known as a PWA).</p>\n<p>At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.</p>\n<p>Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as <code>fetch</code>; it also includes resources referenced in HTML and even the initial request to <code>index.html</code>. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.</p>\n<p>Unlike the other scripts that make up an application, such as the Angular app bundle, the service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. If the service worker is designed to do so, it can <em>completely satisfy the loading of the application, without the need for the network</em>.</p>\n<p>Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application. Using a service worker to reduce dependency on the network can significantly improve the user experience.</p>\n<h2 id=\"service-workers-in-angular\">Service workers in Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-intro#service-workers-in-angular\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. Starting with version 5.0.0, Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.</p>\n<p>Angular's service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.</p>\n<p>The Angular service worker's behavior follows that design goal:</p>\n<ul>\n<li>Caching an application is like installing a native application. The application is cached as one unit, and all files update together.</li>\n<li>A running application continues to run with the same version of all files. It does not suddenly start receiving cached files from a newer version, which are likely incompatible.</li>\n<li>When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.</li>\n<li>Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.</li>\n<li>The service worker conserves bandwidth when possible. Resources are only
|
||
|
|
}
|