Progressive Web Apps

Introduction #

• What are Progressive Web Apps?
• How Progressive Web Apps can drive business success
• What makes a good Progressive Web App?

Make it installable #

• What does it take to be installable?
• How to define your install strategy

Provide an installable experience #

• Add a web app manifest
• Create an offline fallback page
• How to provide your own in-app install experience
• Patterns for promoting PWA installation
• Using a PWA in your Android app

Codelabs #

• Make it installable

Create an app-like user experience #

• Make your PWA feel more like an app
• Progressively enhance your Progressive Web App

PWA-exclusive features #

• Get things done quickly with app shortcuts
• Badging for app icons
• Receiving shared data with the Web Share Target API
• Adaptive icon support in PWAs with maskable icons
• Richer offline experiences with the Periodic Background Sync API

More ways to improve your user experience #

• Is your app installed? getInstalledRelatedApps() will tell you!
• Integrate with the OS sharing UI with the Web Share API

Advanced topics #

• How Chrome handles updates to the web app manifest
• Progressive Web Apps in multi-origin sites
• Offline UX design guidelines

Case studies #

• Deprecating Excalidraw Electron in favor of the web version
• Clipchamp's video editor PWA installs see a 97% monthly growth
• PWA users are 2.5x more likely to purchase Gravit Designer PRO
• JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications
• Rakuten 24’s investment in PWA increases user retention by 450%
• How ZDF created a video PWA with offline and dark mode
• How Goibibo's PWA improved conversions by 60%
• Building a PWA at Google, part 1