5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
|
{
|
||
|
|
"id": "guide/service-worker-getting-started",
|
||
|
|
"title": "Getting started with service workers",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/service-worker-getting-started.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=\"getting-started-with-service-workers\">Getting started with service workers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-getting-started#getting-started-with-service-workers\"><i class=\"material-icons\">link</i></a></h1>\n<p>This document explains how to enable Angular service worker support in projects that you created with the <a href=\"cli\">Angular CLI</a>. It then uses a simple example to show you a service worker in action, demonstrating loading and basic caching.</p>\n<h4 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-getting-started#prerequisites\"><i class=\"material-icons\">link</i></a></h4>\n<p>A basic understanding of the information in <a href=\"guide/service-worker-intro\">Introduction to Angular service workers</a>.</p>\n<h2 id=\"adding-a-service-worker-to-your-project\">Adding a service worker to your project<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-getting-started#adding-a-service-worker-to-your-project\"><i class=\"material-icons\">link</i></a></h2>\n<p>To set up the Angular service worker in your project, use the CLI command <code>ng add @angular/pwa</code>. It takes care of configuring your app to use service workers by adding the <code>service-worker</code> package along\nwith setting up the necessary support files.</p>\n<code-example language=\"sh\">\nng add @angular/pwa --project *project-name*\n</code-example>\n<p>The above command completes the following actions:</p>\n<ol>\n<li>Adds the <code>@angular/service-worker</code> package to your project.</li>\n<li>Enables service worker build support in the CLI.</li>\n<li>Imports and registers the service worker in the app module.</li>\n<li>\n<p>Updates the <code>index.html</code> file:</p>\n<ul>\n<li>Includes a link to add the <code>manifest.webmanifest</code> file.</li>\n<li>Adds meta tags for <code>theme-color</code>.</li>\n</ul>\n</li>\n<li>Installs icon files to support the installed Progressive Web App (PWA).</li>\n<li>Creates the service worker configuration file called <a href=\"/guide/service-worker-config\"><code>ngsw-config.json</code></a>, which specifies the caching behaviors and other settings.</li>\n</ol>\n<p> Now, build the project:</p>\n<code-example language=\"sh\">\nng build\n</code-example>\n<p>The CLI project is now set up to use the Angular service worker.</p>\n<h2 id=\"service-worker-in-action-a-tour\">Service worker in action: a tour<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-getting-started#service-worker-in-action-a-tour\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section demonstrates a service worker in action,\nusing an example application.</p>\n<h3 id=\"serving-with-http-server\">Serving with <code>http-server</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/service-worker-getting-started#serving-with-http-server\"><i class=\"material-icons\">link</i></a></h3>\n<p>Because <code>ng serve</code> does not work with service workers, you must use a separate HTTP server to test your project locally. You can use any HTTP server. The example below uses the <a href=\"https://www.npmjs.com/package/http-server\">http-server</a> package from npm. To reduce the possibility of conflicts and avoid serving stale content, test on a dedicated port and disable caching.</p>\n<p>To serve the directory containing your web files with <code>http-server</code>, run the following command:</p>\n<code-example language=\"sh\">\nhttp-serve
|
||
|
|
}
|