Merge pull request #390 from schlagmichdoch/fix-sw-updates

Fix service worker updates and speed up updates

Author: schlagmichdoch

public/scripts/localization.js

@@ -5,7 +5,7 @@ class Localization {
         Localization.defaultLocale = "en";
         Localization.supportedLocales = [
             "ar", "be", "bg", "ca", "cs", "da", "de", "en", "es", "et", "eu", "fa", "fr", "he", "hu", "id", "it", "ja",
-            "kn", "ko", "nb", "nn", "nl", "pl", "pt-BR", "ro", "ru", "sk", "ta", "tr", "uk", "zh-CN", "zh-HK", "zh-TW"
+            "kn", "ko", "nb", "nl", "nn", "pl", "pt-BR", "ro", "ru", "sk", "ta", "tr", "uk", "zh-CN", "zh-HK", "zh-TW"
         ];
         Localization.supportedLocalesRtl = ["ar", "he"];
 

public/service-worker.js

@@ -1,12 +1,12 @@
 const cacheVersion = 'v1.11.1';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
-const forceFetch = false; // FOR DEVELOPMENT: Set to true to always update assets instead of using cached versions
 const relativePathsToCache = [
     './',
     'index.html',
     'manifest.json',
     'styles/styles-main.css',
     'styles/styles-deferred.css',
+    'scripts/browser-tabs-connector.js',
     'scripts/localization.js',
     'scripts/main.js',
     'scripts/network.js',
@@ -28,45 +28,57 @@ const relativePathsToCache = [
     'images/android-chrome-512x512.png',
     'images/android-chrome-512x512-maskable.png',
     'images/apple-touch-icon.png',
+    'fonts/OpenSans/static/OpenSans-Medium.ttf',
     'lang/ar.json',
     'lang/be.json',
+    'lang/bg.json',
     'lang/ca.json',
     'lang/cs.json',
     'lang/da.json',
     'lang/de.json',
     'lang/en.json',
     'lang/es.json',
+    'lang/et.json',
+    'lang/eu.json',
+    'lang/fa.json',
     'lang/fr.json',
     'lang/he.json',
     'lang/hu.json',
     'lang/id.json',
     'lang/it.json',
     'lang/ja.json',
     'lang/kn.json',
+    'lang/ko.json',
     'lang/nb.json',
     'lang/nl.json',
+    'lang/nn.json',
     'lang/pl.json',
     'lang/pt-BR.json',
     'lang/ro.json',
     'lang/ru.json',
+    'lang/sk.json',
+    'lang/ta.json',
     'lang/tr.json',
     'lang/uk.json',
     'lang/zh-CN.json',
+    'lang/zh-HK.json',
     'lang/zh-TW.json'
 ];
 const relativePathsNotToCache = [
     'config'
 ]
 
 self.addEventListener('install', function(event) {
-  // Perform install steps
+    // Perform install steps
+    console.log("Cache files for sw:", cacheVersion);
     event.waitUntil(
         caches.open(cacheTitle)
             .then(function(cache) {
                 return cache
                     .addAll(relativePathsToCache)
                     .then(_ => {
-                        console.log('All files cached.');
+                        console.log('All files cached for sw:', cacheVersion);
+                        self.skipWaiting();
                     });
             })
     );
@@ -76,20 +88,25 @@ self.addEventListener('install', function(event) {
 const fromNetwork = (request, timeout) =>
     new Promise((resolve, reject) => {
         const timeoutId = setTimeout(reject, timeout);
-        fetch(request)
+        fetch(request, {cache: "no-store"})
             .then(response => {
+                if (response.redirected) {
+                    throw new Error("Fetch is redirect. Abort usage and cache!");
+                }
+
                 clearTimeout(timeoutId);
                 resolve(response);
 
+                // Prevent requests that are in relativePathsNotToCache from being cached
                 if (doNotCacheRequest(request)) return;
 
-                update(request)
+                updateCache(request)
                     .then(() => console.log("Cache successfully updated for", request.url))
-                    .catch(reason => console.log("Cache could not be updated for", request.url, "Reason:", reason));
+                    .catch(err => console.log("Cache could not be updated for", request.url, err));
             })
             .catch(error => {
                 // Handle any errors that occurred during the fetch
-                console.error(`Could not fetch ${request.url}. Are you online?`);
+                console.error(`Could not fetch ${request.url}.`);
                 reject(error);
             });
     });
@@ -111,16 +128,16 @@ const doNotCacheRequest = request => {
 };
 
 // cache the current page to make it available for offline
-const update = request => new Promise((resolve, reject) => {
-    if (doNotCacheRequest(request)) {
-        reject("Url is specifically prevented from being cached in the serviceworker.");
-        return;
-    }
+const updateCache = request => new Promise((resolve, reject) => {
     caches
         .open(cacheTitle)
         .then(cache =>
             fetch(request, {cache: "no-store"})
                 .then(response => {
+                    if (response.redirected) {
+                        throw new Error("Fetch is redirect. Abort usage and cache!");
+                    }
+
                     cache
                         .put(request, response)
                         .then(() => resolve());
@@ -129,9 +146,10 @@ const update = request => new Promise((resolve, reject) => {
         );
 });
 
-// general strategy when making a request (eg if online try to fetch it
-// from cache, if something fails fetch from network. Update cache everytime files are fetched.
-// This way files should only be fetched if cacheVersion is changed
+// general strategy when making a request:
+// 1. Try to retrieve file from cache
+// 2. If cache is not available: Fetch from network and update cache.
+// This way, cached files are only updated if the cacheVersion is changed
 self.addEventListener('fetch', function(event) {
     if (event.request.method === "POST") {
         // Requests related to Web Share Target.
@@ -141,39 +159,48 @@ self.addEventListener('fetch', function(event) {
         })());
     }
     else {
-        // Regular requests not related to Web Share Target.
-        if (forceFetch) {
-            event.respondWith(fromNetwork(event.request, 10000));
-        }
-        else {
-            event.respondWith(
-                fromCache(event.request)
+        // Regular requests not related to Web Share Target:
+        // If request is excluded from cache -> respondWith fromNetwork
+        // else -> try fromCache first
+        event.respondWith(
+            doNotCacheRequest(event.request)
+                ? fromNetwork(event.request, 10000)
+                : fromCache(event.request)
                     .then(rsp => {
                         // if fromCache resolves to undefined fetch from network instead
-                        return rsp || fromNetwork(event.request, 10000);
+                        if (!rsp) {
+                            throw new Error("No match found.");
+                        }
+                        return rsp;
                     })
-            );
-        }
+                    .catch(error => {
+                        console.error("Could not retrieve request from cache:", event.request.url, error);
+                        return fromNetwork(event.request, 10000);
+                    })
+        );
     }
 });
 
 
 // on activation, we clean up the previously registered service workers
 self.addEventListener('activate', evt => {
-        return evt.waitUntil(
-            caches.keys()
-                .then(cacheNames => {
-                    return Promise.all(
-                        cacheNames.map(cacheName => {
-                            if (cacheName !== cacheTitle) {
-                                return caches.delete(cacheName);
-                            }
-                        })
-                    );
-                })
-        )
-    }
-);
+    console.log("Activate sw:", cacheVersion);
+    evt.waitUntil(clients.claim());
+    return evt.waitUntil(
+        caches
+            .keys()
+            .then(cacheNames => {
+                return Promise.all(
+                    cacheNames.map(cacheName => {
+                        if (cacheName !== cacheTitle) {
+                            console.log("Delete cache:", cacheName);
+                            return caches.delete(cacheName);
+                        }
+                    })
+                );
+            })
+    )
+});
 
 const evaluateRequestData = function (request) {
     return new Promise(async (resolve) => {