Bringing your PWA to App Stores

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)

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) 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

Submitting PWA to Play Store -

Package PWA using Bubblewrap CLI Upload AAB file to Google Play Console Create new release (testing or production)

Analytics How to know if PWA was installed from your website or via an app store? - Customize start URL (in twa-manifest.json)

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

App stores manage… - Prices for products/subscriptions

User’s access to products/subscriptions

User’s payment methods

Payment flow

Renewal and cancellation

PWAs in the Play Store - Prices for products/subscriptions

User’s access to products/subscriptions

User’s payment methods

Payment flow

Renewal and cancellation Digital Goods API Payment Request API

Digital Goods API - Prices for products/subscriptions

User’s access to products/subscriptions

Digital Goods API

Intl.NumberFormat Display price in the user’s preferred currency and language

Payment Request API - Prompts payment (in user’s preferred currency & locale)

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!