feat(ServiceWorker): add broccoli plugin to generate service worker

Paired with @alxhub

Closes #6

Author: jeffbcross

angular-cli-build.js

@@ -17,18 +17,21 @@ var concat = require('broccoli-concat');
  */
 global.Event = function () {};
 const AppShellPlugin = require('./broccoli-app-shell.ts');
+const ServiceWorkerPlugin = require('./broccoli-service-worker.ts');
 
 module.exports = function(defaults) {
   var app = new Angular2App(defaults, {
     vendorNpmFiles: [
       'angularfire2/**/*.js',
-      'firebase/lib/*.js',
-      'rxjs/**/*.js',
-      '@angular2-material/**/*.+(js|css|svg)',
-      'material-design-icons/**/*.+(css|svg|woff|ttf|eot|woff2)'
+      'firebase/lib/firebase-web.js',
+      'rxjs/bundles/Rx.js',
+      '@angular2-material/**/*.+(js|css|svg|map)',
+      'material-design-icons/**/*.(woff2|woff)',
+      'angular2-service-worker/dist/worker.js'
     ]
   });
   const ngTree = app.toTree();
+  var swTree = new ServiceWorkerPlugin(ngTree);
   var appShellIndex = new AppShellPlugin(ngTree, 'index.html', 'app/issue-cli');
   var concatExtrasTree = new Funnel('src/client', {
     include: [
@@ -37,7 +40,7 @@ module.exports = function(defaults) {
     ]
   });
   var jsBundleTree = concat(mergeTrees([ngTree, concatExtrasTree]), {
-    inputFiles: [
+    headerFiles: [
       // TODO: use minified for production build
       'vendor/es6-shim/es6-shim.js',
       'vendor/systemjs/dist/system-polyfills.js',
@@ -46,15 +49,15 @@ module.exports = function(defaults) {
       'vendor/rxjs/bundles/Rx.js',
       'vendor/angular2/bundles/angular2.dev.js',
       'vendor/angular2/bundles/http.dev.js',
-      'vendor/angular2/bundles/router.dev.js',
-      'system.config.js'
+      'vendor/angular2/bundles/router.dev.js'
     ],
+    inputFiles: ['system.config.js'],
     header: ';(function() {',
     footer: '}());',
     footerFiles: ['auto-start.js'],
     sourceMapConfig: { enabled: true },
     allowNone: false,
     outputFile: '/app-concat.js'
   });
-  return mergeTrees([ngTree, appShellIndex, jsBundleTree], { overwrite: true })
+  return mergeTrees([ngTree, appShellIndex, jsBundleTree, swTree], { overwrite: true })
 };

broccoli-service-worker.ts

@@ -0,0 +1,68 @@
+const fse           = require('fs-extra');
+const path          = require('path');
+const BroccoliPlugin:BroccoliPluginConstructor        = require('broccoli-caching-writer');
+const ngsw = require ('angular2-service-worker');
+const MANIFEST_NAME = 'manifest.appcache';
+const WORKER_NAME = 'worker.js';
+
+interface BroccoliPluginConstructor {
+    new(inputNodes:any[], options?:any): BroccoliPluginConstructor
+    inputPaths: string[];
+    outputPath: string;
+}
+
+class SourceResolver {
+  constructor(public inputPaths:string[]) {}
+  resolve(sources:string[]): Object {
+    return Promise.resolve(sources.reduce((prev, curr) => {
+      prev[`/${path.relative(this.inputPaths[0], curr)}`] = fse.readFileSync(curr, 'utf-8');
+      return prev;
+    }, {}));
+  }
+}
+
+class ServiceWorkerPlugin extends BroccoliPlugin {
+  constructor(inputNodes:any, options?:any) {
+    super([inputNodes]);
+  }
+
+  build() {
+    var sourceResolver = new SourceResolver(this.inputPaths);
+    var manifestWriter = new ngsw.ManifestWriter(sourceResolver);
+    // TODO(jeffbcross): plugin assumes single input path right now.
+    return manifestWriter.generate({
+      group: [{
+        name: 'app',
+        sources: this.inputPaths
+          .map(p => recursiveReaddirSync(p))
+          .reduce((prev, curr) => prev.concat(curr), [])
+          .filter(p => {
+            var relativePath = path.relative(this.inputPaths[0], p);
+            return relativePath !== MANIFEST_NAME && relativePath !== WORKER_NAME;
+          })
+        }]
+      })
+      .then(manifest => {
+        fse.writeFileSync(path.join(this.outputPath, MANIFEST_NAME), manifest);
+      })
+      .then(() => {
+        fse.writeFileSync(path.resolve(this.outputPath, WORKER_NAME), fse.readFileSync(path.resolve(this.inputPaths[0], 'vendor/angular2-service-worker/dist/worker.js')));
+      });
+  }
+}
+
+module.exports = ServiceWorkerPlugin;
+
+function recursiveReaddirSync(src) {
+  var files = [];
+  fse.readdirSync(src).forEach(function(res) {
+    var child = path.join(src, res);
+    var stat = fse.statSync(child);
+    if (stat.isFile()) {
+      files.push(child);
+    } else if (stat.isDirectory()) {
+      files = files.concat(recursiveReaddirSync(child));
+    }
+  })
+  return files;
+}

package.json

@@ -37,6 +37,7 @@
     "angular2-express-engine": "^0.10.0",
     "angular2-gulp-prerender": "^0.10.1",
     "angular2-hapi-engine": "^0.10.1",
+    "angular2-service-worker": "^0.1.1",
     "angular2-universal": "^0.90.2",
     "angular2-universal-polyfills": "^0.3.4",
     "broccoli-caching-writer": "^2.2.1",

src/client/index.html

@@ -6,18 +6,15 @@
   <base href="/">
   {{content-for 'head'}}
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-
-  <!-- Service worker support is disabled by default.
-       Install the worker script and uncomment to enable.
-       Only enable service workers in production.
-  <script type="text/javascript">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!--<script type="text/javascript">
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/worker.js').catch(function(err) {
         console.log('Error installing service worker: ', err);
       });
     }
-  </script>
-  -->
+  </script>-->
+
   <style>
     html,body {
       margin: 0;

tsconfig.json

@@ -9,6 +9,7 @@
     },
     "files": [
       "typings/main.d.ts",
-      "broccoli-app-shell.ts"
+      "broccoli-app-shell.ts",
+      "broccoli-service-worker.ts"
     ]
 }