📱 What Is a Progressive Web App (PWA)?

📚 Syllabus Dot Point

Design, develop and implement a progressive web app (PWA)
Including: UI/UX principles (font, colour, audio, video, navigation), UI that considers accessibility and inclusivity

A Progressive Web App (PWA) is a website that behaves like a native mobile app. It can be installed on your home screen, work offline, send push notifications, and load instantly — built with HTML, CSS, and JavaScript. No App Store needed.

Companies like Starbucks, Spotify, Pinterest, Twitter, and Uber all have PWAs.

💡 UI/UX Principles in PWA Design

UI (User Interface) = how the app looks. UX (User Experience) = how the app feels. Key principles: Font — readable, 16px+ body, system fonts for speed. Colour — high contrast (WCAG AA 4.5:1 ratio), consistent brand palette. Navigation — thumb-friendly bottom nav, max 3 taps to any content. Audio/Video — captions required for accessibility, autoplay disabled by default, controls always visible. Accessibility — screen reader support (ARIA labels), keyboard navigation, alt text, focus indicators. Inclusivity — language options, colourblind-safe palettes, scalable text (rem units), reduced motion support.