docs(aio): Rename service worker files, update examples, move service worker under Techniques

aio/content/examples/service-worker-getstart/src/app/app.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  title = 'Service Workers';
-}

aio/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts

@@ -1,9 +1,9 @@
 import { AppPage } from './app.po';
 import { browser, element, by } from 'protractor';
 
+
 describe('sw-example App', () => {
   let page: AppPage;
-  let logo = element(by.css('img'));
 
   beforeEach(() => {
     page = new AppPage();
@@ -15,17 +15,18 @@ describe('sw-example App', () => {
   });
 
   it('should display the Angular logo', () => {
+    let logo = element(by.css('img'));
     page.navigateTo();
     expect(logo.isPresent()).toBe(true);
   });
 
-  it('should show a header for the list of links', function () {
+  it('should show a header for the list of links', () => {
     const listHeader = element(by.css('app-root > h2'));
     expect(listHeader.getText()).toEqual('Here are some links to help you start:');
   });
 
   it('should show a list of links', function () {
-      element.all(by.css('ul > li > h2 > a')).then(function(items) {
+      element.all(by.css('ul > li > h2 > a')).then((items) => {
         expect(items.length).toBe(4);
         expect(items[0].getText()).toBe('Angular Service Worker Intro');
         expect(items[1].getText()).toBe('Tour of Heroes');
@@ -33,5 +34,11 @@ describe('sw-example App', () => {
         expect(items[3].getText()).toBe('Angular blog');
       });
   });
-
+   // Check for a rejected promise as the service worker is not enabled
+   it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
+    const button = element(by.css('button'));
+    const rejectMessage = element(by.css('p'));
+    button.click();
+    expect(rejectMessage.getText()).toContain('rejected: ');
+  });
 });

aio/content/examples/service-worker-getting-started/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "angular.io-example",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.0.0",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/service-worker": "^5.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.5.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.5.4",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.7.0",
+    "typescript": "~2.4.2"
+  }
+}

aio/content/examples/service-worker-getting-started/plnkr.json

@@ -0,0 +1,5 @@
+{
+    "description": "Service Worker",
+    "basePath": "src/",
+    "tags": ["service worker"]
+  }

aio/content/examples/service-worker-getting-started/src/app/app.component.html

@@ -5,6 +5,10 @@
   </h1>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
+
+<button id="check" (click)="updateCheck()">Check for Update</button>
+<p id="checkResult">{{updateCheckText}}</p>
+
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>

aio/content/examples/service-worker-getting-started/src/app/app.component.spec.ts

@@ -16,12 +16,12 @@ describe('AppComponent', () => {
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
+    expect(app.title).toEqual('Service Workers');
   }));
   it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to Service Workers!');
   }));
 });

aio/content/examples/service-worker-getting-started/src/app/app.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  title = 'Service Workers';
+  updateCheckText = '';
+
+  constructor(private update: SwUpdate) {}
+
+  updateCheck(): void {
+      this.update
+        .checkForUpdate()
+        .then(() => this.updateCheckText = 'resolved')
+        .catch(err => this.updateCheckText = `rejected: ${err.message}`);
+    }
+}

aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts

@@ -1,19 +1,15 @@
 import { Injectable } from '@angular/core';
 import { SwUpdate } from '@angular/service-worker';
 
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/interval';
-
-function promptUser(event): boolean {
-  return true;
-}
 
 // #docregion sw-check-update
+import { interval } from 'rxjs/observable/interval';
+
 @Injectable()
 export class CheckForUpdateService {
 
   constructor(updates: SwUpdate) {
-    Observable.interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
+    interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
   }
 }
 // #enddocregion sw-check-update

aio/content/examples/service-worker-getting-started/src/index.html

@@ -5,8 +5,6 @@
   <title>SwExample</title>
   <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root></app-root>

aio/content/guide/service-worker-communications.md

@@ -1,7 +1,15 @@
-# Communicating with service workers
+# Service Worker Communication
 
 Importing `ServiceWorkerModule` into your `AppModule` 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.
 
+#### Prerequisites
+
+A basic understanding of the following:
+* [Getting Started with Service Workers](guide/service-worker-getting-started).
+
+<hr />
+
+
 ## `SwUpdate` service
 
 The `SwUpdate` 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&mdash;meaning it is now serving content from that update to your app.
@@ -16,7 +24,7 @@ The `SwUpdate` service supports four separate operations:
 
 The two update events, `available` and `activated`, are `Observable` properties of `SwUpdate`:
 
-<code-example path="service-worker-getstart/src/app/log-update.service.ts" linenums="false" title="log-update.service.ts" region="sw-update"> </code-example>
+<code-example path="service-worker-getting-started/src/app/log-update.service.ts" linenums="false" title="log-update.service.ts" region="sw-update"> </code-example>
 
 
 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.
@@ -27,7 +35,7 @@ It's possible to ask the service worker to check if any updates have been deploy
 
 Do this with the `checkForUpdate()` method:
 
-<code-example path="service-worker-getstart/src/app/check-for-update.service.ts" linenums="false" title="check-for-update.service.ts" region="sw-check-update"> </code-example>
+<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" linenums="false" title="check-for-update.service.ts" region="sw-check-update"> </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.
@@ -36,6 +44,11 @@ This method returns a `Promise` which indicates that the update check has comple
 
 If the current tab needs to be updated to the latest app version immediately, it can ask to do so with the `activateUpdate()` method:
 
-<code-example path="service-worker-getstart/src/app/prompt-update.service.ts" linenums="false" title="prompt-update.service.ts" region="sw-activate"> </code-example>
+<code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" linenums="false" title="prompt-update.service.ts" region="sw-activate"> </code-example>
 
 Doing this could break lazy-loading into currently running apps, especially if the lazy-loaded chunks use filenames with hashes, which change every version.
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Service Worker in Production](guide/service-worker-devops).

aio/content/guide/service-worker-config.md

@@ -1,6 +1,13 @@
 {@a glob}
 
-# Reference: Configuration file
+# Service Worker Configuration
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [Service Worker in Production](guide/service-worker-devops).
+
+<hr />
 
 The `src/ngsw-config.json` configuration file specifies which files and data URLs the Angular 
 service worker should cache and how it should update the cached files and data. The 
@@ -8,7 +15,7 @@ CLI processes the configuration file during `ng build --prod`. Manually, you can
 it with the `ngsw-config` tool:
 
 ```sh
-ngsw-config dist src/ngswn-config.json /base/href
+ngsw-config dist src/ngsw-config.json /base/href
 ```
 
 The configuration file uses the JSON format. All file paths must begin with `/`, which is the deployment directory&mdash;usually `dist` in CLI projects.
@@ -159,3 +166,4 @@ The Angular service worker can use either of two caching strategies for data res
 * `performance`, the default, optimizes for responses that are as fast as possible. If a resource exists in the cache, the cached version is used. This allows for some staleness, depending on the `maxAge`, in exchange for better performance. This is suitable for resources that don't change often; for example, user avatar images.
 
 * `freshness` optimizes for currency of data, preferentially fetching requested data from the network. Only if the network times out, according to `timeout`, does the request fall back to the cache. This is useful for resources that change frequently; for example, account balances.
+

aio/content/guide/service-worker-devops.md

@@ -1,7 +1,14 @@
-# DevOps: Angular service worker in production
+# Service Worker in Production
 
 This page is a reference for deploying and supporting production apps that use the Angular service worker. It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available recourses and fail-safes.
 
+#### Prerequisites
+
+A basic understanding of the following:
+* [Service Worker Communication](guide/service-worker-communications).
+
+<hr />
+
 ## Service worker and caching of app resources
 
 Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated.
@@ -297,4 +304,8 @@ for `ngsw.json` returns a `404`, then the service worker
 removes all of its caches and de-registers itself, 
 essentially self-destructing.
 
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Service Worker Configuration](guide/service-worker-config).
 

aio/content/guide/service-worker-getting-started.md

@@ -1,10 +1,15 @@
-# Getting started
+# Getting Started with Service Workers
+
+#### Prerequisites
+
+A basic understanding of the following:
+* [Introduction to Angular service workers](guide/service-worker-intro).
+
+<hr />
+
 
 Beginning in Angular 5.0.0, you can easily enable Angular service worker support in any CLI project. This document explains how to enable Angular service worker support in new and existing projects. It then uses a simple example to show you a service worker in action, demonstrating loading and basic caching.  
 
-See the <live-example></live-example>.
-
-
 ## Adding a service worker to a new application
 
 If you're generating a new CLI project, you can use the CLI to set up the Angular service worker as part of creating the project. To do so, add the `--service-worker` flag to the `ng new`  command:
@@ -54,12 +59,12 @@ To import and register the Angular service worker:
 
 At the top of the root module, `src/app/app.module.ts`, import `ServiceWorkerModule` and `environment`.
 
-<code-example path="service-worker-getstart/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts" region="sw-import"> </code-example>
+<code-example path="service-worker-getting-started/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts" region="sw-import"> </code-example>
 
 
 Add `ServiceWorkerModule` to the `@NgModule` `imports` array. Use the `register()` helper to take care of registering the service worker, taking care to disable the service worker when not running in production mode.
 
-<code-example path="service-worker-getstart/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts" region="sw-module"> </code-example>
+<code-example path="service-worker-getting-started/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts" region="sw-module"> </code-example>
 
 The file `ngsw-worker.js` is the name of the prebuilt service worker script, which the CLI copies into `dist/` to deploy along with your server.
 
@@ -72,7 +77,7 @@ You can begin with the boilerplate version from the CLI, which configures sensib
 
 Alternately, save the following as `src/ngsw-config.json`:
 
-<code-example path="service-worker-getstart/src/ngsw-config.json" linenums="false" title="src/ngsw-config.json"> </code-example>
+<code-example path="service-worker-getting-started/src/ngsw-config.json" linenums="false" title="src/ngsw-config.json"> </code-example>
 
 ### Step 5: Build the project
 
@@ -92,7 +97,9 @@ using an example application.
 
 ### Serving with `http-server`
 
-As `ng serve` does not work with service workers, you must use a real HTTP server to test your project locally. It's a good idea to test on a dedicated port.
+Because `ng serve` does not work with service workers, you must use a seperate HTTP server to test your project locally. You can use any HTTP server. The example below uses the [http-server](https://www.npmjs.com/package/http-server) package from npm. To reduce the possibility of conflicts, test on a dedicated port.
+
+To serve with `http-server`, change to the directory containing your web files and start the web server: 
 
 ```sh
 cd dist
@@ -181,7 +188,6 @@ What went wrong? Nothing, actually. The Angular service worker is doing its job
 If you look at the `http-server` logs, you can see the service worker requesting `/ngsw.json`. This is how the service worker checks for updates.
 
 2. Refresh the page.
-![The text has changed to say "Bienvenue à app!"](generated/images/guide/service-worker/welcome-msg-fr.png) 
 
 <figure>
   <img src="generated/images/guide/service-worker/welcome-msg-fr.png" alt="The text has changed to say Bienvenue à app!">
@@ -189,3 +195,9 @@ If you look at the `http-server` logs, you can see the service worker requesting
 
 The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
 
+<hr />
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Communicating with service workers](guide/service-worker-communications).

aio/content/guide/service-worker-intro.md

@@ -1,4 +1,4 @@
-# Introduction to Angular service workers
+# Angular Service Worker Introduction
 
 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.
 
@@ -46,3 +46,8 @@ For more information about browser support, see the [browser support](https://de
 [Can I Use](http://caniuse.com/#feat=serviceworkers). 
 
 The remainder of this Angular documentation specifically addresses the Angular implementation of service workers. 
+
+## More on Angular service workers
+
+You may also be interested in the following:
+* [Getting Started with service workers](guide/service-worker-getting-started).

aio/content/navigation.json

@@ -276,38 +276,6 @@
           "title": "Routing & Navigation",
           "tooltip": "Discover the basics of screen navigation with the Angular Router."
         },
-        {
-          "title": "Service Workers",
-          "tooltip": "Angular service workers: Controlling caching of application resources.",
-          "children": [
-            {
-              "url": "guide/service-worker-intro",
-              "title": "Introduction",
-              "tooltip": "Angular's implementation of service workers improves user experience with slow or unreliable network connectivity."
-            },
-            {
-              "url": "guide/service-worker-getstart",
-              "title": "Getting Started",
-              "tooltip": "Enabling the service worker in a CLI project and observing behavior in the browser."
-            },
-            {
-              "url": "guide/service-worker-comm",
-              "title": "Communication",
-              "tooltip": "Services that enable you to interact with an Angular service worker."
-            },
-            {
-              "url": "guide/service-worker-devops",
-              "title": "Service Workers in Production",
-              "tooltip": "Information about running applications with service workers, including application update management, debugging, and killing applications."
-            },
-            {
-              "url": "guide/service-worker-configref",
-              "title": "Reference: Configuration File",
-              "tooltip": "The ngsw-config.json configuration file controls service worker caching behavior."
-            }
-          ]
-        },
-
         {
           "url": "guide/testing",
           "title": "Testing",
@@ -382,6 +350,37 @@
             }
           ]
         },
+        {
+          "title": "Service Workers",
+          "tooltip": "Angular service workers: Controlling caching of application resources.",
+          "children": [
+            {
+              "url": "guide/service-worker-intro",
+              "title": "Introduction",
+              "tooltip": "Angular's implementation of service workers improves user experience with slow or unreliable network connectivity."
+            },
+            {
+              "url": "guide/service-worker-getting-started",
+              "title": "Getting Started",
+              "tooltip": "Enabling the service worker in a CLI project and observing behavior in the browser."
+            },
+            {
+              "url": "guide/service-worker-communications",
+              "title": "Service Worker Communication",
+              "tooltip": "Services that enable you to interact with an Angular service worker."
+            },
+            {
+              "url": "guide/service-worker-devops",
+              "title": "Service Worker in Production",
+              "tooltip": "Running applications with service workers, managing application update, debugging, and killing applications."
+            },
+            {
+              "url": "guide/service-worker-config",
+              "title": "Service Worker Configuration",
+              "tooltip": "Configuring service worker caching behavior."
+            }
+          ]
+        },
 
         {
           "title": "Upgrading",

aio/firebase.json

@@ -40,7 +40,12 @@
       {"type": 301, "source": "/docs/ts/latest/:any*", "destination": "/:any*"},
 
       // aot-compiler.md and metadata.md combined into aot-compiler.md - issue #19510
-      {"type": 301, "source": "/guide/metadata", "destination": "/guide/aot-compiler"}
+      {"type": 301, "source": "/guide/metadata", "destination": "/guide/aot-compiler"},
+
+      // service-worker-getstart.md, service-worker-comm.md, service-worker-configref.md
+      {"type": 301, "source": "/guide/service-worker-getstart", "destination": "/guide/service-worker-getting-started"},
+      {"type": 301, "source": "/guide/service-worker-comm", "destination": "/guide/service-worker-communications"},
+      {"type": 301, "source": "/guide/service-worker-configref", "destination": "/guide/service-worker-config"}
     ],
     "rewrites": [
       {