𝗕𝘂𝗶𝗹𝗱 𝗢𝗻𝗲 𝗪𝗲𝗯 𝗔𝗽𝗽 𝗳𝗼𝗿 𝗜𝗢𝗦, 𝗔𝗻𝗱𝗿𝗼𝗶𝗱, 𝗮𝗻𝗱 𝗗𝗲𝘀𝗸𝘁𝗼𝗽

You do not need three separate codebases to reach every user.

I once managed a project where users needed access via desktop, Android tablets, and iPhones. We had one team. We could not afford to write three different versions of the same app.

You can solve this using two main methods: Progressive Web Apps (PWA) and Capacitor.

How to choose:

• PWAs work in any browser. They are easy to build. They work well on Android and Desktop. iOS support is limited. You may lose push notifications or background sync on iPhones.

• Capacitor wraps your web app in a native shell. This gives you access to the camera, biometrics, and push notifications. You must submit these to the App Store and Google Play.

My strategy:

Ship as a PWA first. Add Capacitor later. This gets your product to users faster. You only add native features when you actually need them.

Key technical steps:

  1. Setup a PWA Use a manifest.json file to tell browsers how to display your app. Use a service worker to handle offline support and caching. For iOS, you must include specific meta tags so the app installs correctly on iPhones.

  2. Add Capacitor for Native Features Install the Capacitor CLI and add the iOS and Android platforms. This creates native projects in Xcode and Android Studio. You can then use plugins to access hardware like the camera or file system.

  3. Handle Platform Differences Use Capacitor to detect the platform at runtime. Use an abstraction layer so your main code stays clean. For example, use localStorage on the web but use Preferences on mobile.

  4. Fix Layout Issues Modern phones have notches and punch-hole cameras. Use CSS env(safe-area-inset-*) to ensure your content does not get cut off.

Two rules for success:

• Test on real devices early. Simulators and emulators do not show every layout bug. I missed bugs for months that appeared immediately on real hardware.

• Keep business logic in the web layer. Use native plugins only for device hardware. If you move logic into native code, you lose the benefit of a single codebase.

Source: https://dev.to/zia_ullah_zia/how-to-build-one-web-app-that-works-on-ios-android-and-desktop-2mni