Designing Great Progressive Web Apps
summary
Mobile pages average 19 seconds to load but PWAs use service workers and an app shell to show UI immediately, cut perceived wait, and reach offline resilience; retail examples report 20% more time on site and The Weather Channel sees an 80% improvement after shipping a PWA. Design specifics: 48 dp minimum touch targets, preload web fonts, inline above‑the‑fold SVGs, offer a data saver mode (Twitter Lite saves ~70% bandwidth), delay install prompts, and work around iOS limits.
AI-written summary · about
chapters (21)
- 0:00Intro
- 0:11Designing Great Progressive Web Apps
- 4:46Use Material Design Components
- 5:27Your app icon should visually match the native app icons
- 8:51Engaging
- 11:55Delay the app install banner until after the user engages with your app
- 12:38Don't break the user's flow for an update
- 14:22Don't use fake android native banners
- 15:58The burger menu might be hurting your UX
- 17:44Resilient
- 18:59Use the app shell model
- 21:01Web fonts are heavy- device fonts are weightless
- 26:07Give the user control to download for offline use
- 26:31Inform the user when the app is ready for offline consumption
- 26:50Give an offline mode color to your theme.
- 27:19Other design considerations
- 28:07The app icon on iOS is a screenshot of the app by default
- 30:59Design for accessibility and low-end devices
- 32:15Consider high data cost and low-end phones.
- 32:53Make better color choices with sufficient contrast
- 33:21Implement techniques for an accessible website.
