Cross-Platform Strategy: Scaling from PWA to Capacitor for iOS, Android, and Desktop

Two Approaches: PWA vs. Capacitor

Developer Zia Ullah outlines a strategy for deploying a single web app across desktop, Android, and iOS. This architecture eliminates the need for three separate codebases while maintaining native functionality.

Why This Matters

The technical reality is that while PWAs offer rapid deployment, iOS support remains limited regarding push notifications and background sync. Relying solely on simulators often leads to failure in production; layout bugs specifically related to safe area insets on real iPhones frequently go undetected until the first week of real-device usage.

Key Insights

• PWA limitations on iOS result in restricted background sync and delayed feature adoption compared to Android/Desktop (2026).
• The ‘Ship PWA first’ concept allows teams to validate user needs before committing to the overhead of App Store and Google Play submissions.
• Capacitor acts as a native shell providing access to device APIs like biometrics and file systems, used here as an abstraction layer over web code.

Working Examples

Web App Manifest for PWA installation configuration.

{
"name": "My App",
"short_name": "MyApp",
"description": "A cross-platform web application",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0066cc",
"orientation": "portrait-primary",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}

Runtime platform detection using Capacitor.

import { Capacitor } from '@capacitor/core';
const platform = Capacitor.getPlatform(); // 'ios', 'android', or 'web'
if (Capacitor.isNativePlatform()) {
// Running inside a native app shell
} else {
// Running in a browser
}

CSS environment variables to handle iPhone notches and rounded corners.

.app {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}

Practical Applications

• ،{ type: ‘text’, text: ‘Use case: Native storage abstraction using @capacitor/preferences for platform parity.\nPitfall: Storing sensitive data in default Preferences; results in unencrypted storage unless @capacitor-community/secure-storage is used.’ }’}, { type: ‘text’, text: ‘Use case: Field apps requiring camera or push notifications via Capacitor plugins.\nPitfall: Moving business logic into native layers; results in splitting the codebase into three versions, defeating the purpose of the cross-platform approach.’ }’}

References:

• <https://dev.to/zia_ullah_zia/how-to-build-one-webapp ThatWorksOniOSAndroidAndDesktopC2mni>