A presentation at PWA Summit by Micah Engle-Eshleman
Bringing your PWA to App Stores Micah Engle-Eshleman Fullstack @ BeFunky View talk here: youtu.be/qbh_u2hvIjg?t=15600
Why App Stores? • Discovery: users search for apps in stores
Why App Stores? • Discovery: users search for apps in stores • Higher trust & familiarity with app installation process
Why App Stores? • Discovery: users search for apps in stores • Higher trust & familiarity with app installation process • Packaging your PWA is relatively painless. Reuse the same codebase but increase distribution.
Which App Stores? • Play Store (Android/ChromeOS) • Microsoft Store (Windows) • Samsung Galaxy Store (Android) • App Store* (iOS/Mac) * requires significant refactoring
Quickstart Try out pwabuilder.com Packages your PWA for all supported app stores!
twa-manifest.json
Bubblewrap CLI Packages PWA for Play Store (as Trusted Web Activity) $ npm install -g @bubblewrap/cli $ bubblewrap init —manifest=”manifest url…” $ bubblewrap build Quickstart article | Docs on Github
Version Control
Case Study befunky.com
Background - Frontend: WebGL, Lit-html, Web Components
Background - Frontend: WebGL, Lit-html, Web Components Audience: mostly desktop, some tablet (mobile coming soon) - 2-3 million monthly users - 6k monthly PWA users (3x engagement)
Frontend: WebGL, Lit-html, Web Components Audience: mostly desktop, some tablet (mobile coming soon) - 2-3 million monthly users - 6k monthly PWA users (3x engagement) Why the Play Store? ChromeOS is an increasingly popular desktop market
Which App Stores? • Play Store (Android/ChromeOS) • Microsoft Store (Windows) • Samsung Galaxy Store (Android) • App Store* (iOS/Mac) * requires significant refactoring
Package PWA using Bubblewrap CLI Upload AAB file to Google Play Console Create new release (testing or production)
Save flag in SessionStorage Article: Bulletproof PWA & TWA Detection micahjon.com/2021/pwa-twa-detection
Payments How to charge users and keep track of subscriptions
Renewal and cancellation
Renewal and cancellation Digital Goods API Payment Request API
User’s access to products/subscriptions
Digital Goods API
Intl.NumberFormat Display price in the user’s preferred currency and language
Processes payment (with user’s payment method)
Payment Request API
Payment Request API Show Prompt
Payment Request API Validate Payment
Payment Request API Acknowledge Purchase
Payment Request API Tell browser that payment succeeded (closes native payment prompt)
Care about PWAs and web performance? Come work with us!
Thanks! You can find me at on the web at micahjon.com @micahjon on Github, @micahjme on Twitter Try out BeFunky at befunky.com/create Thanks to Alexander Nohe and Sam Richard at Google for their encouragement and advice!
App stores are an important distribution channel for Progressive Web Apps; they provide exposure alongside the other apps users are searching for, and have built-in ways to manage purchases and subscriptions. In this talk, BeFunky will share their experience launching their PWA into the Play store, from bundling it for release to integrating with Play payments with the Digital Goods and Payment Request APIs, all while sharing what they’ve learned and what getting into an app store has done for their product.
for free. You
can too.