Convert a PWA to Mobile Apps for iOS and Android

Once upon a time, the internet was mostly composed of static webpages. Developers had to use toolkits like Flash and Java applets to make any sort of interactivity possible. Not only were these implementations glitchy and inefficient, but they faced serious compatibility issues across different computers.

The advent of HTML5 changed everything. Suddenly, web pages were capable of a lot more, from playing embedded videos to handling real-time requests without any plugins or external dependencies. With just HTML, CSS, and a little javascript, anyone could make dynamic web pages.

Progressive Web Applications (PWAs) leverage this dynamism of the new web along with technologies like service workers and manifests to offer a native app-like user experience that works even when the user is offline.

It is no surprise that PWAs have taken off big time in a wide range of industries. A PWA is easy to build, test, and deploy, not to mention easy to update thanks to its ‘progressive’ nature. 

They aren’t the be all and end all of mobile UX though. There are still strong arguments for building native apps to launch on the App Stores. A PWA for the web and mobile apps for your loyal, engaged users is really the ultimate mobile combo.  

In this article we are going to explain why, and then go through some of the ways that you can build mobile apps from your existing PWA. We’re going to show that for many cases our solution, Canvas, is the best option for building iOS and Android apps from your PWA fast and affordably.  

Let’s get started.  

Why you Should Convert Your PWA to Mobile Apps 

On paper, a progressive web app scores over a native mobile app in every respect. It is more accessible for users, easier to develop, and runs on every kind of device without any additional work on your part.

In the real world though, companies almost always build iOS and Android apps, even if they have already released a completely functional PWA.

How do native apps score over PWAs?

Visibility

The biggest reason a business has for porting their application to the App Stores is visibility.

Simply put, users are not on the web anymore.

The proliferation of smartphones in the last few years has drastically changed the way we interact with the internet. Where once the greatest drivers of information exchange were search engines and websites, nowadays the majority of traffic comes through apps.

Derided by critics as ‘walled gardens’, the Google Playstore and the iOS App Store have managed to establish themselves as the end-all-be-all solution to every user need. As a result, a large number of users don’t use web browsers at all, relying on mobile apps to interact with virtually every internet service or content they consume.

Worse, people spend far more time on their mobiles these days than their PCs, which makes capturing the mobile market essential for success.

Retention

In marketing, the most important commodity is attention. In the digital age, attention is increasingly in short supply.

While the web is a good way for grabbing eyeballs and getting your app ‘out there’, it is not that good at retaining that attention. This is because the web, by its very design, affords an incredible level of freedom to its users.

No installation means that users can switch web apps at the click of a button, not to mention browsing multiple websites at once.

In contrast, mobile apps are designed to be restrictive. Users are encouraged to choose a favorite and stick with it, drastically improving the retention rate. The icon on the user’s home screen is a constant reminder, and push notifications help to bring them back into the app again and again!

Now, this is where some readers would point out that a PWA does in fact offer an installation option. So why do we need to go through all the effort in making it into a mobile app?

Because the installation option for PWAs is not very accessible or intuitive. 

Depending on the version of Android on the user’s mobile, the button to install a PWA might not show up at all. Even when it does, the option is not always obvious, and is seldom a single click process.

In iOS, there is no such thing as an install button. It gives users the option to ‘add the app to your home screen’, which can stymie users looking for a straightforward installer.

Either way, installation is not straightforward and can confuse a portion of potential users. This results in a poor UX compared to offering a mobile app – which everyone is familiar with installing through the App Stores and accessing through a tap on their home screen. 

Let’s move on now from the why to the how of building mobile apps for your PWA

How to Convert Your PWA to a Native Mobile App

Firstly, short of hiring a team of developers, there is no quick and easy way of porting your existing codebase to a fully native app. 

There is no way to just reuse your existing code and push a “convert” button to turn your web code into code that runs natively on iOS and Android. There are frameworks that can make the job a little easier (we’re going to look at the best ones), but you are still looking at months of work and multiple five figure development costs. 

This leaves really only one option to effectively convert a web app into a native app. For most web apps or PWAs, the best option is to “wrap” your existing web application in a native app container. This is not a true native app –  it is your PWA working like a native app in a “dedicated browser” – to users it’s an app like any other, but it’s loading your web application for most of the user interface and functionality. In 90% of cases this provides an excellent result, provided the web application is fast and is already designed for mobile.  You get all the benefits of a native app – app store presence, icon on the homescreen, intuitive installation, push notifications across iOS and Android – without rebuilding anything, so much, much faster and cheaper.

Our platform Canvas is the best on the market for this purpose and we are going to show you why (mostly, it’s about merging enough native features with your web app to guarantee a good user experience, App Store approval AND deliver it in a full service or no-code, no-effort way). 

Firstly though, we’re going to go over all the options we’d consider, so you can make an informed decision. We’ll start with something pretty straightforward, Google’s TWA.  

Using a TWA (Android only)

In early 2019, Google implemented a new feature in Android called ‘Trusted Web Activities’. This feature allows a developer to run any kind of web-based application – including a PWA – within an Android app.

Basically, what it does is to open an instance of the Chrome browser, which can then execute the web activity you desire; in this case your PWA.

It might sound a little gimmicky, but this is by far the easiest way to get your Progressive Web App onto a native mobile platform. You get to keep your code, and only need to set up a few configuration files (and add some dependencies) to put it up on the Google Play store.

The process to publish an app to the Play store itself might be a little daunting for a beginner, but you do avoid the need to code in a different language to build a native application. So what’s the catch?

It’s only Android, for one. Unlike Google, Apple does not offer any direct method for putting up a PWA on its store, so the TWA method is useless for it.

More importantly, the process is not exactly straightforward. You need to set up a two-way connection between your PWA and the Android app and modify its manifest file to recognize and use that connection.

And you need to do this all in Android Studio, going into some nitty-gritty details like Keystore files and digital signatures, which would only be familiar to someone who has published Android apps in the past.

Using Ionic and Cordova

While the earlier method works for Android, we need to go a different route to get your app to the Apple play store

You see, Apple simply does not allow a web service to do anything with its API. So you need to trick Apple into thinking that your PWA is actually a native app by constructing a custom wrapper for it.

This is where Cordova comes in. 

Cordova has a variety of plugins that provide a Javascript interface to different native components.

The problem is that Cordova alone cannot power a mobile application. It needs a framework like Ionic to handle the frontend, while Cordova serves as a bridge between the app and the native API.

Needless to say, the process is difficult, tedious, technically challenging and prone to errors. You are likely to spend a couple of weeks (if not a month) just getting your app to play nice with Apple. And that’s if you somewhat know what you’re doing. Let’s check out another method for converting your PWA to a native app. 

NativeScript

By this point, you must be asking, ‘Isn’t there any way to port your PWA to both iOS and Android at the same time?

Well, there is! Just don’t expect it to be easy….

NativeScript is a relatively new framework that allows you to build native applications for iOS and Android using just Javascript and its libraries.

The thing is, NativeScript has its own syntax and functions, and porting your existing PWA to it will involve an extensive rewrite.

Sure, you can still use the javascript implementing internal logic, as NativeScript is written in the same language too. Simple things like how you access page elements or display information are handled a bit differently in NativeScript though. 

If you used a framework like Angular to build your app (or have experience using it), the conversion will go much easier, as NativeScript is deeply integrated with Angular. The advantage of going this route is that it allows you to target both iOS and Android with a single codebase, which can save you a lot of time and effort.

That said, it would be better to keep this method in mind the next time you start building an app, as your PWA will need to be rewritten almost completely to take advantage of NativeScript. This will either take a lot of your time or a lot of your money, and isn’t really worth it considering that there are better options.

We’ve covered a few of the most prominent ways to convert your PWA to iOS and Android apps, and seen the pros and cons of each. These might be good projects for a skilled developer with time on their hands to tinker. They are probably more trouble than they are worth though, and for a business owner who wants to launch effective apps fast for a reasonable investment though, they are not going to cut it.  

As we mentioned earlier, our platform Canvas allows you to sidestep the problems with the above methods and get your PWA on the App Stores in just days for a fraction of the cost. Let’s take a look at Canvas and explain how. 

Convert your PWA to Mobile Apps with MobiLoud Canvas

In our (admittedly biased) opinion, Canvas is the best way to convert your PWA to iOS and Android apps. 

Why? 

In a nutshell, because we can get you great apps launched on the App Store and Google Play in under two weeks, for a fraction of the usual cost, without you needing to touch a single line of code. 

How does Canvas Work?

Canvas uses the latest webview technology to “wrap” your PWA in a native skin that can be published on the App Stores. From your users’ perspective, they are getting the full app experience. From your perspective, you get all the benefits of building native apps but save 90% of the expense, time and hassle. 

Think of it like a dedicated browser for your PWA that can be installed on the user’s device. It is your existing site, with all its features – so every functionality from your existing PWA will work flawlessly in the apps. 

The overall concept is similar to what we discussed earlier with Google’s TWA. But rather than a technical solution, restricted to Android, it’s a complete service that lets you publish apps on both Android and iOS. It also adds native features, navigation and push notifications to your app, enabling a user experience that an empty webview or TWA will never provide without extensive development.

With Canvas you have a team of app experts to support you and handle all updates, maintenance and advanced customizations you need. Third, we have built a lot of features and functionalities into Canvas to ensure an optimal experience like native navigation, native animations, splash screen, spinners, an internal browser, push notifications inbox, loading indicators, and much more.

There’s no need to fiddle with any coding or modifying files, you just configure your apps through our simple dashboard and then our team does all the heavy lifting. There’s nothing to rebuild, and nothing to recreate – before you know it, you’ll be launching your apps. They will be just as good for your business and users as apps that would take months of your time and cost tens of thousands of dollars using less efficient methods.

Let’s take a look at some more reasons why Canvas is the most straightforward and effective way to convert a PWA to mobile apps. 

Straightforward, Fast, Affordable

When you sign up for Canvas, you’ll configure your apps through our dashboard, customising elements of the design and performance according to your goals. This can be done in an afternoon. You’ll then test the apps on your own devices. 

We take it from there, testing your apps and preparing them for submission to the App Stores. We work closely with you to make sure you’re completely happy with the apps throughout the process. 

You’ll be ready to launch in under two weeks, and you won’t have had to fiddle with anything remotely technical. Compared to the other methods above, Canvas gives you as good a result for between 10% and 20% of the cost. Take the time and money you save and reinvest it into your core product for the web – the apps will take care of themselves!

Push Notifications For Both iOS and Android

Although Google is a little more relaxed, Apple is not going to allow push notifications from a PWA any time soon. That’s bad for you right now, because push notifications are the best way to engage your core user base and drive traffic to your brand. 

With Canvas though, you’ll be all set. We integrate with OneSignal, the best push provider on the market. You can send out push notifications to Android and iOS users, setting them up to go out automatically at key points in the user experience, or sending them manually whenever you see fit. You aren’t limited, you can use push notifications to maximum effect. 

All the features you need to succeed

We’ve been developing and improving our platform over 7 years and thousands of apps. We have built all the features into Canvas that you need to succeed, and you can configure them all easily through our simple back end.

You can make changes to your app’s configuration remotely, without an update of your apps. Need to add a new screen or add a menu item? It’s done in a few clicks.

We have also seen almost every edge case possible over the years. If you are looking for your apps to do something unusual or tricky, there’s a good chance we can make it happen. 

Keep what already works

Your PWA probably works great for the mobile web right now. There’s no need to fix what isn’t broken or reinvent the wheel – it will also work great as iOS and Android apps. 

Canvas enables a direct conversion. Your PWA’s functionality and features will work exactly the same in the apps. There’s also nothing to add to your workflow, as the Canvas apps will sync 100% with your PWA and update automatically when you make any changes on the web or add any new content. 

Full service from a top team

We take a hands on approach to customer support and service. We’re always available to help you out with the configuration and we test every app thoroughly. After we’ve tested it and you’re happy with the apps, we’ll take it from there. 

We’ll dedicate several hours to making sure that your app is working smoothly, with the best performance and UX possible, to ensure the highest chances of first-time approval in the App Stores. We handle submission and publishing entirely. Of course, we know the process in and out, so we guarantee approval – in the extremely unlikely event that we can’t get your app on the stores, we’ll refund 100% of your money. 

Once you’ve launched your apps into the pockets of your fans it doesn’t stop there. All software requires ongoing maintenance to ensure it is performing well, and updates to make sure that they are running optimally on the latest versions of the operating systems. Generally, you would expect to invest 20% of the initial development costs in maintenance annually, which for most companies equals multiple five figure costs each year. Ugly and expensive surprises also often crop up. 

Canvas takes a lot of this expense away. 

On all plans we handle all maintenance and updates for the lifetime of the apps for a predictable monthly fee, saving you countless hours and thousands in developer fees every year. 

Keep full control with Canvas

Your Canvas apps are yours, and you have full control of them. You will be listed as the developer on the stores and every account used will be yours alone – you just invite us as your developer. Don’t worry about being able to replace the apps or being stuck with one provider, you can switch any time. 

Get on The App Stores ASAP

Whether you decide to go with Canvas or slug it out with any of the other methods we went through, you’re making a great decision. 

A PWA for visibility on the mobile web and iOS and Android apps for your most loyal users is the ultimate mobile combo, and ensures that you get the benefits of an optimal and modern mobile UX – a bigger, more engaged, more loyal user base. 

We hope this article has been informative and pointed you in the way of some legitimate options.
Why not get in touch with our team who can answer any questions you might have – or just sign up to Canvas and start building great apps today.