PWA & Offline 5. Mai 2026 11 min Lesezeit

PWA + Service Worker mit Claude Code: Offline-First 2026

Progressive Web Apps bringen Native-App-Erfahrungen ins Web — Offline-Betrieb, Push-Notifications, Installierbarkeit. Claude Code generiert komplette PWA-Setups mit Workbox, Caching-Strategien und Web Push.

next-pwa Setup: Service Worker in Next.js

Service WorkerSetup mit next-pwa und Workbox

# Prompt: "Fuege PWA-Unterstuetzung zu meiner Next.js App hinzu"
npm install @ducanh2912/next-pwa

// next.config.ts
import withPWAInit from "@ducanh2912/next-pwa";

const withPWA = withPWAInit({
  dest: "public",
  cacheOnFrontEndNav: true,
  aggressiveFrontEndNavCaching: true,
  reloadOnOnline: true,
  workboxOptions: {
    disableDevLogs: true,
  },
});

export default withPWA({
  // restliche Next.js Config
});

// public/manifest.json (oder next-pwa generiert es)
{
  "name": "Meine PWA",
  "short_name": "PWA",
  "description": "Offline-faehige Web-App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png",
      "purpose": "any maskable" }
  ]
}

Caching-Strategien mit Workbox

CachingStrategien fuer verschiedene Asset-Typen

// public/sw.js — oder via workboxOptions konfigurieren
import { registerRoute } from 'workbox-routing';
import {
  NetworkFirst, CacheFirst, StaleWhileRevalidate
} from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// HTML-Seiten: Network-First (frische Daten, Offline-Fallback)
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new NetworkFirst({
    cacheName: 'pages-cache',
    plugins: [new ExpirationPlugin({ maxEntries: 50 })],
  })
);

// Bilder: Cache-First (selten geaendert)
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60,  // 30 Tage
      }),
    ],
  })
);

// API-Daten: Stale-While-Revalidate (schnell + aktuell)
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [new ExpirationPlugin({ maxAgeSeconds: 60 })],
  })
);

// Static Assets (JS/CSS): Cache-First nach Build-Hash
registerRoute(
  ({ request }) => ['script', 'style'].includes(request.destination),
  new CacheFirst({ cacheName: 'static-assets' })
);

Caching-Strategie: Network-First fuer HTML, Cache-First fuer Bilder/Assets, Stale-While-Revalidate fuer APIs. Claude Code waehlt automatisch die richtige Strategie basierend auf dem Asset-Typ.

Web Push Notifications

PushServer-seitige Notifications

# Prompt: "Implementiere Web Push fuer meine Next.js App"
npm install web-push

// VAPID Keys generieren (einmalig):
// node -e "const wp = require('web-push'); console.log(wp.generateVAPIDKeys())"

// app/api/push/subscribe/route.ts
export async function POST(req: Request) {
  const subscription = await req.json();
  // Subscription in DB speichern
  await db.pushSubscription.upsert({
    where: { endpoint: subscription.endpoint },
    create: { ...subscription, userId: ctx.userId },
    update: {},
  });
  return Response.json({ ok: true });
}

// Notification senden (Server-seitig):
import webpush from 'web-push';
webpush.setVapidDetails('mailto:admin@app.com', VAPID_PUBLIC, VAPID_PRIVATE);

await webpush.sendNotification(subscription, JSON.stringify({
  title: 'Neue Nachricht',
  body: 'Du hast eine neue Nachricht erhalten',
  icon: '/icons/icon-192.png',
  badge: '/icons/badge.png',
  data: { url: '/messages' },
}));

// Client: Service Worker empfaengt Push
self.addEventListener('push', (event) => {
  const data = event.data?.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body, icon: data.icon, badge: data.badge, data: data.data,
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

iOS Push (Safari 16.4+): Web Push funktioniert auf iOS seit Safari 16.4 — aber NUR wenn die App als PWA installiert ist (Add to Home Screen). Im Browser-Tab kein Push auf iOS.

Install Prompt: A2HS (Add to Home Screen)

// React Hook fuer Install-Prompt
function useInstallPrompt() {
  const [prompt, setPrompt] = useState<BeforeInstallPromptEvent | null>(null);

  useEffect(() => {
    const handler = (e: BeforeInstallPromptEvent) => {
      e.preventDefault();  // Browser-Standard-Prompt verhindern
      setPrompt(e);
    };
    window.addEventListener('beforeinstallprompt', handler as EventListener);
    return () => window.removeEventListener('beforeinstallprompt', handler as EventListener);
  }, []);

  const install = async () => {
    if (!prompt) return;
    const result = await prompt.prompt();
    if (result.outcome === 'accepted') setPrompt(null);
  };

  return { canInstall: !!prompt, install };
}

// In Komponente:
const { canInstall, install } = useInstallPrompt();
{canInstall && <button onClick={install}>App installieren</button>}

PWA-Entwicklung im Kurs

Im Claude Code Mastery Kurs: vollstaendiges PWA-Modul mit Service Worker Strategien, Workbox-Konfiguration, Web Push Notifications und Install-Prompt — inkl. iOS Safari Kompatibilitaet und Lighthouse PWA-Score Optimierung.

14 Tage kostenlos testen →