Best way to handle views on pwa

[mossito]

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>

[rbarriuso]

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:

Different views for mobile vs tablet?

Say for example i have a list or a card list on mobile, is it possible to do something different for iPad / tablets ie: a grid layout etc? Or will the cards / lists just expand to the screen size? Im not sure how to cater for iPad / tablet using Ionic? Looks great on a phone, but if i download the app on a tablet how do you cater for this experience with Ionic and potentially showing a different view with all the different components? For example i noticed a users screenshot like below - is th…

Have different views for smartphone and tablet

We would like to build one mobile app shared by smartphone and tablet (and desktop if possible). Is there a way to include different views for different devices? I would not like to use ngIf for doing this because this has to many loaded and unused code. the perfect thing would be have my.component.ts my.smartphone.html my.table.html and so on. I know the team talked a long time ago about that and was interested to do this also for ionic1. How is the situation now for that? Also it would …

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

[mossito]

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.

[mburger81]

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!

[mburger81]

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

ManuCutillas/ngx-responsive

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!