Course Outline

? Day 1: Foundations of PWAs

Session 1: Introduction to Progressive Web Apps

• What is a PWA?
• Benefits and real-world use cases
• Core principles: responsive, reliable, installable, and engaging

Session 2: PWA Requirements & Architecture

• HTTPS requirement and secure contexts
• Responsive design and mobile-first principles
• Understanding the app shell architecture

Session 3: Web App Manifest

• Structure and purpose of the manifest file
• Icons, display modes, and orientation settings
• Adding “Add to Home Screen” capabilities

Lab Activities:

• Create a simple responsive web app
• Add and configure a manifest.json file
• Enable app install prompt and test on devices

? Day 2: Service Workers and Offline Functionality

Session 1: Introduction to Service Workers

• What is a service worker?
• Service worker lifecycle: registration, install, activate
• Scope and caching strategies

Session 2: Caching and Offline Support

• Cache API and pre-caching resources
• Runtime caching and stale-while-revalidate strategy
• Fallback strategies for offline pages

Session 3: Advanced Service Worker Techniques

• Updating service workers
• Managing cache versions
• Debugging service worker issues

Lab Activities:

• Register and implement a service worker for offline support
• Cache static and dynamic assets
• Test updates and manage cache invalidation

? Day 3: Enhancing UX and Deploying PWAs

Session 1: Background Features and Push Notifications

• Background sync and its limitations
• Push notifications with the Notifications API and Push API
• Handling user permissions and payloads

Session 2: Performance and Lighthouse Audits

• Measuring PWA readiness with Lighthouse
• Optimizing performance, accessibility, and SEO
• Lazy loading and bundling techniques

Session 3: Deployment and Real-World Considerations

• Hosting and serving with HTTPS
• Progressive enhancement and graceful degradation
• Browser compatibility and fallbacks

Lab Activities:

• Add push notifications to your PWA
• Run a Lighthouse audit and improve your app's score
• Deploy your PWA on Netlify or Firebase Hosting