Hello guys,
I started my app with Ionic 3 believing it would really be easy to change it for desktop - a bunch of media queries and I’m good. Well, that’s what I thought…
I learned a lot about Ionic desktop these last days, and took a certain path to achieve making my app relevant in the browser. I wanted to get advices - am I complicating things too much ? Am I missing something ?
So :
- Moving my full page’s components from AppModule to their own modules, so they have a custom url, and use IonicPage. This will be usefull for deeplinking as well so it’s a no brainer.
- Adding
ion-split-panearound my menu and content holder to get the menu as a sidebar on desktop. - Adding
<ion-grid fixed>to every main page so it takes a fixed width. - When not in app (detected using
Platform), changing default page fromTabsPagetoHomePageso tabs won’t display on bottom (which is ugly on desktop), and add links to the side menu. This is especially necessary for desktop because tabs implements their own navigation stack for each tab, which doesn’t make any sense on desktop - at least in my usecase.
That’s what I did yet. It starts to look a little better, but still - has a ton of things that doesn’t feel like desktop. The navigation buttons in navbar has to be hidden, for sure - maybe based on media queries ? Also, page transition is so mobile-like, I guess I need to change this as well based on platform.
All of these steps looks very much of a hassle to me, and I really wonder - did I miss something obvious in my researches ? Since Ionic sells itself as an amazingly easy way to make cross platform happen, and includes PWA’s heavily in the mix, I keep asking myself how is that possible ?
So, any advices are very welcome !
Thanks ahead.
Although it doesn’t fit my usecase regarding tabs, I don’t want 3 separated navstacks on desktop - it’s not really the web usage. Still, a nice article.