11.02.2022, 09:29
Guten Tag,
Ich habe ein kleines Problem mit einer PWA. Ich habe mich mit Service-Workern beschäftigt und ein wenig mit PWAs rumgespielt.
Ich würde gerne, dass meine PWA offline verfügbar ist. Ich habe auch im Service Worker den install und fetch Befehl definiert, jedoch wenn ich die App dann installiert habe und geöffnet und wieder komplett geschlossen habe und sogar den Web-Server herunterfahre und mein Internet auf dem Handy ausmache, startet die App. Wenn ich sie jedoch nach einer Stunde erneut öffne stürzt sie ab, weil die URL nicht gefunden werden kann. Habe ich etwas vergessen im Code? Oder gibt es eine Einstellung dafür?
Ich habe auch beim Debuggen mit Google Chrome keine Fehler feststellen können.
Ich bin was Service Worker angeht noch ziemlich unerfahren...
Über eine Antwort würde ich mich sehr freuen!
Code der Klasse mit dem Service Worker(SW.js):
const cacheName = './';
const contentToCache = [
'index.html',
'Speichern.html',
'Hochladen.html',
'Routing.js',
'manifest.json',
'LocalStorageService.js'
];
self.addEventListener('install', (e) => {
console.log('[Service Worker] Install');
e.waitUntil((async () => {
const cache = await caches.open(cacheName);
console.log('[Service Worker] Caching all: app shell and content');
await cache.addAll(contentToCache);
})());
});
self.addEventListener('fetch', (e) => {
console.log(`[Service Worker] Fetched resource ${e.request.url}`);
e.respondWith((async () => {
const r = await caches.match(e.request);
console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
if (r) { return r; }
const response = await fetch(e.request);
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
cache.put(e.request, response.clone());
return response;
})());
});
Ausschnitt der index.html, wo der Service Worker registriert wird:
<script src="SW.js"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register( "./SW.js").then(
function(erfolg) {
console.log( "ServiceWorker wurde registriert.", erfolg);
}
).catch(
function(fehler) {
console.log( "ServiceWorker wurde leider nicht registriert.", fehler);
}
);
});
}
</script>
Die App hat natürlich auch eine manifest.json, sodass sie auch wirklich als App erkannt wird.
Vielen Dank im voraus!
Liebe Grüße
Ich habe ein kleines Problem mit einer PWA. Ich habe mich mit Service-Workern beschäftigt und ein wenig mit PWAs rumgespielt.
Ich würde gerne, dass meine PWA offline verfügbar ist. Ich habe auch im Service Worker den install und fetch Befehl definiert, jedoch wenn ich die App dann installiert habe und geöffnet und wieder komplett geschlossen habe und sogar den Web-Server herunterfahre und mein Internet auf dem Handy ausmache, startet die App. Wenn ich sie jedoch nach einer Stunde erneut öffne stürzt sie ab, weil die URL nicht gefunden werden kann. Habe ich etwas vergessen im Code? Oder gibt es eine Einstellung dafür?
Ich habe auch beim Debuggen mit Google Chrome keine Fehler feststellen können.
Ich bin was Service Worker angeht noch ziemlich unerfahren...
Über eine Antwort würde ich mich sehr freuen!
Code der Klasse mit dem Service Worker(SW.js):
const cacheName = './';
const contentToCache = [
'index.html',
'Speichern.html',
'Hochladen.html',
'Routing.js',
'manifest.json',
'LocalStorageService.js'
];
self.addEventListener('install', (e) => {
console.log('[Service Worker] Install');
e.waitUntil((async () => {
const cache = await caches.open(cacheName);
console.log('[Service Worker] Caching all: app shell and content');
await cache.addAll(contentToCache);
})());
});
self.addEventListener('fetch', (e) => {
console.log(`[Service Worker] Fetched resource ${e.request.url}`);
e.respondWith((async () => {
const r = await caches.match(e.request);
console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
if (r) { return r; }
const response = await fetch(e.request);
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
cache.put(e.request, response.clone());
return response;
})());
});
Ausschnitt der index.html, wo der Service Worker registriert wird:
<script src="SW.js"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register( "./SW.js").then(
function(erfolg) {
console.log( "ServiceWorker wurde registriert.", erfolg);
}
).catch(
function(fehler) {
console.log( "ServiceWorker wurde leider nicht registriert.", fehler);
}
);
});
}
</script>
Die App hat natürlich auch eine manifest.json, sodass sie auch wirklich als App erkannt wird.
Vielen Dank im voraus!
Liebe Grüße
