Web, Android, and iOS with the same code-base

Launching a Web App on iOS and Android Stores Using WebView

This is the story of how we successfully launched a web application and published it on Android and iOS stores using WebView and a little bit of magic.

Why?

The main reasons that led us to this decision were:

• Time: Our client had a very tight deadline due to commitments with investors.
• Resources: We did not have the capacity to dedicate developers to native platforms.

How?

With this in mind, we took the risky decision to bet everything on the web platform, with the idea that the improvements planned for mobile would be enough to pass the approval of the mobile stores.

The mobile-specific adaptations that made this possible were:

Splash Screen

We leveraged the PWA (Progressive Web Apps) concept to create an initial loading screen that acted as a loader while ensuring the mobile status bar colors matched our brand colors.

Native Inputs

One of our first focuses was enhancing the mobile experience when entering data, delegating as much as possible to native controls of Android and iOS. This included:

• Select inputs
• Date pickers
• Number fields
• Text inputs

Tip: Be careful with complex component libraries. Always set the appropriate <input type="" /> for each case. Here is a complete list of valid input types.

💡 Particular emphasis was given to date pickers, selects, and dropdowns.

Mobile-First Approach

Given the responsive nature of our web-app, we followed a mobile-first design strategy to ensure all functionality was well covered across all screen sizes.

If a mobile-first approach is not possible, a well-executed responsive design can be equally effective.

(No) Payments

Our application offers a subscription service, requiring users to pay a fee for access.

Important: Mobile stores require a revenue share if payments are enabled within the app. To avoid this:

• We reviewed our entire navigation tree to ensure that users cannot pay within the app.
• Any screens and texts related to subscriptions were hidden in the mobile versions.

This saved us integration costs with payment gateways and avoided store royalties.

File Uploads

To comply with store guidelines, the app had to offer a unique mobile experience beyond what was possible on desktop.

We leveraged file uploads to integrate directly with:

• The mobile file system
• The camera, providing practical functionality for users

Push Notifications

We added push notifications to enhance the mobile experience by notifying users about relevant events. This was implemented using:

• Web Notifications API
• A dedicated push notification server like Firebase

Deep Linking

To improve navigation and fluidity, push notifications were set up to send users directly to relevant screens.

Setup Reference: How to configure deep linking in a React Native application.

React Native WebView Wrapper

We created a React Native project using the react-native-webview package to load our website as a mobile app.

This allowed us to reuse the same codebase across iOS, Android, and the web.

Dedicated CI/CD

One of the biggest challenges in mobile development is packaging and deployment. To streamline this process, we set up two pipelines in our codebase:

• Web Pipeline
• Mobile Pipeline (using Fastlane and Bitrise)

This automation allowed us to publish to the app stores across different channels (alpha, testing, production) efficiently.

Bonus Track

Additional Enhancements for a Native-Like Experience:

• Button feedback when clicking elements.
• Click outside behavior for modals and side menus to close them naturally.

These small UX improvements helped our web app feel more like a native application.

One More Thing…

All mobile-specific modifications were designed to activate automatically when the app detects it is running inside a WebView. However, when accessed via a mobile browser, the experience remains the same as desktop, but mobile-first.

Win-Win Situation!

Recap

Can a 100% Web Application Be Published in App Stores? Yes, but attention to detail and user experience are key. The app should provide unique value beyond standard web features.

🚀 Hope you found this helpful! Feel free to share your experiences or ask questions in the comments. 😊