PWA - up1/training-courses GitHub Wiki

Progressive Web Application (PWA)

Outline

  • Why we need Progressive Web Apps (PWA)
    • The Problem with the Web
    • The Problem with Native Apps
  • What Progressive Web Apps (PWA)
  • Limitation of PWA
  • Properties of a PWA
    • Discoverable: The content can be found through search engines
    • Installable: It can be added to the device's home screen
    • Linkable: Easily shared via a URL
    • Network Independent: Works offline or on low-quality networks
    • Progressive: Works for every user, regardless of browser choice, but with enhanced features on modern browsers
    • Re-engageable: Can send push notifications to bring users back
    • Responsive: Fits any form factor: desktop, mobile, or tablet
    • Secure: Served over HTTPS to prevent snooping and ensure content hasn't been tampered with.
  • Workshop with PWA
    • Create web project
    • PWA Checklist Audit
      • Developer tools and Lighthouse
  • Responsive Design
    • Mobile-First Philosophy
    • Fluid Grids & Flexible Images
    • CSS Media Queries
    • Workshop
  • Service Worker, Caching, and Offline Capabilities
    • What is a Service Worker ?
    • Lifecycle
    • Cache API
    • Caching Strategy (Cache First)
    • Workshop
  • Add to Home Screen (Installability)
    • The Web App Manifest (manifest.json)
    • Key Properties: name, short_name, start_url, display
    • Workshop
  • Fast, Reliable, and Engaging (Push Notifications)
    • Performance
    • Push API
    • Notification API
    • Workshop
  • Workshop