Website in eine installierbare PWA mit Offline-Modus verwandeln

Prompt

Arbeite als Webentwickler mit Schwerpunkt auf Progressive Web Apps, Service Workern und Caching-Strategien.

Kontext:
- Website oder App: {{website}}
- Stack und Hosting: {{stack}}
- Offline-Umfang: {{offline_umfang}}
- Prioritäten: {{prioritaeten}}

Hat die Website geschützte Bereiche, personenbezogene Daten oder häufig wechselnde Inhalte, frag mich, wie diese gehandhabt werden, bevor du festlegst, was gecacht wird.

Liefere:
1. Das Web-App-Manifest: name, short_name, Farben, display, start_url, scope und Icons (192 und 512 px sowie eine maskable-Variante), samt der Tags für das HTML.
2. Den Service Worker mit einer Strategie pro Ressourcentyp, erklärt in einer Tabelle: Precache der App-Shell, stale-while-revalidate für CSS, JS und Bilder, network-first mit Timeout für HTML und network-only für authentifizierte API-Aufrufe.
3. Die Offline-Seite und wie sie ausgeliefert wird, wenn das Netz ausfällt.
4. Versionierung der Caches, Aufräumen alter Caches im activate-Event und einen Update-Ablauf, der Nutzer über eine neue Version informiert, statt sie mit einem Reload zu überraschen.
5. Den Registrierungscode des Service Workers und eine Workbox-Alternative, falls sie besser zu {{stack}} passt.
6. Bekannte Einschränkungen unter iOS und Safari, die ich prüfen sollte, mit dem Hinweis, sie in der aktuellen Dokumentation zu verifizieren.
7. Testvorgehen: Application-Panel der DevTools, Offline-Simulation, Installierbarkeitsprüfung und konkrete Testfälle.

Vorgaben:
- Die Website muss per HTTPS ausgeliefert werden; weise darauf hin, falls das Hosting das nicht garantiert.
- Keine Antworten mit personenbezogenen oder Sitzungsdaten cachen.
- Keine Push-Benachrichtigungen oder Background Sync, sofern meine Prioritäten das nicht verlangen.
- Markiere Farben, Namen und Icons, die ich nicht angegeben habe, mit [AUSFÜLLEN].

Format: Strategietabelle, ein Codeblock pro Datei mit Pfad und eine Testliste.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

const VERSION = 'v1';
const SHELL = `shell-${VERSION}`;
const SEITEN = `seiten-${VERSION}`;
const ASSETS = `assets-${VERSION}`;
const PRECACHE = ['/', '/offline/', '/manifest.webmanifest']; // [AUSFÜLLEN: gehashte CSS/JS von Astro]

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL).then((cache) => cache.addAll(PRECACHE)));
});

self.addEventListener('activate', (event) => {
  const aktuell = [SHELL, SEITEN, ASSETS];
  event.waitUntil(caches.keys().then((schluessel) =>
    Promise.all(schluessel.filter((k) => !aktuell.includes(k)).map((k) => caches.delete(k)))));
});

const speichern = (name, request, res) => {
  if (res.ok) { const kopie = res.clone(); caches.open(name).then((c) => c.put(request, kopie)); }
  return res;
};

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET' || new URL(request.url).origin !== location.origin) return;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).then((res) => speichern(SEITEN, request, res))
      .catch(async () => (await caches.match(request)) ?? caches.match('/offline/')));
    return;
  }
  event.respondWith(caches.match(request).then((imCache) => {
    const netz = fetch(request).then((res) => speichern(ASSETS, request, res)).catch(() => imCache);
    return imCache ?? netz;
  }));
});

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · Websites erstellen

Ausgabetyp

Code

Niveau

Fortgeschritten

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Website oder App, Stack und Hosting, Offline-Umfang und Prioritäten

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen