Using sw-precache to generate the service worker file

Author: Matt Gaunt

gulp-tasks/scripts.js

@@ -39,7 +39,8 @@ gulp.task('scripts:watch', function() {
 
 // Takes a set of objects defining inputs of javascript files
 // to run through browserify and babelify
-function compileES6Bundles(browserifyBundles, minify) {
+function compileES6Bundles(browserifyBundles, cb) {
+  var finishedCount = 0;
   browserifyBundles.forEach(function(bundle) {
     var browserifyBundle = browserify({
       entries: [bundle.srcPath]
@@ -55,14 +56,21 @@ function compileES6Bundles(browserifyBundles, minify) {
       // If this is a production build - minify JS
       .pipe(gulpif(GLOBAL.config.env === 'prod', streamify(uglify())))
       .pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
-      .pipe(gulp.dest(bundle.dest));
+      .pipe(gulp.dest(bundle.dest))
+      .on('end', function() {
+        finishedCount++;
+
+        if (finishedCount === browserifyBundles.length) {
+          cb();
+        }
+      });
   });
 }
 
 // This takes a source path and finds all files ending
 // with .es6.js and creates the bundles to run through browserify
 // and babelify
-function generateES6Bundles(srcPath) {
+function generateES6Bundles(srcPath, cb) {
   if (!srcPath) {
     throw new Error('Invalid source path given to generateES6Bundles');
   }
@@ -88,7 +96,7 @@ function generateES6Bundles(srcPath) {
     });
   });
 
-  compileES6Bundles(browserifyBundles);
+  compileES6Bundles(browserifyBundles, cb);
 }
 
 gulp.task('scripts:eslint', function() {
@@ -108,9 +116,7 @@ gulp.task('scripts:eslint', function() {
 });
 
 gulp.task('scripts:es6', function(cb) {
-  generateES6Bundles(GLOBAL.config.src);
-
-  cb();
+  generateES6Bundles(GLOBAL.config.src, cb);
 });
 
 gulp.task('scripts:es5', function() {

gulp-tasks/service-worker.js

@@ -0,0 +1,41 @@
+/**
+ *
+ * Copyright 2015 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var gulp = require('gulp');
+var path = require('path');
+var swPrecache = require('sw-precache');
+
+gulp.task('service-worker:watch', function(cb) {
+  gulp.watch(GLOBAL.config.src + '/**/*.*', ['service-worker']);
+});
+
+gulp.task('service-worker', function(cb) {
+  swPrecache.write(path.join(GLOBAL.config.dest, 'sw.js'), {
+    staticFileGlobs: [
+      GLOBAL.config.dest + '/**/*.{js,html,css,png,jpg,jpeg,gif,svg}',
+      GLOBAL.config.dest + '/manifest.json',
+    ],
+    dynamicUrlToDependencies: {
+      '/app-shell': ['server/layouts/app-shell.handlebars'],
+      '/partials/': ['server/layouts/partial.handlebars', 'server/views/index.handlebars'],
+      '/partials/url-1': ['server/layouts/partial.handlebars', 'server/views/url-1.handlebars'],
+      '/partials/url-2': ['server/layouts/partial.handlebars', 'server/views/url-2.handlebars'],
+    },
+    stripPrefix: GLOBAL.config.dest,
+    navigateFallback: '/app-shell'
+  }, cb);
+});

gulp-tasks/third_party.js

@@ -34,17 +34,18 @@ GLOBAL.config = {
     },
 };
 
-var allTasks = ['styles', 'scripts', 'copy', 'html', 'images', 'third_party'];
+var allTasks = ['styles', 'scripts', 'copy', 'html', 'images'];
 
 gulp.task('default', function(cb) {
   runSequence(
     'clean',
     'bump',
     allTasks,
+    'service-worker',
     cb);
 });
 
 gulp.task('dev', function() {
   GLOBAL.config.env = 'dev';
-  return runSequence('clean', allTasks, 'watch');
+  return runSequence('clean', allTasks, 'service-worker', 'watch');
 });

gulpfile.js

@@ -1,6 +1,6 @@
 {
   "name": "app-shell",
-  "version": "0.1.159",
+  "version": "0.1.174",
   "private": true,
   "license": "Apache",
   "engines": {
@@ -31,6 +31,7 @@
     "gulp-util": "^3.0.6",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.1.4",
+    "sw-precache": "^2.2.0",
     "vinyl-source-stream": "^1.1.0"
   }
 }