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.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"];

View file

@ -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 = [
@ -60,13 +70,15 @@ const relativePathsNotToCache = [
self.addEventListener('install', function(event) {
// 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 {
// Regular requests not related to Web Share Target:
// If request is excluded from cache -> respondWith fromNetwork
// else -> try fromCache first
event.respondWith(
fromCache(event.request)
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 => {
console.log("Activate sw:", cacheVersion);
evt.waitUntil(clients.claim());
return evt.waitUntil(
caches.keys()
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) => {