Best way to handle views on pwa


#1

HI!
I am currently developing a pwa that runs as website for browsers and as app for mobiles. The challenge is that the browser design has elements that differ form the mobile apps, like different header and more funcionalities. I want to use the same code on both.

For now i’m checking the running platform and using different templates. But i think there must be a better way.

Can anyone give me some advice about the best way to implment this?

 <div *ngIf="isDesktop;then desktopcontent else mobilecontent">
</div>

<ng-template #desktopcontent>
<!-- ion-content -->
</ng-template>
<ng-template #mobilecontent>
<!-- ion-content -->
</ng-template>

#2

Which version of Ionic are you using? Ionic 3, right?

In my opinion if the templates for desktop vs mobile only have a few specific differences, you can use ngIf, ngHide and/or ngSwitch to show/hide the differentiating components.

In any case I’d expect that Ionic, as a PWA framework, provides an easy (automatic) way to handle this kind of situation.

There are some old posts related to this topic, like:


Perhaps @mburger81 or @pbul2004 or @thesourav have something to say.


#3

I Still haven’t found a good solution for this.
I’m already using responsive design when possible, (for example in grid elements to resize the number of columns) and also I am using ngIf when the changes don’t differ a lot. I still feeling forced to use ngTemplates when the views are different.
I hope there is a better solution for this. It would be nice to be able to define different selectors and views for different cases.


#4

Mainly we are using showWhen and hideWhen, this are using only platform strings, so you can check if you are on mobile or on browser devices,

I think I saw also another solution in past, which now I’m not able to find!

A solution where you can check if screen size is “large, medium, small” and so on. But I’m not able to find it for now!


#5

I was wrong, there are no other directives then showWhen and hideWhen, but googling i found this library

which seems to work great.

We use for example something like that

<ion-row *showItBootstrap="['xs', 'sm']">
.....
</ion-row>
<ion-row *showItBootstrap="['md', 'lg', 'xl']">
.....
</ion-row>

With this lib you can add several checks for different screen sizes or devices or browser or many others.

Another big advantage I figured out, showWhen and hideWhen only add display: none to element, but in fact the component is still there. I think this lib is more then an *ngIf, so it is not rendered and so not in the DOM present!
This could be a very big advantage.

It would be very very nice to see something like that in ionic in feature!