Deploying an Ionic app as a mobile website

Ionic is an open source framework to build mobile apps using html, css and javascript. Apps built using Ionic can be compiled using cordova and deployed on android and ios devices with a common codebase. The same codebase can be deployed as a mobile website as well. This is a huge advantage as you do not need to maintain different codebases for different platforms, roll out updates for all platforms simultaneously and save on development cost. Moreover, since the code running as native app is actually just html and javascript, you can roll out live updates to the app without pushing the update to the app stores (more on this in a later post). With devices getting more powerful, the performance difference is virtually non-existent so you can build native quality apps. Cordova itself is a very matured platform with lot of plugins available for native services and they can be plugged in very easily to an Ionic app.

The purpose of this post is to guide someone who wants to deploy an Ionic app as a mobile website. The main difference between an Ionic app running as an app on a mobile device and running as a mobile website is the web server. In case of an app, your mobile device acts as a web server and all files are already available on the device. When running as a website, the codebase is hosted on a remote server which can be accessed by a browser to run the app. Although, its a fairly simple process to deploy an Ionic app as a mobile website, few things should be kept in mind while doing the same. Please note that the points below are written keeping Ionic 1 in mind but they should apply to Ionic 2 as well since conceptually both the frameworks are quite similar.

First thing is the non-availability of cordova when running the Ionic app on a web server. Since cordova plugins will not work on the web server, services and features dependent on the plugin should be replaced with web alternatives. Now we do not want to maintain a separate codebase for a mobile website so the best way to do this is to write wrappers for all such services and call the right methods based on the platform. For example – If you are using a cordova plugin for Google Analytics, you should replace that with the web based implementation and use it accordingly. You can create an analytics service and call the right methods based on if the cordova plugin exists or not. This way, no codebase changes will be needed.

Next thing to be taken care of, not mandatory but recommended, is combining all js, css and templates into single files and serve the minified versions. This may not make a difference when running as an app but as a website, it can have a huge performance impact since the files are to be downloaded from the web server every time. Even better would be to serve these static files along with any images and fonts from a CDN to give a performance boost and reduce the load on your web servers.

Other things which should be considered based on the app design and requirements are navigation and animations. Since it is possible to refresh a page when running on a browser, the app should be able to handle the state on a refresh. A good app design can prevent such issues so this is something to be kept in mind while developing the app itself. Animations have to be considered since they may not perform so well on all browsers, specially if you are using native animations using cordova which will not be available on web. My preference is to minimize the use of animations while running the app as a mobile website.

Once the above points are taken care of, deploying an Ionic app as a mobile website is pretty easy and a huge gain on productivity and cost.