mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 15:26:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix offline capability: Cache first -> fetch from network second. From now on, updates are only possible by increasing cacheVersion

Browse source
This commit is contained in:
schlagmichdoch 2023-10-12 18:57:26 +02:00
parent 8eb6e5bfab
commit 2131307fc6
6 changed files with 86 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

6
public/scripts/network.js
View file

@ -37,7 +37,7 @@ class ServerConnection {
_connect() {
clearTimeout(this._reconnectTimer);
if (this._isConnected() || this._isConnecting()) return;
if (this._isConnected() || this._isConnecting() || this._isOffline()) return;
if (this._isReconnect) {
Events.fire('notify-user', {
message: Localization.getTranslation("notifications.connecting"),
@ -246,6 +246,10 @@ class ServerConnection {
return this._socket && this._socket.readyState === this._socket.CONNECTING;
}
_isOffline() {
return !navigator.onLine;
}
_onError(e) {
console.error(e);
}

5
public/scripts/ui.js
View file

@ -2258,7 +2258,10 @@ class NetworkStatusUI {
}
_showOfflineMessage() {
Events.fire('notify-user', Localization.getTranslation("notifications.offline"));
Events.fire('notify-user', {
message: Localization.getTranslation("notifications.offline"),
persistent: true
});
}
_showOnlineMessage() {

61
public/service-worker.js
View file

@ -1,16 +1,18 @@
const cacheVersion = 'v1.9.0';
const cacheTitle = `pairdrop-cache-${cacheVersion}`;
const urlsToCache = [
'index.html',
'./',
'index.html',
'manifest.json',
'styles.css',
'scripts/localization.js',
'scripts/network.js',
'scripts/NoSleep.min.js',
'scripts/QRCode.min.js',
'scripts/theme.js',
'scripts/ui.js',
'scripts/util.js',
'scripts/qrcode.js',
'scripts/zip.min.js',
'scripts/NoSleep.min.js',
'scripts/theme.js',
'sounds/blop.mp3',
'images/favicon-96x96.png',
'images/favicon-96x96-notification.png',
@ -53,7 +55,7 @@ const fromNetwork = (request, timeout) =>
fetch(request).then(response => {
clearTimeout(timeoutId);
fulfill(response);
update(request);
update(request).then(() => console.log("Cache successfully updated for", request.url));
}, reject);
});
@ -62,9 +64,7 @@ const fromCache = request =>
caches
.open(cacheTitle)
.then(cache =>
cache
.match(request)
.then(matching => matching || cache.match('/offline/'))
cache.match(request)
);
// cache the current page to make it available for offline
@ -72,15 +72,16 @@ const update = request =>
caches
.open(cacheTitle)
.then(cache =>
fetch(request).then(response => {
cache.put(request, response).then(_ => {
console.log("Page successfully cached.")
fetch(request)
.then(async response => {
await cache.put(request, response);
})
})
.catch(() => console.log(`Cache could not be updated. ${request.url}`))
);
// 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)
// 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
self.addEventListener('fetch', function(event) {
if (event.request.method === "POST") {
// Requests related to Web Share Target.
@ -90,27 +91,33 @@ self.addEventListener('fetch', function(event) {
})());
} else {
// Regular requests not related to Web Share Target.
// FOR DEVELOPMENT: Comment in next line to always update assets instead of using cached versions
// event.respondWith(fromNetwork(event.request, 10000));return;
event.respondWith(
fromNetwork(event.request, 10000).catch(() => fromCache(event.request))
fromCache(event.request).then(rsp => {
// if fromCache resolves to undefined fetch from network instead
return rsp || fromNetwork(event.request, 10000);
})
);
event.waitUntil(update(event.request));
}
});
// on activation, we clean up the previously registered service workers
self.addEventListener('activate', evt =>
evt.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheTitle) {
return caches.delete(cacheName);
}
})
);
})
)
self.addEventListener('activate', evt => {
return evt.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheTitle) {
return caches.delete(cacheName);
}
})
);
})
)
}
);
const evaluateRequestData = function (request) {

6
public_included_ws_fallback/scripts/network.js
View file

@ -35,7 +35,7 @@ class ServerConnection {
_connect() {
clearTimeout(this._reconnectTimer);
if (this._isConnected() || this._isConnecting()) return;
if (this._isConnected() || this._isConnecting() || this._isOffline()) return;
if (this._isReconnect) {
Events.fire('notify-user', {
message: Localization.getTranslation("notifications.connecting"),
@ -257,6 +257,10 @@ class ServerConnection {
return this._socket && this._socket.readyState === this._socket.CONNECTING;
}
_isOffline() {
return !navigator.onLine;
}
_onError(e) {
console.error(e);
}

5
public_included_ws_fallback/scripts/ui.js
View file

@ -2260,7 +2260,10 @@ class NetworkStatusUI {
}
_showOfflineMessage() {
Events.fire('notify-user', Localization.getTranslation("notifications.offline"));
Events.fire('notify-user', {
message: Localization.getTranslation("notifications.offline"),
persistent: true
});
}
_showOnlineMessage() {

61
public_included_ws_fallback/service-worker.js
View file

@ -1,16 +1,18 @@
const cacheVersion = 'v1.9.0';
const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
const urlsToCache = [
'index.html',
'./',
'index.html',
'manifest.json',
'styles.css',
'scripts/localization.js',
'scripts/network.js',
'scripts/NoSleep.min.js',
'scripts/QRCode.min.js',
'scripts/theme.js',
'scripts/ui.js',
'scripts/util.js',
'scripts/qrcode.js',
'scripts/zip.min.js',
'scripts/NoSleep.min.js',
'scripts/theme.js',
'sounds/blop.mp3',
'images/favicon-96x96.png',
'images/favicon-96x96-notification.png',
@ -53,7 +55,7 @@ const fromNetwork = (request, timeout) =>
fetch(request).then(response => {
clearTimeout(timeoutId);
fulfill(response);
update(request);
update(request).then(() => console.log("Cache successfully updated for", request.url));
}, reject);
});
@ -62,9 +64,7 @@ const fromCache = request =>
caches
.open(cacheTitle)
.then(cache =>
cache
.match(request)
.then(matching => matching || cache.match('/offline/'))
cache.match(request)
);
// cache the current page to make it available for offline
@ -72,15 +72,16 @@ const update = request =>
caches
.open(cacheTitle)
.then(cache =>
fetch(request).then(response => {
cache.put(request, response).then(_ => {
console.log("Page successfully cached.")
fetch(request)
.then(async response => {
await cache.put(request, response);
})
})
.catch(() => console.log(`Cache could not be updated. ${request.url}`))
);
// 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)
// 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
self.addEventListener('fetch', function(event) {
if (event.request.method === "POST") {
// Requests related to Web Share Target.
@ -90,27 +91,33 @@ self.addEventListener('fetch', function(event) {
})());
} else {
// Regular requests not related to Web Share Target.
// FOR DEVELOPMENT: Comment in next line to always update assets instead of using cached versions
// event.respondWith(fromNetwork(event.request, 10000));return;
event.respondWith(
fromNetwork(event.request, 10000).catch(() => fromCache(event.request))
fromCache(event.request).then(rsp => {
// if fromCache resolves to undefined fetch from network instead
return rsp || fromNetwork(event.request, 10000);
})
);
event.waitUntil(update(event.request));
}
});
// on activation, we clean up the previously registered service workers
self.addEventListener('activate', evt =>
evt.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheTitle) {
return caches.delete(cacheName);
}
})
);
})
)
self.addEventListener('activate', evt => {
return evt.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== cacheTitle) {
return caches.delete(cacheName);
}
})
);
})
)
}
);
const evaluateRequestData = function (request) {