Publishing PWAs to App Stores — Google Play, Microsoft Store, and iOS

In this tutorial, you will learn about Publishing PWAs to App Stores. We cover key concepts, practical examples, and best practices to help you master this topic.

Publishing PWAs to app stores involves wrapping them in native shells for Google Play, Microsoft Store, and the Apple App Store — extending your reach beyond the browser.

What You'll Learn

By the end of this tutorial, you will understand how to publish a PWA to each major app store, the tools required, the limitations of each platform, and the benefits of store distribution.

Why It Matters

While PWAs are discoverable via search engines, app stores remain the primary way users find and install applications. Publishing your PWA to stores increases discoverability, builds trust (store listings have review systems), and provides analytics through store dashboards.

Real-World Use

A travel booking PWA published to the Google Play Store saw a 40% increase in installations. Users who discovered the PWA in the store were 3x more likely to install than those who visited the website directly. Store search became a significant acquisition channel.

Publishing Options

PWA Store Publishing Options
    ┌──────────────────────────────────────────────────────────────┐
    │                    App Store Options                        │
    ├──────────────┬──────────────┬───────────────────────────────┤
    │  Google Play │  Microsoft   │  Apple App Store              │
    │  Store       │  Store       │  (Limited)                    │
    ├──────────────┼──────────────┼───────────────────────────────┤
    │  Trusted     │  PWABuilder  │  No direct PWA support        │
    │  Web Activity│  generates   │  Must wrap in WKWebView or    │
    │  (TWA)       │  native app  │  use Capacitor/Cordova        │
    ├──────────────┼──────────────┼───────────────────────────────┤
    │  Full        │  Full        │  App review required          │
    │  Play Store  │  Store       │  Native wrapper needed        │
    │  features    │  features    │  May reject PWAs               │
    └──────────────┴──────────────┴───────────────────────────────┘

Think of publishing to stores like a restaurant listing on food delivery apps. Users who would never visit your restaurant (website) will order through Uber Eats (app store). Being on the platform increases visibility even if they do not fully understand what PWA means.

Google Play Store with TWA

Trusted Web Activity (TWA) wraps your PWA in a native Android shell:

# Using Bubblewrap (Google's official tool)
npm install -g @bubblewrap/cli

# Initialize TWA project
bubblewrap init --manifest https://your-pwa.com/manifest.json

# Build the Android app
bubblewrap build

# Output: app-release-signed.apk or .aab

// twa-manifest.json (generated by Bubblewrap)
{
    "packageName": "com.example.mypwa",
    "displayName": "My PWA",
    "hostName": "https://your-pwa.com",
    "launchUrl": "/",
    "navigation": {
        "enabled": true,
        "intentFilter": {
            "hosts": ["your-pwa.com"]
        }
    },
    "appVersion": "1.0.0",
    "iconUrl": "https://your-pwa.com/icons/icon-512.png",
    "splashScreen": {
        "backgroundColor": "#3367D6",
        "iconUrl": "https://your-pwa.com/icons/icon-512.png"
    },
    "themeColor": "#3367D6",
    "fallbackBehavior": "webview"
}

TWA Verification

TWA requires Digital Asset Links to verify domain ownership:

// https://your-pwa.com/.well-known/assetlinks.json
[
    {
        "relation": ["delegate_permission/common.handle_all_urls"],
        "target": {
            "namespace": "android_app",
            "package_name": "com.example.mypwa",
            "sha256_cert_fingerprints": [
                "AA:BB:CC:DD:..."
            ]
        }
    }
]

Microsoft Store with PWABuilder

PWABuilder generates a Microsoft Store package:

// 1. Go to https://pwabuilder.com
// 2. Enter your PWA URL
// 3. Generate Windows package
// 4. Download the .msix or .appxbundle

// PWABuilder generates:
// - Windows App SDK project
// - Edge WebView2 wrapper
// - Store listing metadata
// - Screenshots from your PWA

Apple App Store Limitations

iOS does not support direct PWA publishing. Options:

// Option 1: Wrap in WKWebView with Swift
import WebKit
import UIKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        webView = WKWebView(frame: view.frame)
        view.addSubview(webView)

        let url = URL(string: "https://your-pwa.com")!
        webView.load(URLRequest(url: url))
    }
}

// Option 2: Use Capacitor (recommended)
// npx cap init
// npx cap add ios
// npx cap copy && npx cap open ios

// Option 3: Use PWA Builder for iOS
// PWABuilder can generate an iOS wrapper
// Limited functionality compared to native

Store Listing Optimization

const storeListing = {
    title: 'My PWA - Powerful Features Offline',
    subtitle: 'Fast, reliable, installable',
    description: 'Experience our app offline with instant loading...',
    categories: ['Productivity', 'Tools'],
    keywords: ['offline', 'pwa', 'progressive web app'],

    // Screenshots (generate from PWA)
    screenshots: [
        {
            file: 'screenshot-home.png',
            caption: 'Home screen with offline content'
        },
        {
            file: 'screenshot-features.png',
            caption: 'Feature overview'
        }
    ],

    // Promotional assets
    featureGraphic: 'promo-graphic.png', // 1024x500
    icon: 'icon-512.png', // 512x512
    promoVideo: 'promo.mp4' // Optional
};

Store Analytics

// Track store installs in your PWA
async function trackStoreInstall() {
    // Check if installed via Play Store
    const isTwa = document.referrer.includes('android-app://');

    if (isTwa) {
        console.log('Installed via Google Play Store');
        sendAnalytics('install_source', 'play_store');
    }

    // Check if installed via Windows Store
    if (navigator.userAgent.includes('MSAppHost')) {
        console.log('Installed via Microsoft Store');
        sendAnalytics('install_source', 'microsoft_store');
    }

    if (window.matchMedia('(display-mode: standalone)').matches) {
        console.log('Running as installed PWA');
    }
}

Common Mistakes

1. Not verifying Digital Asset Links for TWA. Without assetlinks.json verification, your TWA opens in the browser instead of standalone mode.
2. Submitting to Apple App Store without a native wrapper. Apple does not accept PWAs directly. You need a minimal native app with a WKWebView.
3. Ignoring store listing quality. Poor screenshots, generic descriptions, and wrong categories reduce install conversion.
4. Not updating store versions. When your PWA updates, update the store version too. Store versions are independent of PWA versions.
5. Assuming all store features work in TWA. Push notifications in TWA use the PWA's push mechanism, not Firebase Cloud Messaging. Test all features.

Practice Questions

1. What is a Trusted Web Activity (TWA) and how does it enable Play Store distribution?
2. What is the purpose of the Digital Asset Links file for TWA?
3. How does PWABuilder help publish PWAs to the Microsoft Store?
4. Why is publishing to the Apple App Store more difficult than Android?
5. What should you include in your store listing to maximize install conversion?

Challenge: Use PWABuilder to generate a Windows package for any PWA. If you have an Android device, use Bubblewrap to generate a TWA APK and install it. Document the steps and any issues encountered.

FAQ

{{< faq "Does Apple accept PWAs in the App Store?" "Apple does not accept PWAs directly. You must wrap the PWA in a native WKWebView shell. Apple may reject apps that are "just websites wrapped in a web view."" >}}

Mini Project

Take a PWA and go through the complete publishing Process: generate a TWA package with Bubblewrap, create the assetlinks.json file, prepare store listing assets (screenshots, icons, description), and submit to the Google Play Store (or document the process if you cannot submit). Generate a Windows package with PWABuilder.

What's Next

You have a published PWA. Now apply everything you learned in the final PWA project — building a complete offline-first PWA from scratch.