Meta tags:
description=JavaScript Service Workers: Lebenszyklus, Registrierung, Caching-Strategien, Offline-Unterstützung und saubere Updates mit Cache-Versionierung.;

Headings (most frequently used words):

service, worker, workers, schritt, der, die, leistungsstarke, offline, first, webanwendungen, entwickeln, fazit, übungen, was, ist, ein, warum, verwenden, lebenszyklus, eines, einschränkungen, zu, beachten, sind, den, registrieren, das, skript, schreiben, übernimmt, kontrolle, gängige, caching, strategien, einen, aktualisieren, praxisbeispiel, benachrichtigungen, zum, verbindungsstatus,

Text of the page (most frequently used words):
und (76), die (56), #worker (42), der (39), service (36), das (33), api (25), workers (24), dom (22), cache (21), #offline (20), fetch (20), event (19), ein (19), javascript (18), lernen (16), auf (16), eine (16), html (15), mit (15), web (14), von (14), werden (14), den (14), sind (13), ist (12), promise (11), caches (11), seiten (11), wird (10), then (10), oder (10), aus (10), kann (10), self (10), für (9), browser (9), skript (9), seite (9), nicht (9), app (9), methoden (9), was (8), dem (8), wie (8), install (8), activate (8), color (8), einem (8), navigator (7), serviceworker (7), addeventlistener (7), nutzer (7), bei (7), neue (7), ihn (7), anfragen (7), tools (6), css (6), first (6), updates (6), funktionen (6), async (6), einen (6), einer (6), damit (6), lebenszyklus (6), ereignisse (6), kopieren (6), statuselement (6), register (6), wenn (6), sie (6), skipwaiting (6), nur (6), response (6), steuert (6), scope (6), w3docs (5), alle (5), über (5), code (5), übungen (5), netzwerk (5), caching (5), window (5), online (5), document (5), const (5), dass (5), nach (5), assets (5), version (5), ereignis (5), request (5), the (5), zurück (5), ohne (5), error (5), push (5), string (5), events (5), formatter (5), json (4), generator (4), this (4), page (4), können (4), and (4), storage (4), await (4), apps (4), strategie (4), nachrichten (4), zeigt (4), objekt (4), sofort (4), body (4), status (4), console (4), function (4), dieses (4), beispiel (4), cache_version (4), catch (4), copy (4), network (4), shell (4), gibt (4), aktivierung (4), läuft (4), verwenden (4), key (4), keys (4), bedient (4), steuern (4), shadow (4), einführung (4), encoder (3), editor (3), quizze (3), php (3), entwickeln (3), thread (3), keine (3), abfangen (3), art (3), merkmale (3), microtasks (3), daten (3), jede (3), proxy (3), des (3), verbindungsstatus (3), connectivity (3), class (3), blinker (3), animation (3), indem (3), sich (3), während (3), benachrichtigungen (3), neuen (3), erhalten (3), dateien (3), gecachte (3), lädt (3), datei (3), dann (3), als (3), auch (3), match (3), return (3), open (3), respondwith (3), handler (3), kopie (3), pro (3), strategien (3), installation (3), innerhalb (3), seines (3), scopes (3), durch (3), schritt (3), kontrolle (3), aktivieren (3), warten (3), clients (3), claim (3), waituntil (3), styles (3), hier (3), registration (3), registrieren (3), warum (3), promises (3), flag (3), data (3), objekte (3), eigenschaften (3), operatoren (3), gemacht (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), probier (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), leistungsstarke (2), webanwendungen (2), websockets (2), previous (2), übernehmen (2), hintergrundsynchronisation (2), webseite (2), laufen (2), antworten (2), wesentlichen (2), arbeit (2), loop (2), macrotasks (2), localstorage (2), sessionstorage (2), basiert (2), schlüssel (2), versionierung (2), entfernt (2), aktuellen (2), nutzern (2), verstehen (2), selbst (2), script (2), classname (2), textcontent (2), getelementbyid (2), registered (2), log (2), checking (2), notifier (2), head (2), style (2), infinite (2), linear (2), background (2), font (2), title (2), modernen (2), streaming (2), diese (2), haupt (2), bleibt (2), garantiert (2), niemals (2), veraltete (2), ändern (2), herunter (2), wartet (2), saubere (2), einmal (2), bevor (2), clone (2), use (2), ressourcen (2), ruft (2), hintergrund (2), aktualisierte (2), versucht (2), fehler (2), statische (2), einzige (2), sein (2), fängt (2), deren (2), ladevorgang (2), installiert (2), übernimmt (2), alter (2), entwicklung (2), steuernden (2), mitten (2), methode (2), aufgelöst (2), beendet (2), cached (2), from (2), map (2), precache_urls (2), cacht (2), vor (2), alte (2), welche (2), load (2), registriere (2), laden (2), alles (2), indexeddb (2), kein (2), zugriff (2), unter (2), gesamte (2), https (2), localhost (2), aktiven (2), anstatt (2), sync (2), sobald (2), ausgelöst (2), noch (2), erst (2), aktiviert (2), betrieb (2), eines (2), anfrage (2), performance (2), unterstützung (2), nie (2), hat (2), zwischen (2), registriert (2), man (2), deiner (2), server (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), formulare (2), benutzerdefinierte (2), klassen (2), arrays (2), generatoren (2), advanced (2), fehlerbehandlung (2), chaining (2), erweitern (2), handling (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, yes, helpful, prüfen, zentrale, empfangen, ermöglichen, umfangreiche, erlebnisse, keiner, zugeordnet, anwendungs, netzwerkanfragen, modifizieren, übung, seine, ereignisgesteuerte, plant, persistiert, verwaltet, dasselbe, abfängst, tiefer, bausteine, einzutauchen, angewiesen, siehe, verwandeln, programmierbaren, machen, möglich, schnell, widerstandsfähig, nutzbar, dazu, verständnis, wait, wahl, jeder, ressource, passt, verwendung, sauber, ausgerollt, tote, listener, wurde, sendet, onmessage, bereinigung, hilft, hintergrundfunktionen, reaktionsfähigen, oberfläche, integriert, nutzerfeedback, hauptseite, lauscht, aktualisiert, wodurch, unzuverlässige, polling, ansatz, vermieden, verbindungsprüfung, erläuterung, opacity, keyframes, f44336, 4caf50, size, fff, border, radius, padding, margin, top, center, text, align, sans, serif, arial, family, utf, charset, meta, lang, doctype, funktion, vielen, websites, anwendungen, eingesetzt, etwa, diensten, cloudbasierten, ihren, informieren, benachrichtigt, verbessern, plattformen, nutzererfahrung, sicherstellen, potenzielle, probleme, datensynchronisation, beim, aufmerksam, konzentriert, integration, identisch, vorherigen, google, docs, netflix, praxisbeispiel, zum, dies, deployment, mischung, alten, löscht, jeden, dessen, entspricht, schreibt, erhöhe, änderst, erkennt, byte, differenz, führt, ihr, sofern, aufrufst, oben, gezeigte, versionierungsmuster, sorgt, aktualisieren, gelesen, weshalb, musst, sowohl, cachst, zurückgibst, tipp, put, for, fresh, sieht, denen, geschwindigkeit, wichtiger, perfekte, aktualität, avatare, thumbnails, liefert, frische, nächste, mal, stale, while, revalidate, häufig, inhalte, news, feeds, fällt, selten, fonts, greift, miss, besten, funktionsweise, richtige, wählst, ressourcentyp, basierend, darauf, aktuell, müssen, gängige, abschluss, beachte, ladevorgangs, fließen, deinen, zweiten, erste, zwingt, schließen, kombination, praktisch, produktion, bedacht, austausch, sitzung, aktive, unterbrechen, antwortest, gib, hält, leben, bis, abgeschlossen, einige, wichtige, hinweise, serve, fall, back, take, control, pages, delete, filter, all, remove, versions, immediately, addall, pre, index, erstelle, separate, darin, behandelst, entscheidest, folgende, bereinigt, fallback, schreiben, aufruf, urls, dieser, serviceworkerregistration, failed, deinem, prüfe, immer, zuerst, verfügbarkeit, ersten, rendering, konkurriert, speichere, bleiben, muss, globals, jederzeit, aktualisiere, senden, liest, darunter, origin, platziere, site, root, begrenzt, gemischte, unsichere, keinen, einschränkungen, beachten, deines, codes, ihre, lebensdauer, altes, neu, gecachten, skripten, vermischst, verwende, bewusst, austauschen, wartephase, existiert, lässt, bereits, geöffnete, geladen, weist, zwei, diesen, ablauf, waiting, aktiv, bereinigst, früheren, versionen, falls, älterer, offene, gesteuerten, geschlossen, rufst, außer, gecacht, benötigt, installieren, durchläuft, klar, definierte, abfolge, zuständen, wichtigste, bugs, mein, vermeiden, entscheide, eigene, logik, verwendet, soll, vollständige, anfragekontrolle, empfängt, servers, tab, geöffnet, fehlgeschlagene, gesendeter, kommentar, zurückgestellt, automatisch, erneut, verbindung, wiederhergestellt, folgebesuche, lokalen, roundtrips, eliminiert, ladezeiten, verkürzt, kritische, netzwerkverbindung, dir, bietet, vorteil, antwort, umschreiben, erhebliche, angriffsfläche, darstellt, erfordert, sicheren, kontext, standardmäßig, verzeichnis, liegt, beschränkt, folgen, strengen, regeln, halb, ausgeliefert, startet, anfällt, eingehender, inaktivität, beenden, gehe, davon, globaler, zustand, ereignissen, ereignisgesteuert, wesentliche, normalen, seitenscript, unterscheiden, eigenen, unabhängig, außerhalb, threads, deine, benutzeroberfläche, blockieren, aber, kommuniziert, zugreifen, kapitel, erklärt, welchen, durchlaufen, gängigen, ausliefert, servieren, vollständig, daher, kenntnisse, hilfreich, fähigkeit, schaltet, frei, heute, erwarten, nahezu, sofortige, folgeladevorgänge, hintergrunddatensynchronisation, grundlage, progressive, pwas, ausführt, getrennt, direkten, sitzt, webanwendung, programmierbarer, stellt, abgefangen, untersucht, umgeschrieben, erreicht, registrierung, intl, vibration, notifications, audio, webrtc, geolocation, midi, validation, fullscreen, history, screen, orientation, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, sent, xmlhttprequest, ursprungsübergreifende, abbruch, download, fortschritt, formdata, requests, canvas, references, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, onload, onerror, scripts, defer, domcontentloaded, beforeunload, unload, resource, loading, submit, clipboard, change, input, cut, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, try, mixins, instanceof, eingebaute, private, geschützte, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, var, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, values, entries, weakmap, weakset, set, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api service workers javascript service workers lebenszyklus registrierung caching strategien offline unterstützung und saubere updates mit cache versionierung service workers leistungsstarke offline first webanwendungen entwickeln ein service worker ist ein skript das der browser im hintergrund ausführt getrennt von deiner webseite und ohne direkten zugriff auf das dom er sitzt zwischen deiner webanwendung und dem netzwerk als programmierbarer proxy jede anfrage die die seite stellt kann abgefangen untersucht aus einem cache bedient oder umgeschrieben werden bevor sie den server erreicht diese eine fähigkeit schaltet die funktionen frei die nutzer heute von modernen web apps erwarten offline betrieb nahezu sofortige folgeladevorgänge hintergrunddatensynchronisation und push benachrichtigungen service workers sind die grundlage von progressive web apps pwas dieses kapitel erklärt was service workers sind welchen lebenszyklus sie durchlaufen wie man einen registriert welche gängigen caching strategien es gibt und wie man updates ausliefert ohne veraltete dateien zu servieren die service worker api basiert vollständig auf promises daher sind kenntnisse von async await und der fetch api hilfreich was ist ein service worker ein service worker ist eine art web worker eine javascript datei die auf einem eigenen thread läuft unabhängig von der seite die ihn registriert hat da er außerhalb des haupt threads läuft kann er deine benutzeroberfläche nicht blockieren aber er kann auch nicht auf das dom zugreifen er kommuniziert mit seiten über ereignisse und nachrichten wesentliche merkmale die ihn von einem normalen seitenscript unterscheiden er ist ereignisgesteuert der browser startet ihn wenn arbeit anfällt ein eingehender fetch ein push ein sync und kann ihn bei inaktivität beenden gehe nie davon aus dass globaler zustand zwischen ereignissen erhalten bleibt er hat einen lebenszyklus ein service worker wird installiert aktiviert und steuert erst dann seiten updates folgen strengen regeln damit nutzern nie eine halb aktualisierte app ausgeliefert wird er ist auf einen scope beschränkt ein worker kann nur anfragen innerhalb seines scopes abfangen standardmäßig das verzeichnis in dem das skript liegt er erfordert einen sicheren kontext service workers laufen nur über https oder localhost während der entwicklung da ein skript das jede antwort umschreiben kann eine erhebliche angriffsfläche darstellt warum service workers verwenden vorteil was er dir bietet offline unterstützung cacht die app shell und kritische assets damit die app ohne netzwerkverbindung lädt performance folgebesuche werden aus einem lokalen cache bedient was roundtrips eliminiert und ladezeiten verkürzt hintergrundsynchronisation fehlgeschlagene anfragen z b ein gesendeter kommentar werden zurückgestellt und automatisch erneut versucht sobald die verbindung wiederhergestellt ist push benachrichtigungen empfängt und zeigt nachrichten eines servers an auch wenn kein tab geöffnet ist vollständige anfragekontrolle entscheide pro anfrage ob cache netzwerk oder eigene logik verwendet werden soll der lebenszyklus eines service workers ein service worker durchläuft eine klar definierte abfolge von zuständen sie zu verstehen ist das wichtigste um bugs der art warum läuft mein alter code noch zu vermeiden registrieren die seite ruft navigator serviceworker register auf der browser lädt das skript herunter installieren das install ereignis wird einmal pro worker version ausgelöst hier werden die dateien vor gecacht die die app für den offline betrieb benötigt warten falls ein älterer worker noch offene seiten steuert wartet der neue worker er wird erst aktiviert wenn alle gesteuerten seiten geschlossen sind außer du rufst self skipwaiting auf aktivieren das activate ereignis wird ausgelöst hier bereinigst du caches aus früheren versionen steuern fetch sobald aktiv fängt der worker fetch ereignisse für seiten innerhalb seines scopes ab register install waiting activate fetch push sync kopieren zwei methoden steuern diesen ablauf self skipwaiting in install weist den neuen worker an sofort zu aktivieren anstatt zu warten self clients claim in activate lässt den aktiven worker die kontrolle über bereits geöffnete seiten übernehmen anstatt nur seiten zu steuern die nach der aktivierung geladen werden warum die wartephase existiert sie garantiert dass eine einzige version deines codes eine seite für ihre gesamte lebensdauer steuert damit du niemals altes html mit neu gecachten skripten vermischst verwende skipwaiting bewusst da es den steuernden worker unter einem aktiven nutzer austauschen kann einschränkungen die zu beachten sind nur https oder localhost gemischte unsichere seiten können keinen worker registrieren der scope begrenzt das abfangen ein worker unter app sw js steuert app und darunter nicht die gesamte origin platziere das skript im site root um alles zu steuern kein dom zugriff aktualisiere die seite durch das senden von nachrichten oder indem die seite daten aus caches liest der worker kann jederzeit beendet werden speichere alles was erhalten bleiben muss im cache storage indexeddb oder web storage nicht in worker globals schritt 1 den service worker registrieren registriere das skript in deinem seiten javascript mit navigator serviceworker register prüfe immer zuerst die verfügbarkeit und registriere nach dem laden der seite damit der worker nicht mit dem ersten rendering konkurriert if serviceworker in navigator window addeventlistener load navigator serviceworker register sw js then registration console log service worker registered scope registration scope catch error console error service worker registration failed error kopieren der register aufruf gibt ein promise zurück das mit einer serviceworkerregistration aufgelöst wird deren scope zeigt an welche urls dieser worker steuert schritt 2 das service worker skript schreiben erstelle eine separate datei hier sw js für den worker selbst darin behandelst du die lebenszyklus ereignisse und entscheidest wie anfragen bedient werden das folgende beispiel cacht eine app shell bei der installation vor bereinigt alte caches bei der aktivierung und bedient anfragen nach der cache first strategie mit einem offline fallback const cache_version v1 const precache_urls index html styles css offline html install pre cache the app shell self addeventlistener install event event waituntil caches open cache_version then cache cache addall precache_urls self skipwaiting activate this version immediately activate remove caches from previous versions self addeventlistener activate event event waituntil caches keys then keys promise all keys filter key key cache_version map key caches delete key then self clients claim take control of open pages fetch serve from cache fall back to network then to the offline page self addeventlistener fetch event event respondwith caches match event request then cached return cached fetch event request catch caches match offline html kopieren einige wichtige hinweise event waituntil promise hält den worker am leben bis das promise abgeschlossen ist damit der browser ihn nicht mitten in der installation oder aktivierung beendet event respondwith promise ist die methode mit der du auf ein fetch ereignis antwortest gib eine response aus dem cache oder ein promise zurück das zu einer aufgelöst wird self skipwaiting zwingt die neue version zu aktivieren ohne auf das schließen alter seiten zu warten in kombination mit clients claim übernimmt der neue worker sofort die kontrolle praktisch in der entwicklung in der produktion mit bedacht verwenden da der austausch des steuernden workers mitten in einer sitzung aktive nutzer unterbrechen kann schritt 3 der worker übernimmt die kontrolle nach abschluss von installation und aktivierung steuert der worker seiten innerhalb seines scopes und sein fetch handler fängt deren anfragen ab beachte dass der erste ladevorgang einer seite nicht durch den worker läuft der worker wird während dieses ladevorgangs installiert ab dem zweiten ladevorgang fließen anfragen durch deinen fetch handler gängige caching strategien es gibt keine einzige richtige caching strategie du wählst eine pro ressourcentyp basierend darauf wie aktuell die daten sein müssen strategie funktionsweise am besten für cache first gibt die gecachte kopie zurück greift nur bei einem cache miss auf das netzwerk zurück statische assets die sich selten ändern css fonts die app shell network first versucht das netzwerk fällt bei fehler auf den cache zurück häufig aktualisierte inhalte api antworten news feeds stale while revalidate liefert sofort die gecachte kopie aus ruft dann im hintergrund eine frische kopie für das nächste mal ab ressourcen bei denen geschwindigkeit wichtiger ist als perfekte aktualität avatare thumbnails ein network first handler sieht so aus self addeventlistener fetch event event respondwith fetch event request then response cache a copy for offline use then return the fresh response const copy response clone caches open v1 then cache cache put event request copy return response catch caches match event request kopieren tipp ein response body kann nur einmal gelesen werden weshalb du ihn clone n musst bevor du ihn sowohl cachst als auch zurückgibst einen service worker aktualisieren wenn du sw js änderst erkennt der browser die byte differenz lädt die neue datei herunter und führt ihr install ereignis aus der neue worker wartet dann sofern du nicht skipwaiting aufrufst das oben gezeigte cache versionierungsmuster sorgt für saubere updates erhöhe cache_version z b v1 v2 wenn sich gecachte assets ändern das neue install schreibt assets in den neuen cache das neue activate löscht jeden cache dessen schlüssel nicht der aktuellen version entspricht und entfernt so veraltete dateien dies garantiert dass nutzer nach einem deployment niemals eine mischung aus alten und neuen assets erhalten praxisbeispiel benachrichtigungen zum verbindungsstatus dieses beispiel zeigt eine funktion die in vielen modernen websites und anwendungen eingesetzt wird etwa in streaming diensten wie netflix oder cloudbasierten apps wie google docs um nutzer über ihren verbindungsstatus zu informieren indem nutzer benachrichtigt werden wenn sie offline sind verbessern diese plattformen die nutzererfahrung indem sie sicherstellen dass nutzer auf potenzielle probleme bei der...