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>