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

Fix service worker updates and speed up updates
This commit is contained in:
schlagmichdoch 2025-02-24 20:33:20 +01:00 committed by GitHub
commit 59bd9265bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 67 additions and 40 deletions

View file

@ -5,7 +5,7 @@ class Localization {
Localization.defaultLocale = "en"; Localization.defaultLocale = "en";
Localization.supportedLocales = [ Localization.supportedLocales = [
"ar", "be", "bg", "ca", "cs", "da", "de", "en", "es", "et", "eu", "fa", "fr", "he", "hu", "id", "it", "ja", "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"]; Localization.supportedLocalesRtl = ["ar", "he"];

View file

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