Claude Code PWA Entwicklung: Progressive Web Apps mit KI bauen 2026

Erstelle das PWA-Grundgerüst für meine Next.js-App:
- manifest.json mit name, short_name, icons (192, 512px),
  theme_color, background_color, display: standalone
- public/sw.js: Service Worker mit Install-, Activate-
  und Fetch-Event (Cache-First für statische Assets)
- _app.tsx: Service Worker registrieren mit Update-Check
- Alle Icons als Platzhalter-SVG generieren

{
  "name": "MeineApp — KI-gestütztes Dashboard",
  "short_name": "MeineApp",
  "description": "Produktivitäts-Dashboard mit KI-Automatisierung",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#6366f1",
  "background_color": "#0a0a0f",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = ['/', '/offline.html', '/icons/icon-192.png'];

// Install: statische Assets voraus-cachen
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(STATIC_ASSETS))
  );
  self.skipWaiting();
});

// Activate: alte Caches aufräumen
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
      )
    )
  );
  self.clients.claim();
});

// Fetch: Strategie nach URL-Pattern
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // Cache-First: statische Assets (/_next/static/)
  if (url.pathname.startsWith('/_next/static/')) {
    event.respondWith(
      caches.match(request).then(cached =>
        cached || fetch(request).then(res => {
          const clone = res.clone();
          caches.open(CACHE_NAME).then(c => c.put(request, clone));
          return res;
        })
      )
    );
    return;
  }

  // Network-First: API-Calls
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(
      fetch(request).catch(() => caches.match(request))
    );
    return;
  }

  // Stale-While-Revalidate: HTML-Seiten
  event.respondWith(
    caches.open(CACHE_NAME).then(cache =>
      cache.match(request).then(cached => {
        const fetchPromise = fetch(request).then(res => {
          cache.put(request, res.clone());
          return res;
        });
        return cached || fetchPromise;
      })
    )
  );
});

async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;

  // Permission anfragen
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;

  const subscription = await reg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(
      process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY
    )
  });

  // Subscription an Backend schicken
  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}

// Service Worker: Push empfangen
self.addEventListener('push', (event) => {
  const data = event.data?.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-72.png',
      data: { url: data.url }
    })
  );
});

const APP_SHELL = [
  '/',                       // App-Shell HTML
  '/manifest.json',          // Manifest
  '/icons/icon-192.png',     // Icons
  '/icons/icon-512.png',
  '/_next/static/css/main.css',   // Kritisches CSS
  '/_next/static/js/main.js',     // App-Logik
  '/offline.html'            // Fallback-Seite
];

// Bei Install: Shell sofort cachen
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('app-shell-v1')
      .then(cache => cache.addAll(APP_SHELL))
      .then(() => self.skipWaiting())
  );
});

const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  cacheOnFrontEndNav: true,
  aggressiveFrontEndNavCaching: true,
  reloadOnOnline: true,
  disable: process.env.NODE_ENV === 'development',
  workboxOptions: {
    disableDevLogs: true,
    // Stale-While-Revalidate für alle Seiten
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/meineapp\.com\/blog\/.*/,
        handler: 'StaleWhileRevalidate',
        options: {
          cacheName: 'blog-pages',
          expiration: { maxEntries: 50, maxAgeSeconds: 86400 }
        }
      },
      {
        urlPattern: /^https:\/\/api\.meineapp\.com\/.*/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-responses',
          networkTimeoutSeconds: 5
        }
      }
    ]
  }
});

module.exports = withPWA({
  reactStrictMode: true,
  swcMinify: true
});

# Lighthouse als npm-Package installieren
npm install -g lighthouse

# PWA-Report generieren
lighthouse https://deine-app.com \
  --only-categories=pwa,performance \
  --output=json,html \
  --output-path=./lighthouse-report

# Report an Claude Code übergeben:
# "Analysiere diesen Lighthouse-Report und liste
#  alle failed PWA-Checks mit konkretem Fix-Code"