Building a website wrapper in Cordova

A friend of mine asked me to build an app for his company which has all its business logic implemented on a website. Besides me not being able to spend enough time to build native apps for Android and iOS for him, there was no API implemented anyway (website was all server-rendered). I decided to go with an approach that I already used for my previous company: enhance an existing website with native features using Apache Cordova.

Let's start with the easy part:

Wrapping a website with Cordova

That's easy! Create a new Cordova project and change config.xml as follows:

• change src-attribute of content-tag to your website, e.g. https://tomtasche.at
• add a new line below content-tag: <allow-navigation href="https://tomtasche.at/*" />

Now... no wait, we're done! I told you it was easy. What you get now is an app you can install on your device and eventually release on app stores*!

To make it even more appealing, your app will automatically benefit from changes to your website, since it is basically just a camouflaged browser accessing your website. No need to worry about updating the app separately.

Add native features to your website

This is where it gets interesting: we can leverage Cordova to add access to native device features like GPS, camera, sensors, files and many more. You may also use it to better interact with the system. For example you could make use of a seamless Facebook login if the user has the app installed on his device.

1. To do this, you have to first install the plugins you plan to use as per the documentation and build your project afterwards
2. If everything went well you should be able to copy the folder located at platforms/android/app/src/main/assets/www and host it somewhere (e.g. where your website is hosted too)
3. Next include a script-tag on your website to load the cordova.js-file located in this directory
• Make sure to only load it when your website is being accessed from Cordova! For example, you could load your website with an app-specific query parameter and store a cookie based on that.
4. The last step is to call the Cordova plugins you installed as per their documentation and make use of them!
• Again you should only attempt to call those plugins if your website is being accessed via your app. You could use feature detection to achieve that, i.e. check if the global variable of a plugin exists.

Using this approach you are able to create a hybrid app which shares the same codebase with your website. I would not recommend to do this for big projects, but for small companies which can't afford (money and timewise) to build a full-blown native app.

So let's recap what we have now:

• An app that is ready for release without investing too much time. I was able to pull this off in one weekend (I spent two thirds of the time on figuring out how to do this - you won't have to do that yourself)
• Reuse current codebase of an existing website, but enhance it with access to native features, therefore providing a better user experience

Check out my other blog post for some reasons why you would want to keep your hands off of Cordova!

*Apple might reject your app at this stage. You might be able to workaround this by adding native features to your website as described above!