Progressive Web Apps (PWA)

App Store Distribution

20 min Lesson 25 of 30

Distributing PWAs to App Stores

Progressive Web Apps can now be distributed through traditional app stores, giving you access to billions of users on Android and Windows platforms. This lesson covers the tools and processes for publishing your PWA to major app stores.

Understanding TWA (Trusted Web Activity)

Trusted Web Activities allow you to package your PWA as a native Android app that runs in a Chrome Custom Tab without any browser UI.

TWA Benefits:
  • Full-screen PWA experience without browser chrome
  • Access to device features through Web APIs
  • Share storage and cookies with the web version
  • Automatic updates through PWA deployment
  • No need to learn native Android development
  • Single codebase for web and Android

Using PWABuilder

PWABuilder is Microsoft's official tool for packaging PWAs for multiple app stores with minimal configuration.

# Using PWABuilder Web Interface 1. Visit https://www.pwabuilder.com 2. Enter your PWA URL (must be live with HTTPS) 3. Click "Start" to analyze your PWA 4. Review the manifest and service worker report 5. Fix any issues reported by PWABuilder 6. Click "Package for Store" 7. Select target platforms: - Android (Google Play) - Windows (Microsoft Store) - iOS (Limited support) # PWABuilder will generate: - Android APK/AAB files - Windows MSIX package - iOS app shell (requires Xcode) - Signing instructions - Store listing assets
Pro Tip: PWABuilder automatically validates your PWA against store requirements and provides actionable recommendations to improve your app before submission.

Using Bubblewrap for Android

Bubblewrap is Google's official tool for creating TWAs. It provides more control than PWABuilder for advanced use cases.

# Install Bubblewrap CLI npm install -g @bubblewrap/cli # Initialize TWA project bubblewrap init --manifest https://yourpwa.com/manifest.json # Answer the prompts: Domain: yourpwa.com App name: My PWA Package name: com.example.mypwa Icon URL: https://yourpwa.com/icon-512.png Theme color: #4285F4 Background color: #FFFFFF Start URL: / Display mode: standalone Orientation: default Status bar color: #4285F4 # Generate Android project bubblewrap build # Output: # - app-release-signed.apk (for testing) # - app-release-bundle.aab (for Play Store)
# Update existing TWA bubblewrap update # Build updated version bubblewrap build # Install on connected device for testing bubblewrap install

Publishing to Google Play Store

The process for publishing your PWA to Google Play Store as a TWA.

Prerequisites:
  • Google Play Developer account ($25 one-time fee)
  • Live PWA with valid manifest.json
  • Service worker with offline support
  • HTTPS enabled
  • Digital Asset Links verification
  • App signing key
# Step 1: Generate app signing key keytool -genkey -v -keystore my-release-key.keystore \ -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 # Step 2: Build signed AAB bubblewrap build # Step 3: Set up Digital Asset Links # Add to your website at /.well-known/assetlinks.json [{ "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.example.mypwa", "sha256_cert_fingerprints": [ "YOUR_SHA256_FINGERPRINT" ] } }] # Get SHA256 fingerprint keytool -list -v -keystore my-release-key.keystore # Step 4: Create Play Store listing 1. Go to Google Play Console 2. Create new app 3. Fill in store listing details: - App name - Short description (80 chars max) - Full description (4000 chars max) - Screenshots (minimum 2) - Feature graphic (1024x500) - App icon (512x512) 4. Set content rating 5. Select app category 6. Set pricing (free/paid) 7. Upload AAB file 8. Complete privacy policy 9. Submit for review # Step 5: Release management - Internal testing (up to 100 testers) - Closed testing (alpha/beta) - Open testing - Production release
Important: Google Play requires your PWA to pass Digital Asset Links verification. This proves you own both the website and the app. Without this, the app will open in a browser tab instead of full-screen.

Publishing to Microsoft Store

Microsoft Store has excellent PWA support and allows publishing web apps directly.

# Prerequisites: - Microsoft Partner Center account ($19 one-time fee) - Live PWA with valid manifest - Service worker - HTTPS # Using PWABuilder: 1. Visit https://www.pwabuilder.com 2. Enter your PWA URL 3. Click "Package for Store" 4. Select "Windows" 5. Download the MSIX package 6. Upload to Partner Center # Manual Process: 1. Go to Microsoft Partner Center 2. Create new app 3. Reserve app name 4. Fill in product details: - Description - Screenshots (1366x768 or higher) - App icon - Category - Privacy policy 5. Upload MSIX package 6. Complete age ratings 7. Submit for certification # App will be reviewed within 24-48 hours

iOS Limitations and Workarounds

iOS has limited support for PWAs, but you can still create an installable app with some limitations.

iOS PWA Limitations:
  • No Push Notifications (until iOS 16.4+ with limited support)
  • 50MB storage limit for Cache API
  • Service Worker cleared after 7 days of inactivity
  • No background sync
  • No access to native features via Web APIs
  • Cannot be published to App Store as PWA
<!-- Optimize PWA for iOS installation --> <head> <!-- Standard manifest --> <link rel="manifest" href="/manifest.json"> <!-- iOS specific meta tags --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="My PWA"> <!-- iOS splash screens (multiple sizes required) --> <link rel="apple-touch-startup-image" href="/splash/iphone5.png" media="(device-width: 320px) and (device-height: 568px)"> <link rel="apple-touch-startup-image" href="/splash/iphone6.png" media="(device-width: 375px) and (device-height: 667px)"> <link rel="apple-touch-startup-image" href="/splash/iphoneplus.png" media="(device-width: 414px) and (device-height: 736px)"> <link rel="apple-touch-startup-image" href="/splash/iphonex.png" media="(device-width: 375px) and (device-height: 812px)"> <link rel="apple-touch-startup-image" href="/splash/iphonexr.png" media="(device-width: 414px) and (device-height: 896px)"> <link rel="apple-touch-startup-image" href="/splash/iphonexsmax.png" media="(device-width: 414px) and (device-height: 896px)"> <link rel="apple-touch-startup-image" href="/splash/ipad.png" media="(device-width: 768px) and (device-height: 1024px)"> <link rel="apple-touch-startup-image" href="/splash/ipadpro1.png" media="(device-width: 834px) and (device-height: 1112px)"> <link rel="apple-touch-startup-image" href="/splash/ipadpro2.png" media="(device-width: 1024px) and (device-height: 1366px)"> <!-- iOS app icon --> <link rel="apple-touch-icon" href="/icons/icon-180x180.png"> </head>

App Store Optimization (ASO)

Optimize your app store listing to maximize visibility and downloads.

ASO Best Practices:
  1. App Name: Include main keyword (30 chars max on Google Play)
  2. Short Description: Clear value proposition (80 chars)
  3. Full Description: Features, benefits, keywords (4000 chars)
  4. Keywords: Research popular search terms in your category
  5. Screenshots: Show key features with text overlays
  6. Feature Graphic: Eye-catching banner for store listings
  7. App Icon: Simple, recognizable, follows platform guidelines
  8. Video Preview: 30-second demo of app functionality
  9. Ratings & Reviews: Encourage positive reviews from users
  10. Regular Updates: Shows active development

Monitoring Store Performance

Track your app's performance across different app stores.

// Track app installations from stores if (window.matchMedia('(display-mode: standalone)').matches) { // App installed (running as standalone) gtag('event', 'app_open', { source: 'pwa_installed' }); } // Track store referrals const urlParams = new URLSearchParams(window.location.search); const source = urlParams.get('utm_source'); if (source === 'google_play') { gtag('event', 'install_source', { store: 'google_play' }); } else if (source === 'microsoft_store') { gtag('event', 'install_source', { store: 'microsoft_store' }); } // Track PWA install prompt window.addEventListener('beforeinstallprompt', (e) => { gtag('event', 'install_prompt_shown'); }); window.addEventListener('appinstalled', () => { gtag('event', 'app_installed', { method: 'web_install_prompt' }); });
Exercise:
  1. Use PWABuilder to analyze your PWA
  2. Generate Android package using Bubblewrap
  3. Set up Digital Asset Links for your domain
  4. Create Google Play Developer account
  5. Upload AAB to Play Console as internal test
  6. Test TWA on Android device
  7. Generate Windows package using PWABuilder
  8. Create store listing with screenshots and descriptions
  9. Add iOS-specific meta tags for better iOS support
  10. Implement store performance tracking
Legal Requirements: Ensure your app complies with store policies including privacy policy, data collection disclosure, and content guidelines. Both Google Play and Microsoft Store require a publicly accessible privacy policy URL.
Success Tip: Start with internal testing on Google Play. Share the test link with friends and colleagues to gather feedback before public release. Use their feedback to improve your store listing and app experience.
Previous Lesson Deploying PWAs
Next Lesson Building a PWA Project (Part 1)
Back to Course