Update offline service worker to... work. The new approach always tri…

…es online first, and falls back to cache. Only specific files are ever cached which solves a pollution problem.

gulpfile.js

@@ -23,7 +23,7 @@ var outDir = 'out/';
 var paths = {
     html: ['index.html'],
     images: ['images/*.png'],
-    extras: ['manifest.json', 'favicon.ico', 'single-page-offline-service-worker.js'],
+    extras: ['manifest.json', 'favicon.ico', 'simple-offline-service-worker.js'],
 };
 
 gulp.task('clean', function() {

index.js

@@ -107,10 +107,9 @@ window.addEventListener('DOMContentLoaded', function() {
     if (rightConversionTypeFromDOM !== rightConversionType)
         onRightTypeChanged();
 
-    // We queue a task to setup the offline cache so it doesn't affect the critical path.
-    setTimeout(function() {
-        setupOfflineCache();
-    }, 500);
+    // Bootup our service worker for offline support.
+    if ('serviceWorker' in navigator)
+        navigator.serviceWorker.register('simple-offline-service-worker.js');
 });
 
 function updateConversion() {
@@ -287,10 +286,3 @@ function imageType(file) {
     }
     return '';
 }
-
-function setupOfflineCache() {
-    if (!('serviceWorker' in navigator))
-        return;
-    // Disabled for testing.
-    // navigator.serviceWorker.register('single-page-offline-service-worker.js');
-}

simple-offline-service-worker.js

@@ -0,0 +1,45 @@
+'use strict';
+// Simple offline service worker.
+//
+// On the main page include:
+//     if ('serviceWorker' in navigator)
+//         navigator.serviceWorker.register('simple-offline-service-worker.js');
+//
+// This cache always requests from the network to keep the cache fresh. There is a tradeoff here
+// because we'll wait ages for a slow network despite having a cached response ready to go.
+
+var version = 'v1.0.2';
+
+// FIXME: Is it possible to serve from ./ and also have an offline app using manifest.json without
+// making two requests?
+var offlineFiles = [ './', './index.html' ];
+
+self.addEventListener('install', function(event) {
+    // Cache our list of files.
+    event.waitUntil(caches.open(version).then(function(cache) {cache.addAll(offlineFiles); }));
+});
+
+self.addEventListener('activate', function(event) {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', function(event) {
+    event.respondWith(
+        fetch(event.request).then(function(networkReponse) {
+            // Check if this request is already in our cache. We only want to cache previously
+            // cached items to prevent the cache from getting polluted.
+            caches.open(version).then(function(cache) {
+                cache.match(event.request).then(function(previouslyCachedResponse) {
+                    if (!previouslyCachedResponse)
+                        return;
+                    // Clone the response since we're also returning it below.
+                    cache.put(event.request, networkReponse.clone());
+                });
+            });
+            return networkReponse;
+        }).catch(function(networkIssue) {
+            // Return from the cache if available, or explode which will 404.
+            return caches.match(event.request);
+        })
+    );
+});