Signatur
Beschreibung
Die Eigenschaft isReload des FetchEvent-Interfaces sollte einem Service Worker sagen, ob eine abgefangene Anfrage daher kommt, dass der Nutzer die Seite neu lädt. Das kann über die Neu-laden-Schaltfläche, F5 oder location.reload() passieren. Der Wert ist schreibgeschützt und liegt nur innerhalb eines fetch-Handlers im Service-Worker-Kontext vor.
Gedacht war die Eigenschaft für Caching-Strategien. Lädt der Nutzer ausdrücklich neu, erwartet er meist frische Daten. Ein Service Worker könnte dann den Cache überspringen und direkt beim Netzwerk anfragen („Network First“). Bei normaler Navigation würde er dagegen weiter aus dem Cache liefern („Cache First“).
Wichtig: isReload wurde aus der Service-Worker-Spezifikation entfernt und gilt als veraltet. In neuem Code sollte man sich nicht darauf verlassen. Besser ist event.request.cache: Bei einem Neuladen setzen Browser dort meist "no-cache" (normales Neuladen) oder "reload" (erzwungenes Neuladen). Kombiniert mit event.request.mode === "navigate" erkennt man so Navigations- und Neuladeanfragen zuverlässiger.
Rückgabewert
true, wenn der Nutzer das Ereignis durch ein Neuladen der Seite ausgelöst hat, sonst false. Unterstützt der Browser die Eigenschaft nicht, ist der Wert undefined.Beispiele
Neuladen im fetch-Handler erkennen (mit Rückfallebene)
// sw.js
self.addEventListener('fetch', (event) => {
const { request } = event;
// isReload ist veraltet – deshalb auf request.cache zurückfallen
const reload = event.isReload === true ||
request.cache === 'reload' ||
request.cache === 'no-cache';
if (request.mode === 'navigate') {
console.log(`Navigation zu ${request.url}, Neuladen: ${reload}`);
}
});Bei Neuladen Netzwerk bevorzugen, sonst Cache
// sw.js
const CACHE = 'seiten-v1';
const isUserReload = (event) =>
event.isReload === true || ['reload', 'no-cache'].includes(event.request.cache);
self.addEventListener('fetch', (event) => {
if (event.request.method !== 'GET') return;
event.respondWith((async () => {
const cache = await caches.open(CACHE);
if (isUserReload(event)) {
// Network First: Nutzer will frische Daten
try {
const antwort = await fetch(event.request);
await cache.put(event.request, antwort.clone());
return antwort;
} catch {
return (await cache.match(event.request)) ?? Response.error();
}
}
// Cache First bei normaler Navigation
const treffer = await cache.match(event.request);
return treffer ?? fetch(event.request);
})());
});Unterstützung der Eigenschaft prüfen
// sw.js
self.addEventListener('fetch', (event) => {
if ('isReload' in event) {
console.log('isReload wird unterstützt:', event.isReload);
} else {
console.log('isReload nicht verfügbar – request.cache nutzen:', event.request.cache);
}
});// Wichtig · Fallstricke
- Veraltet und nicht standardisiert: Die Eigenschaft wurde aus der Service-Worker-Spezifikation entfernt. Chrome, Edge und Safari haben sie praktisch nie ausgeliefert. Man sollte deshalb immer mit
undefinedrechnen und mitevent.isReload === truevergleichen, nicht nur auf einen wahrheitsähnlichen Wert prüfen. - Empfohlene Alternative:
event.request.cacheauswerten."reload"steht für ein erzwungenes Neuladen (z. B. Strg+Umschalt+R),"no-cache"meist für ein normales Neuladen. Das genaue Verhalten kann je nach Browser abweichen. - Erzwungenes Neuladen umgeht den Service Worker: Bei einem harten Neuladen steuert der Service Worker die Seite in der Regel gar nicht, und das
fetch-Ereignis tritt für die Navigation nicht auf. - Die Eigenschaft gibt es nur im Service-Worker-Kontext (
ServiceWorkerGlobalScope). Service Worker brauchen eine sichere Umgebung (HTTPS oderlocalhost).