Nerd For Tech
Published in

Nerd For Tech

Using the Ionic Framework to Develop Mobile Applications Supporting Desktop Browsers

The Ionic Framework does a great job of helping developers build hybrid mobile apps, but what about desktop browser support? Many people want to create a website with the same capabilities or similar functionality as a mobile app.

Unfortunately, it’s not as easy as you might think, mainly due to the limitations of Ionic browser support. Ionic was never designed to do anything other than mobile apps, at least version 1. Version 2, which is still in beta, actually adds support for the desktop browser and creates Windows 10 Universal Apps and integration with Électron.

Until the official release of Ionic 2, there are still other options to deploy your website as a hybrid mobile app or vice versa.

Configuring Ionic to support desktop browsers

Before delving into the options you have for deploying your Ionic app for use on desktop browsers, I’ll briefly explain how to configure Ionic to do so.

Since Ionic is not intended for use on desktop browsers, it will take several tweaks to work correctly.

To get started, you will need to structure your Ionic application to build your files and dependencies in a separate folder for desktop browsers, in addition to building the interfaces for mobile applications. Ionic makes it easier to structure your project this way, as the default file structure will already have the folder configuration for Android and iOS files, respectively.

To configure this, you must configure your project to dynamically load models, route reports, and compile associated model files in each folder.

Ionic uses Gulp to run your application locally and compile all associated project files. You will also need to configure your custom Gulp task to run, create, and serve files specifically for desktop browsers. There is a tutorial to configure this here.

You will also need to create a variable that will determine if the user is using your app from a desktop browser and inject it into your directives for use in the app. Ionic has its way of detecting platforms. However, this method cannot detect desktop browsers. Creating your detection is as easy as setting up a Regex or user agent detection and binding it to a variable for use throughout your project.

Once your project is appropriately configured, you should be ready to build your app for desktop browser support. One thing to be aware of is that some of the ionic guidelines available won’t work well with desktop browsers, so be sure to constantly test their use with different browsers to make sure they don’t break anything.

Option 1 — Build your application with Ionic 2

Let’s remove the obvious option — you can build a production app with Ionic 2. And now, let’s tackle the next obvious problem, which is that it’s currently in beta. On top of that, Ionic 2 is built with Angular 2, which was just released recently and hasn’t had much time to use in large-scale production environments. So I would put a lot more confidence in building an app with Angular 2 than Ionic 2 at this point.

While some developers have created small sample apps with Ionic 2, I don’t know anyone who has put a large-scale app into production with the latest version. And I don’t think anybody (in a good way) would go ahead and try to do such a thing. Not only is there a large number of potential hurdles to overcome, but Angular 2 has also been completely rewritten, and few developers have experienced it, adding an extra layer of complexity and learning curve to the storyline.

It should also be noted that Ionic 2 will not support any of the Internet Explorer browsers as well, but it will support Edge. With Internet Explorer usage declining, once Ionic 2 is in a production release state, it could be a viable candidate for building a cross-platform application that supports desktop browsers.

Option 2 — Port your existing website to Ionic

If you already have an existing website and aren’t starting a new project, there are ways to integrate it into an Ionic mobile app. Depending on how your existing site works, this could be a big undertaking.

If your existing website is built with Angular and most of the data presented in the user interface is the result of AJAX calls or JSON files, there would be considerably less work involved. While you can potentially move all of your project files into your Ionic project, you won’t take advantage of Ionic for its mobile app capabilities. The best way to migrate your files with this method is to plan how to implement your controllers and services without too many modifications for use in the new Ionic application. Most of the work should focus on building new interfaces for Android and iOS,

Suppose it’s not built with Angular and has a more traditional approach using a language like Java or .Net to compile your pages. In that case, you will have to rebuild most of the website by lifting the front end to be an independently compiled back-end code. However, this could be an excellent opportunity to modernize your existing website while incorporating other changes that may have been on your roadmap strategy.

Option 3 — Rebuild your application for Ionic

While this is undoubtedly the most extended option, it would be the cleanest way to deploy your app, and it would be the best-performing method. If your app wasn’t built initially with Angular, this might be one of your best options. Since you would already have a significant amount of work rebuilding your application, you might as well take the opportunity to build it the right way.

Since your application will be specifically designed for use with Ionic, setting up and routing the model will likely be much more natural than performing a migration. In this way, you will have the possibility to fully use Ionic’s methods and guidelines for your mobile applications and have more reusable components between your three different platforms (desktop browsers, Android, and iOS).

Option 4 — Create your application with Ionic and Electron

The last option is to use the Electron platform in tandem with Ionic to build your app. Electron is a platform for building hybrid apps, similar to how Ionic builds them with a WebView, but is intended for building desktop apps. Again, there is a good tutorial available for setting up your project to run both platforms together.

It should be noted that the tutorial I mentioned above covers the initial setup but was not used to build a production app, so there are probably a lot more challenges to continue with development. Plus, adding another platform to the mix opens up your project to more dependencies and more potential problems.

In my opinion, it’s probably easier to structure your Ionic project to support desktop browsers without adding Electron dependencies, especially since there isn’t a lot of documentation available for this type of setup.

Conclusion

Even though Ionic is not intended to be used for desktop applications, the methods available to support them are standard enough to be safe enough to recommend trying them in a production environment. Additionally, some production applications have already used this method to support desktop browsers with Ionic. Alternatively, there are many mobile application development platforms available in the market that can meet your needs. While Ionic is undoubtedly one of the best platforms for hybrid mobile app development, other platforms will already natively support desktop browsers without additional configuration.

Until Ionic 2 is production-ready, your best bet for supporting desktop browsers is probably to configure your Ionic project, as mentioned at the start of this article.

If you found this article helpful, I wrote a few additional topics that you might find beneficial, including a guide for planning your mobile app and tips for developing mobile apps with Ionic.

Let Aptude experts implement your mobile solution.

As an expert in mobile application development, Weboccult has the knowledge and expertise to ensure your mobile application is designed according to your needs. From custom enterprise mobile apps to user-centric mobile apps, if you’re looking for mobile solutions, we’ve got the answer. You can read more about our mobile development services here.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Selectors in CSS once and for all!

Cloudways Review: WordPress Cloud Hosting for Non-Techies

Android App With Xamarin on Mac

vs_xamarin

How to test an iOS app on 2G / 3G, LTE, Edge, etc on High-Speed Internet /Poor Internet /Internet…

KYVE TESTNET TUTORIALS GUIDE

How to replenish you S-wallet account using bank card.

Mastering iptables, ip (iproute2)

How to Train a Scalable Classifier with FastAPI and SerpApi ?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bhumin Vadalia

Bhumin Vadalia

Bhumin is a tech enthusiast. As an occasional blogger, He loves to share knowledge regarding technological advancements in the domains of web & mobile app.

More from Medium

Hexagonal Architecture for People in a Hurry

Using Proxyquire with Nested Dependencies

Migrate brew formulas from Intel to ARM on M1

How to Get Employees from the Workday API with Python

Text that reads “Python Integration Tutorial / How to Get Employees from the Workday API”