Use Service Workers instead of AppCache, if available. Fixes #979

app/index.html

@@ -80,6 +80,7 @@
   <script type="text/javascript" src="js/controllers.js"></script>
   <script type="text/javascript" src="js/filters.js"></script>
   <script type="text/javascript" src="js/messages_manager.js"></script>
+  <script type="text/javascript" src="js/offline-manager.js"></script>
 
   <!--PRODUCTION_ONLY_BEGIN
     <script type="text/javascript" src="js/templates.js"></script>

app/js/init.js

@@ -1,67 +1,3 @@
-;(function initAutoUpgrade () {
-
-  // Prevent click-jacking
-  try {
-    if (window == window.top || window.chrome && chrome.app && chrome.app.window) {
-      document.documentElement.style.display = 'block';
-    } else {
-      top.location = self.location;
-    }
-  } catch (e) {console.error('CJ protection', e)};
-
-  window.safeConfirm = function (params, callback) {
-    if (typeof params === 'string') {
-      params = {message: params};
-    }
-    var result = false
-    try {
-      result = confirm(params.message);
-    } catch (e) {
-      result = true;
-    }
-    setTimeout(function () {callback(result)}, 10);
-  };
-
-  if (!window.applicationCache || Config.Modes.packed || !window.addEventListener) {
-    return;
-  }
-
-  var appCache = window.applicationCache,
-      declined = false,
-      updateTimeout = false,
-      scheduleUpdate = function (delay) {
-        clearTimeout(updateTimeout);
-        updateTimeout = setTimeout(function () {
-          try {
-            appCache.update();
-          } catch (ex) {
-            console.log('appCache.update: ' + ex);
-          }
-        }, delay || 300000);
-      },
-      attach = function () {
-        appCache.addEventListener('updateready', function (e) {
-          if (appCache.status == appCache.UPDATEREADY) {
-            if (!declined) {
-              safeConfirm({type: 'WEBOGRAM_UPDATED_RELOAD', message: 'A new version of Webogram is downloaded. Launch it?'}, function (result) {
-                if (result) {
-                  window.location.reload();
-                } else {
-                  declined = true;
-                }
-              });
-              scheduleUpdate();
-            }
-          }
-        }, false);
-        appCache.addEventListener('noupdate', function () {scheduleUpdate()}, false);
-        appCache.addEventListener('error', function () {scheduleUpdate()}, false);
-      };
-
-  scheduleUpdate(3000);
-  window.addEventListener('load', attach);
-})();
-
 (function initApplication () {
   var classes = [
     Config.Navigator.osX ? 'osx' : 'non_osx',

app/js/offline-manager.js

@@ -0,0 +1,92 @@
+(function initAutoUpgrade () {
+  // Prevent click-jacking
+  try {
+    if (window == window.top || window.chrome && chrome.app && chrome.app.window) {
+      document.documentElement.style.display = 'block';
+    } else {
+      top.location = self.location;
+    }
+  } catch (e) {console.error('CJ protection', e)};
+
+  window.safeConfirm = function (params, callback) {
+    if (typeof params === 'string') {
+      params = {message: params};
+    }
+    var result = false
+    try {
+      result = confirm(params.message);
+    } catch (e) {
+      result = true;
+    }
+    setTimeout(function () {callback(result)}, 10);
+  };
+
+  if ((!navigator.serviceWorker && !window.applicationCache) || Config.Modes.packed || !window.addEventListener) {
+    return;
+  }
+
+  var declined = false;
+  function updateFound() {
+    if (!declined) {
+      safeConfirm({type: 'WEBOGRAM_UPDATED_RELOAD', message: 'A new version of Webogram is downloaded. Launch it?'}, function (result) {
+        if (result) {
+          window.location.reload();
+        } else {
+          declined = true;
+        }
+      });
+    }
+  }
+
+  if (navigator.serviceWorker) {
+    // If available, use a Service Worker to handle offlining.
+    navigator.serviceWorker.register('offline-worker.js').then(function(registration) {
+      console.log('offline worker registered');
+      registration.addEventListener('updatefound', function() {
+        var installingWorker = this.installing;
+
+        // Wait for the new service worker to be installed before prompting to update.
+        installingWorker.addEventListener('statechange', function() {
+          switch (installingWorker.state) {
+            case 'installed':
+              // Only show the prompt if there is currently a controller so it is not
+              // shown on first load.
+              if (navigator.serviceWorker.controller) {
+                updateFound();
+              }
+              break;
+
+            case 'redundant':
+              console.error('The installing service worker became redundant.');
+              break;
+          }
+        });
+      });
+    });
+  } else {
+    // Otherwise, use AppCache.
+    var appCache = window.applicationCache,
+        updateTimeout = false,
+        scheduleUpdate = function (delay) {
+          clearTimeout(updateTimeout);
+          updateTimeout = setTimeout(function () {
+            try {
+              appCache.update();
+            } catch (ex) {
+              console.log('appCache.update: ' + ex);
+            }
+          }, delay || 300000);
+        };
+
+    scheduleUpdate(3000);
+    window.addEventListener('load', function () {
+      appCache.addEventListener('updateready', function () {
+        if (appCache.status == appCache.UPDATEREADY) {
+          updateFound();
+        }
+      }, false);
+      appCache.addEventListener('noupdate', function () {scheduleUpdate()}, false);
+      appCache.addEventListener('error', function () {scheduleUpdate()}, false);
+    });
+  }
+})();

gulpfile.js

@@ -11,6 +11,7 @@ var less = require('gulp-less');
 var del = require('del');
 var runSequence = require('run-sequence');
 var oghliner = require('oghliner');
+var gulpServiceWorker = require('gulp-serviceworker');
 
 // The generated file is being created at src
 // so it can be fetched by usemin.
@@ -153,18 +154,25 @@ gulp.task('disable-production', function() {
   );
 });
 
-gulp.task('add-appcache-manifest', ['build'], function() {
-  var sources = [
-    './dist/**/*',
-    '!dist/manifest.*',
-    '!dist/*.html',
-    '!dist/fonts/*',
-    '!dist/img/icons/icon*.png',
-    '!dist/js/background.js'
-  ];
+var fileGlobs = [
+  './dist/**/*',
+  '!dist/manifest.*',
+  '!dist/*.html',
+  '!dist/fonts/*',
+  '!dist/img/icons/icon*.png',
+  '!dist/js/background.js',
+];
 
+gulp.task('generate-service-worker', ['build'], function() {
+  return gulp.src(fileGlobs)
+  .pipe(gulpServiceWorker({
+    rootDir: 'dist/',
+  }));
+});
+
+gulp.task('add-appcache-manifest', ['build'], function() {
   return es.concat(
-    gulp.src(sources)
+    gulp.src(fileGlobs)
       .pipe($.manifest({
           timestamp: true,
           network: ['http://*', 'https://*', '*'],
@@ -174,7 +182,7 @@ gulp.task('add-appcache-manifest', ['build'], function() {
       )
       .pipe(gulp.dest('./dist')),
 
-    gulp.src(sources)
+    gulp.src(fileGlobs)
       .pipe($.manifest({
           timestamp: true,
           network: ['http://*', 'https://*', '*'],
@@ -262,7 +270,9 @@ gulp.task('build', ['clean'], function(callback) {
 
 gulp.task('package', ['cleanup-dist']);
 
-gulp.task('deploy', ['add-appcache-manifest'], function() {
+gulp.task('offline', ['add-appcache-manifest', 'generate-service-worker']);
+
+gulp.task('deploy', ['offline'], function() {
   return oghliner.deploy({
     rootDir: 'dist/',
   });

package.json

@@ -57,6 +57,7 @@
     "gulp-ng-annotate": "~0.5.2",
     "gulp-replace": "^0.2.0",
     "gulp-rev": "^1.1.0",
+    "gulp-serviceworker": "0.0.3",
     "gulp-uglify": "^1.0.2",
     "gulp-usemin": "^0.3.11",
     "gulp-zip": "^0.1.2",