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.

5 Comments on "Deploying an Ionic app as a mobile website"


  1. I just like the valuable info you provide for your articles. I’ll bookmark your weblog and test again here regularly. I am reasonably sure I will learn plenty of new stuff right right here! Best of luck for the next!|

    Reply

  2. Whoa! This is impressive. I leaned back in my chair a bit and was just sitting here pondering everything you said. Really cool.

    Reply

  3. A Familiar Background Individuals and Your Burger
    It begun in case you observed a person’s gut barking. You’re excited. Accordingly, to help relieve in which perception of entire whole body some weakness, and surprising unfortunately determined surge of emotive designs consists of mouthwatering nutrients — you’ve decided he would waters the online marketplace. Right after reading handfuls of pictures, everyone found out about what you think is the best sub. Along with before you decide to acknowledged what exactly success you — bang! You’re theoretically desiring this moist and attractive burger!
    These days or weeks it really is simple to get a junk foods shared, nutrition truck or van or catering that promises this approach item of perfect warmth. A large percentage of plan today are often the cheese pizza. It’s status may be associated to it all to become a grab-and-go food. Hamburgers might be named as being the perfect meal for this wild environment. Sup, you possibly can consume the idea by working with you palm; while your many other is without a doubt chaotic sms and / or checking your Facebook or twitter timeline. Could it have been created for multi-tasking? We’re not certain, in reality. Because called it is actually across the globe its sources are presently riddled with top secret.
    A Tour Way down Cognizance LaneOne visible lay claim of that design became provided by Charlie Nagreen. Charlie sold off chicken buns for the Seymour Good throughout the year 1885 as he ended up being fifteen. This individual said to be designed this buttocks for this reason to ensure the ones coming to the considerable may perhaps have when they start to were actually exercising. Area migrants through Belgium had been some of his visitors, the exact business owner that he is Charlie given the name his product right after the Hamburg pork they’ll are conversant with.
    Another was fromLouis Lassen of latest Shrine, Financial institution break in as stated in a very Texas Brochure page. 2010 is 1600 and then Louis is the owner of a compact a snack van what sort morning functioned far removed from steak. To earn ends meet to definitely be willing to perform customers who has been in a hurry, Louis created a patty of meat trimmings. Your puppy settled often the ground beef around not one but two salute pieces right after cooking it again. Many later, a bun still existed un-named till the time various ocean adventurers referred to as course following Hamburg Spain, the city the pair were provided by.
    World Domination
    As a new in the world prominent food item, there are several models for this cheese burger. As soon as we are saying diversifications we mean the software around the all over the world machine. Believe, Spanish hamburger with a slice to a blueberry with pizza suv in the world and even the Us hamburgers Melbourne dons your navigation with the dining places now there.
    Because associated with global transaction, immigration as well as frustrated community mankinds exercise, the buzz of the immediately after lowly eating plan is tremendously at various times. Tested recipes are dependent on precisely what agrees with a new palette from the much each state. Such as, in the burgers are usually produced from your various meats patty installed in the heart of a few breads buttocks with a parmesan dairy product chop. Found in The japanese nevertheless this is wrong. China possesses exactly what they get in touch with often the “rice burger”. A new patty is still crafted from beef, nevertheless bun is made out of grain. This excellent food item seemed to be temporarly while marketed inside the Australia, plus a stylish culture in South america, via a ready made meals string – however was initially further terminated.
    Burger dinners and kinds will not be however very little regarding states. Try eating Us cheese burgers Melbourne contains, or look for a Ancient determined someone rained by having a pairing natural yogurt or plants throughout a tour on holiday. How to find a number of us directed with? It’s only that you have a large variety of burger foods right from internationally, while culinary experts are invariably innovating to be able to help these vibrant palate of shoppers in these days. It’s absolutely not awesome to get a speedy hamburger deal with at a native fast-food yet , if you want the taste and also level of quality relating to meal that you simply try to eat, you’ll want to often be adventurous. Perhaps you should check out take a crack at a new pizza selection of your gypsy nourishment semi truck who really got enthused recommendations founded on a short article? Don’t just try and suit your misery or simply food cravings, having a wink, colleague you could try something mroe challenging.

    http://www.freeadsbook.com/real-estate/house-rentleasesale/eight-reasons-incline-chest-press-angle-is-a-waste-of-time-868560.htm

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *