Using Ionic Framework to Develop Mobile Applications that Support Desktop Browsers

The Ionic Framework does a fine job of assisting developers with creating hybrid mobile apps, but what about desktop browser support? Obviously, many people want to build a website that will also have the same or similar capabilities as a mobile application.  

Unfortunately, it’s not as straight-forward as you might think, mainly because of Ionic’s limited browser support. To be fair, Ionic was never meant to do anything more than mobile apps, at least version 1. Version 2, which is still in beta, actually adds desktop browser support along with the ability to create Windows 10 Universal Apps and integration with Electron.

Until Ionic 2 is officially released, there are still some other options for deploying your website as a hybrid mobile application or vice/versa.

Setting up Ionic to support desktop browsers

Before diving into the options you have for deploying your Ionic application for use on desktop browsers, I’ll briefly cover how to setup Ionic for doing so.

Since Ionic isn’t intended for use on desktop browsers, so it will take a several modifications to get this working properly.

To begin, you will have to structure your Ionic application to build your files and dependencies into a separate folder for desktop browsers, in addition to building out the interfaces for the mobile applications. Ionic makes it relatively easy to structure your project in this way, since the default file structure will already have folders setup for Android and iOS files, respectively.

To set this up, you need to configure your project to dynamically load templates, route states, and compile the related template files to each individual folder.

Ionic uses Gulp to run your application locally and compile all your related project files. You will also need to setup your own custom Gulp task to run, build, and serve files specifically for desktop browsers. There’s a tutorial for setting that up here.

You will also need to create a variable which will determine if the user is using your application from a desktop browser, and inject it into your directives for use throughout the application. Ionic has its own way of detecting platforms, ionic.Platform. However, this method doesn’t have any capabilities for detecting desktop browsers. Creating your own detection is as simple as setting up a Regex or user agent detection, and binding that to a variable for use throughout your project.

Once you have your project configured properly, you should be all set to build your application for desktop browser support. One thing to be aware of is that some of the Ionic directives available will not work well with desktop browsers, so be sure to constantly test any usage of these with different browsers to make sure they don’t break anything.

Option 1 – Building your application with Ionic 2

Let’s get the obvious option out of the way – you can totally build a production application with Ionic 2. And now let’s address the next obvious issue, which is that it’s currently in beta. On top of that, Ionic 2 is built with Angular 2, which was actually just released recently and hasn’t had much time being used in large-scale production environments. In fact, I would put much more faith in building an app with Angular 2 than Ionic 2 at this point in time.

While some developers have built small sample applications with Ionic 2, I don’t know of anyone who’s put a large-scale application in production with the latest version. And I don’t think anyone (in their right mind) would go ahead and try to do such a thing. Not only are there a large amount of potential roadblocks to overcome, but Angular 2 has also been completely re-written and not very many developers have experience with it, adding an additional layer of complexity and learning curve to the scenario.

It’s also worth noting that Ionic 2 will also not support any of the Internet Explorer browsers, but it will support Edge. With Internet Explorer usage dwindling, once Ionic 2 is in a production release state it could definitely be a viable candidate for building a cross-platform application that also supports desktop browsers.

With that being said, let’s just say that this is probably not the option you’re looking for at this point in time. Let’s move on.

Option 2 – Port your existing website over to Ionic

Should you already have an existing website, and are not starting a new project, there are ways to bring it into an Ionic mobile app. Depending on how your existing site works, this could be a large undertaking.

If your existing website is built with angular and the majority of data presented in the user interface is a result of AJAX calls or JSON files, there would be considerably less work involved. While you could potentially just move all your project files into your Ionic project, you would not be taking advantage of Ionic for its mobile application capabilities. The best way to migrate your files with this method is to plan how to implement your controllers and services without too much modification for use in the new Ionic application. Most of the work should be around building out the new interfaces for Android and iOS, while making use of the Ionic methods and directives for the mobile applications to benefit from their performance optimizations.

If it is not built with angular and has a more traditional approach by using a language such as Java or .Net to compile your pages, then you will essentially have to re-build the much of the website by lifting the front-end out to be independent from the compiled back-end code. However, this could be a good opportunity to modernize your existing website, while also bundling in some other changes that may have been on your roadmap strategy.

Option 3 – Rebuild your application for Ionic

While this is certainly the most time intensive option, it would be the cleanest way of deploying your application, and would be the best performing method. If your application was originally not built with Angular, this could be one of your best options. Since you would already have a significant amount of work in rebuilding your application, you might as well take the opportunity to build it the right way.

Since your application will be architected specifically for use with Ionic, the template setup and routing will probably much more natural than doing a migration. This way you will have the opportunity to make full use of Ionic’s methods and directives for your mobile applications, and have more reusable components between your three different platforms (desktop browsers, Android, and iOS).

Option 4 – Building your application with Ionic and Electron

The final option is to use the Electron platform in tandem with Ionic to build your application. Electron is a platform for building hybrid applications, similar to how Ionic builds them with a WebView, but is intended for building desktop applications. There’s actually a good tutorial available for configuring your project to run both platforms together.

It’s worth noting that the tutorial I mentioned above covers initial setup, but was not used to build a production application, so there’s likely many more challenges ahead to proceed with development. Also, with adding another platform into the mix you open your project to more dependencies and more potential issues.

In my opinion, it’s probably easier to just structure your Ionic project to support desktop browsers without adding the Electron dependencies, especially since there’s not much documentation available for this kind of configuration.

Conclusion

Despite the fact that Ionic is not intended for being used for desktop applications, the methods available for making it support them are standard enough that it’s safe enough to recommend trying it out in a production environment. Additionally, there are already some applications in production that have used this method to support desktop browsers with Ionic. Alternatively, there are so many different mobile app development platforms available on the market which may also meet your requirements. While Ionic is certainly one of the best platforms for hybrid mobile app development, other platforms will already natively support desktop browsers without any additional configuration.

Until Ionic 2 is production ready, your best bet for supporting desktop browsers is likely configuring your Ionic project as mentioned in the beginning of this article.

If you found this article helpful, there’s some additional topics I’ve written that you might find useful, including a guide a planning your mobile application, and tips for developing mobile applications with Ionic.