PWA: Bridging the gap between web and mobile + App Store challenge

Everyone knows that developing separate versions for each platform can be time-consuming and expensive. PWA seems to be a solution… But problems arise even more when navigating the guidelines and submission processes of app stores like Google Play and Apple’s App Store. 

But what if there was a way to streamline this process and create a single product that seamlessly adapts to both web and mobile devices? 

Join us as we delve into the challenges of building cross-platform app and explore solutions that address these complexities.

One product – multiple projects

Originally, when preparing an online application, the development team usually had to prepare a front that could handle desktop and mobile resolutions and, ideally, everything in between. 

Challenges appeared when the application was to appear in the Google Play Store or Apple App Store. 

Even if the visual design stayed exactly the same, the apps themselves had to be prepared separately from the “WEB App”. This led to obvious development time and cost increases.

Multiple projects – one solution

When faced with the limitations mentioned above, we began our search for a universal solution that could leverage production time and costs and, ideally, add an option for reusing the web app that we had already prepared. 

Our biggest concern was Apple’s App Store, as we knew it had the most strict rules of application acceptance. After some research, we’ve decided to use an online PWABuilder tool. What it does is it wraps the web application inside the webframe of a native iOS application and simulates it as if it was a native app itself.

Initial euphoria

PWABuilder allowed us to quickly prepare the first application build and, going through a step-by-step tutorial, we published the first version of our application to the App Store.

When testing on a physical device, the app ran smoothly and there weren’t any signs that it was “just a web app in disguise”. 

However, we soon realized that, with its design and functionalities, it stood out (and not in a positive way) from the rest of the native applications on the market.

Visuals of the app

Firstly, we decided to handle the graphic aspects of our application. After some trial and error, we’ve added a script, which could detect if it was running on an environment prepared by PWABuilder. 

What it did with that knowledge was mostly two things:

• It added a custom class to the document body, which allowed us to implement “app only” styles. That allowed us to change the looks of some components to match the application standards and handle some minor bugs, which appeared only in this mode.
• Other components could use this “isIOS” flag to change their own logic accordingly. Thanks to that, new, additional components were rendered, some of the components changed their visual appearance, and some others – didn’t render entirely.

On top of that, we prepared additional views, which were visible only to application users. All to deliver an “app-like” experience for the users.

Native functionalities

On top of visual tweaks, we’ve decided to add native app functionalities. It could diversify our iOS app version from the “basic” PWA one. 

We’ve brainstormed the ideas and possibilities and agreed on the ones that made the most sense in our case. 

The ones we’ve settled on were:

• Widget with a built-in search input, which redirects to applications search view with search phrase already inputted.
• Shortcuts to most-used application views
• Quick actions to the very same views

Features mentioned above had to be prepared in Xcode, but development time for them was negligible compared to creating the whole application from scratch.

Conclusion

Progressive Web Apps emerge as a promising solution, offering a unified experience across web and mobile platforms. Our journey with PWAs involved challenges like App Store requirements and visual enhancements, but the results were rewarding. By embracing PWAs and adapting to App Store guidelines, businesses can deliver seamless experiences and achieve success.