diff --git a/public/scripts/localization.js b/public/scripts/localization.js index ec915a5..5121d0c 100644 --- a/public/scripts/localization.js +++ b/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"]; diff --git a/public/service-worker.js b/public/service-worker.js index eb3601f..ad5e7ea 100644 --- a/public/service-worker.js +++ b/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,14 +28,19 @@ 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', @@ -43,15 +48,20 @@ const relativePathsToCache = [ '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 = [ @@ -59,14 +69,16 @@ const relativePathsNotToCache = [ ] 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) => {