Web apps for desktop with Ionic? Is it possible?


#1

Is it possible or recomendable to develop web applications for desktops with Ionic 2? If not, why not?

There’s some counter-indication?

How could I make it responsible like Bootstrap? Is it possible or recommendable to develop web applications for desktops with Ionic 2?

How could I make it responsible like Bootstrap? Bootstrap has a responsive grid where it’s possible to set the number of columns accoding the kind of device. If the app is running at a smartphone an element can be set to have 12 columns while a desktop can have 2 columns. Is it possible with bootstrap?

And how about PWA in desktop? Can I create PWAs like this?


#2

you will have no problem publishing a ionic2 app in desktop browser…but i dont think those native function in mobile phone will work like camera and gyroscope…ionic support responsive by using flexbox


#3

Thanks for reply!

I understand that some funcionalities will not work in desktops even via PWA. But will features available in browsers for desktops lile push, notifications work?


#4

I see at least a couple of challenges with desktop support though…

  • ie11… there are some issues with IE11 support using Ionic 2 components, like styling issues.

  • Ion controls not optimized for desktop… some controls like the Virtual Scroll don’t work yet with mouse scroll in desktop… And there is no styling for things like hover for desktop (usually you would show a focus color on hover)

  • multiple views for components… Ideally, you would be able to create a separate View (Template) for the desktop version of a Component. But Angular 2 does not support dynamic TemplateUrl assignment to a Component. So it seems like we are stuck with an *ngIf to show different views, but that’s not the cleanest.

Anyway, I think the first 2 issues listed above can be worked around by the *ngIf to show different views. But it could be cleaner if Ionic were more focused on desktop and mouse.

Curious what other folks are doing to address these challenges?


#5

Chrome … works fine
FF … some styling issues
IE … styling issues and https://github.com/driftyco/ionic-app-scripts/issues/203
Only tested on latest versions. Haven’t tried EDGE yet.

Also, general side menu problem:

But it is usable and generally works for me.


#6

I really wish the Ionic team would have something in their documentation about all of these things related to PWA, tablet and browser based apps. Does anyone know where to get more information?


#7

I’m really interested in some guidance on best practice here. If I want to create an app that runs in a desktop browser (perhaps with a CSS framework such as Bootstrap or Semantic UI) and also mobile devices (and also with PWA functionality), what’s the best approach? What’s the best way of architecting such an app so that the UI is optimised for desktop and mobile and with as much code sharing as possible. Anyone have any suggestions?


#8

You may be looking for a solution with electron:
Github-Issue
codecampus-tutorial - ionic2 + electron


#9

I’m not looking for a desktop app solution like Electron provides (not yey anyway). More looking for guidance on the best way of building an app that runs in a desktop browser but (with the same codebase) also provides a PWA and a native (hybrid) app.


#10

Hi Richard,
Have you found a solution for your request or some sort of information/guidance?
Thanks


#11

A good source/starting point might be https://medium.com/@benorama/hybrid-mobile-apps-sharing-logic-between-angular2-and-ionic2-apps-7c32145b90d5