Adds Support For Angular Mobile Toolkit Service Worker

README.md

@@ -25,6 +25,7 @@ Provides fast, reliable and extensible starter for the development of Angular pr
 - Manager of your type definitions using @types.
 - Has autoprefixer and css-lint support.
 - Provides full Docker support for both development and production environment
+- Support for Angular Mobile Toolkit
 
 # How to start
 
@@ -86,7 +87,7 @@ $ npm run build.prod.aot
 
 This application provides full support for tree-shaking your production builds with Rollup, which can drastically reduce the size of your application. This is the highest level of optimization currently available.
 
-To run this optimized production build, use: 
+To run this optimized production build, use:
 
 ```bash
 # prod build with AoT compilation and Rollup tree-shaking, will output the production application in `dist/prod`
@@ -96,7 +97,7 @@ $ npm run build.prod.rollup.aot
 
 Your project will be compiled ahead of time (AOT), and then the resulting bundle will be tree-shaken and minified. During the tree-shaking process Rollup statically analyses your code, and your dependencies, and includes the bare minimum in your bundle.
 
-**Notes** 
+**Notes**
 - Beware of non-static/side-effectful imports. These cannot be properly optimized. For this reason, even though tree-shaking is taking place the developer still needs to be careful not to include non-static imports that are unnecessary, as those referenced imports will always end up in final bundle. Special attention should be given to RxJs, which makes heavy use of non-static/side-effectful imports: make sure you only add the operators you use, as any added operators will be included in your final production bundle.
 - UMD modules result in code that cannot be properly optimized. For best results, prefer ES6 modules whenever possible. This includes third-party dependencies: if one is published in both UMD and ES6 modules, go with the ES6 modules version.
 - During a production build, CommonJs modules will be automatically converted to ES6 modules. This means you can use them and/or require dependencies that use them without any issues.
@@ -105,7 +106,7 @@ Your project will be compiled ahead of time (AOT), and then the resulting bundle
 
 The application provides full Docker support. You can use it for both development as well as production builds and deployments.
 
-## How to build and start the dockerized version of the application 
+## How to build and start the dockerized version of the application
 
 The Dockerization infrastructure is described in the `docker-compose.yml` (respectively `docker-compose.production.yml`.
 The application consists of two containers:
@@ -279,7 +280,7 @@ Forks of this project demonstrate how to extend and integrate with other librari
  - https://github.com/UIUXEngineering/angular2-jspm-typescript-seed - integration with [JSPM](http://jspm.io/).
  - http://ngbot.io - a chat bot built with angular-seed.
  - [angular-seed-inspinia](https://github.com/DmitriyPotapov/angular-seed-inspinia) - integration with custom design template
- 
+
 # Directory Structure
 
 ```

package.json

@@ -141,6 +141,7 @@
     "@angular/platform-browser": "^4.0.0-rc.2",
     "@angular/platform-browser-dynamic": "^4.0.0-rc.2",
     "@angular/router": "^4.0.0-rc.2",
+    "@angular/service-worker": "^1.0.0-beta.6",
     "core-js": "^2.4.1",
     "intl": "^1.2.5",
     "rxjs": "^5.2.0",

src/client/app/main-prod.ts

@@ -11,12 +11,12 @@ enableProdMode();
 
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
 
-// In order to start the Service Worker located at "./worker.js"
+// In order to start the Service Worker located at "/worker-basic.min.js"
 // uncomment this line. More about Service Workers here
 // https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
 //
 // if ('serviceWorker' in navigator) {
-//   (<any>navigator).serviceWorker.register('./worker.js').then((registration: any) =>
+//   (<any>navigator).serviceWorker.register('/worker-basic.min.js').then((registration: any) =>
 //       console.log('ServiceWorker registration successful with scope: ', registration.scope))
 //     .catch((err: any) =>
 //       console.log('ServiceWorker registration failed: ', err));

src/client/app/main.ts

@@ -19,3 +19,17 @@ if (String('<%= BUILD_TYPE %>') === 'prod') { enableProdMode(); }
   // const options: any = { providers };
   platformBrowserDynamic().bootstrapModule(AppModule/*, options*/);
 // });
+
+// In order to start the Service Worker located at "/worker-basic.[min.]js"
+// uncomment this line. More about Service Workers here
+// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
+//
+// if ('serviceWorker' in navigator) {
+//   let workerScript = '/worker-basic';
+//   if (String('<%= BUILD_TYPE %>') === 'prod') { workerScript = workerScript + '.min'; }
+//   workerScript = workerScript + '.js';
+//   (<any>navigator).serviceWorker.register(workerScript).then((registration: any) =>
+//       console.log('ServiceWorker registration successful with scope: ', registration.scope))
+//     .catch((err: any) =>
+//       console.log('ServiceWorker registration failed: ', err));
+// }

src/client/ngsw-manifest.json

@@ -0,0 +1,18 @@
+{
+  "static": {
+    "urls": {
+    }
+  },
+  "routing": {
+    "index": "/index.html",
+    "routes": {
+      "/": {
+        "prefix": false
+      }
+    }
+  },
+  "push": {
+    "showNotifications": true,
+    "backgroundOnly": false
+  }
+}

tools/config/seed.config.ts

@@ -456,6 +456,10 @@ export class SeedConfig {
         main: 'bundles/router.umd.js',
         defaultExtension: 'js'
       },
+      '@angular/service-worker': {
+        main: 'bundles/service-worker.umd.js',
+        defaultExtension: 'js'
+      },
       'rxjs': {
         main: 'Rx.js',
         defaultExtension: 'js'

tools/config/seed.tasks.json

@@ -9,7 +9,8 @@
     "build.assets.dev",
     "build.html_css",
     "build.js.dev",
-    "build.index.dev"
+    "build.index.dev",
+    "sw.manifest.static"
   ],
 
   "build.dev.watch": [
@@ -36,7 +37,8 @@
     "build.bundles",
     "build.bundles.app",
     "minify.bundles",
-    "build.index.prod"
+    "build.index.prod",
+    "sw.manifest.static"
   ],
 
   "build.prod.aot": [
@@ -52,7 +54,8 @@
     "build.bundles",
     "build.bundles.app.aot",
     "minify.bundles",
-    "build.index.prod"
+    "build.index.prod",
+    "sw.manifest.static"
   ],
 
   "build.prod.rollup.aot": [
@@ -69,7 +72,8 @@
     "build.bundles.app.rollup.aot",
     "transpile.bundles.rollup.aot",
     "minify.bundles",
-    "build.index.prod"
+    "build.index.prod",
+    "sw.manifest.static"
   ],
 
   "build.test": [
@@ -79,7 +83,8 @@
     "build.html_css",
     "build.js.dev",
     "build.js.test",
-    "build.index.dev"
+    "build.index.dev",
+    "sw.manifest.static"
   ],
 
   "test.watch": [
@@ -123,4 +128,3 @@
     "karma.run"
   ]
 }
-

tools/tasks/seed/build.assets.dev.ts

@@ -13,6 +13,7 @@ export =
     run(done: any) {
       let paths: string[] = [
         join(Config.APP_SRC, '**'),
+        join(Config.NPM_BASE, '@angular', 'service-worker', 'bundles', 'worker-basic.js'),
         '!' + join(Config.APP_SRC, '**', '*.ts'),
         '!' + join(Config.APP_SRC, '**', '*.scss'),
         '!' + join(Config.APP_SRC, '**', '*.sass')
@@ -22,4 +23,3 @@ export =
         .pipe(gulp.dest(Config.APP_DEST));
     }
   };
-

tools/tasks/seed/build.assets.prod.ts

@@ -22,6 +22,7 @@ export = () => {
   let es: any = require('event-stream');
   return gulp.src([
     join(Config.APP_SRC, '**'),
+    join(Config.NPM_BASE, '@angular', 'service-worker', 'bundles', 'worker-basic.min.js'),
     '!' + join(Config.APP_SRC, 'tsconfig.json'),
     '!' + join(Config.APP_SRC, '**', '*.ts'),
     '!' + join(Config.APP_SRC, '**', '*.css'),

tools/tasks/seed/sw.manifest.static.ts

@@ -0,0 +1,13 @@
+import * as gulp from 'gulp';
+import { gulpAddStaticFiles } from '@angular/service-worker/build/gulp';
+import Config from '../../config';
+import { join } from 'path';
+
+export = () => {
+  return gulp.src([join(Config.APP_SRC, 'ngsw-manifest.json')])
+    .pipe(gulpAddStaticFiles(gulp.src([
+      join(Config.APP_DEST, '**', '*'),
+      '!' + join(Config.APP_DEST, 'ngsw-manifest.json')
+    ], { nodir: true })))
+    .pipe(gulp.dest(Config.APP_DEST));
+};