fix PWA offline capability

public/scripts/network.js

@@ -152,10 +152,9 @@ class ServerConnection {
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', 'Server connection lost. Retrying...');
+        Events.fire('notify-user', 'No server connection. Retry in 5s...');
         clearTimeout(this._reconnectTimer);
         this._reconnectTimer = setTimeout(_ => this._connect(), 5000);
-        this._connect();
         Events.fire('ws-disconnected');
     }
 

public/scripts/ui.js

@@ -1220,7 +1220,7 @@ class NetworkStatusUI {
         Events.on('offline', _ => this._showOfflineMessage());
         Events.on('online', _ => this._showOnlineMessage());
         Events.on('ws-connected', _ => this._showOnlineMessage());
-        Events.on('ws-disconnected', _ => window.animateBackground(false));
+        Events.on('ws-disconnected', _ => this._onWsDisconnected());
         if (!navigator.onLine) this._showOfflineMessage();
     }
 
@@ -1230,12 +1230,17 @@ class NetworkStatusUI {
     }
 
     _showOnlineMessage() {
+        window.animateBackground(true);
         if (!this.firstConnect) {
             this.firstConnect = true;
             return;
         }
         Events.fire('notify-user', 'You are back online');
-        window.animateBackground(true);
+    }
+
+    _onWsDisconnected() {
+        window.animateBackground(false);
+        if (!this.firstConnect) this.firstConnect = true;
     }
 }
 

public/service-worker.js

@@ -1,4 +1,5 @@
-const CACHE_NAME = 'pairdrop-cache-v4';
+const cacheVersion = 'v5';
+const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',
     './',
@@ -23,15 +24,50 @@ const urlsToCache = [
 self.addEventListener('install', function(event) {
   // Perform install steps
     event.waitUntil(
-        caches.open(CACHE_NAME)
+        caches.open(cacheTitle)
             .then(function(cache) {
-                console.log('Opened cache');
+                return cache.addAll(urlsToCache).then(_ => {
-                return cache.addAll(urlsToCache);
+                    console.log('All files cached.');
-        })
+                });
+            })
     );
 });
 
+// fetch the resource from the network
+const fromNetwork = (request, timeout) =>
+    new Promise((fulfill, reject) => {
+        const timeoutId = setTimeout(reject, timeout);
+        fetch(request).then(response => {
+            clearTimeout(timeoutId);
+            fulfill(response);
+            update(request);
+        }, reject);
+    });
 
+// fetch the resource from the browser cache
+const fromCache = request =>
+    caches
+        .open(cacheTitle)
+        .then(cache =>
+            cache
+                .match(request)
+                .then(matching => matching || cache.match('/offline/'))
+        );
+
+// cache the current page to make it available for offline
+const update = request =>
+    caches
+        .open(cacheTitle)
+        .then(cache =>
+            fetch(request).then(response => {
+                cache.put(request, response).then(_ => {
+                    console.log("Page successfully cached.")
+                })
+            })
+        );
+
+// general strategy when making a request (eg if online try to fetch it
+// from the network with a timeout, if something fails serve from cache)
 self.addEventListener('fetch', function(event) {
     if (event.request.method === "POST") {
         // Requests related to Web Share Target.
@@ -62,34 +98,24 @@ self.addEventListener('fetch', function(event) {
     } else {
         // Regular requests not related to Web Share Target.
         event.respondWith(
-            caches.match(event.request)
+            fromNetwork(event.request, 10000).catch(() => fromCache(event.request))
-                .then(function (response) {
-                        // Cache hit - return response
-                        if (response) {
-                            return response;
-                        }
-                        return fetch(event.request);
-                    }
-                )
         );
+        event.waitUntil(update(event.request));
     }
 });
 
 
-self.addEventListener('activate', function(event) {
+// on activation, we clean up the previously registered service workers
-  console.log('Updating Service Worker...')
+self.addEventListener('activate', evt =>
-  event.waitUntil(
+    evt.waitUntil(
-    caches.keys().then(function(cacheNames) {
+        caches.keys().then(cacheNames => {
-      return Promise.all(
+            return Promise.all(
-        cacheNames.filter(function(cacheName) {
+                cacheNames.map(cacheName => {
-          // Return true if you want to remove this cache,
+                    if (cacheName !== cacheTitle) {
-          // but remember that caches are shared across
+                        return caches.delete(cacheName);
-          // the whole origin
+                    }
-          return true
+                })
-        }).map(function(cacheName) {
+            );
-          return caches.delete(cacheName);
         })
-      );
+    )
-    })
+);
-  );
-});