Progressive-Web-App-Migration für einen Berliner Online-Shop
Übersicht
Worum es bei diesem Projekt geht.
Sie erhalten den Source-Code (Next.js mit Pages Router), den aktuellen Lighthouse-Bericht und die Top-5-Produktdetailseiten. Migrieren Sie zu Next.js App Router mit Server Components, fügen Sie ein Manifest plus Service Worker hinzu (Offline-Fallback und Asset-Caching), optimieren Sie Bilder mit next/image, reduzieren Sie JavaScript-Bundle-Größe und bauen Sie eine Add-to-Home-Screen-Aufforderung mit fairer Frequenz. Messen Sie vor und nach Migration die Core-Web-Vitals (LCP, INP, CLS) für die drei Schlüsselseiten. Liefern Sie die migrierte Webapp, einen Vorher-Nachher-Performance-Bericht und ein Migrations-Playbook für die verbleibenden Seiten.
Das Briefing
Was Du tust und was Du zeigst.
Wie hebt eine PWA-Migration den Lighthouse-Performance-Score von 58 auf über 90 und verbessert die Core-Web-Vitals der drei wichtigsten Seiten messbar?
Earning criteria — what you'll demonstrate
- Eine bestehende Next.js-Webapp zur Progressive Web App migrieren
- Service-Worker mit sinnvoller Caching-Strategie konfigurieren
- Core-Web-Vitals interpretieren und gezielt verbessern
- Performance-Optimierung ohne Funktionalität zu opfern
Studienpassung
Wo dies in Dein Studium passt.
Schärft dieselben Fähigkeiten, die Dein Studium von Dir erwartet.
Fähigkeiten
Fähigkeiten, die Du unter Beweis stellst.
Jede taucht auf Deinem verifizierten Zertifikat auf.
Karrieren
Berufe, auf die dies Dich vorbereitet.
Echte Berufsbezeichnungen. Echte Skill-Brücken. Wähle die, die Deinem Werdegang am nächsten kommt.
Karrierewege, die das aufbaut
Kanonische RollenNoch eine Sache