So I have created my fist pwa with Ionic. Now I would like to add support for the desktop browsers.
For example I’m using a tabbar in my pwa. I wan’t to exchange it with a Navbar (probably from bootstrap). I probably need a completely different page layout for desktop.
Is the best way to just build another Angular app and share my services and components I wan’t to reuse?
I think that would be the best way, because I don’t want to optimize my (mobile) pages to suit desktop browsers and rather build new components and reuse some compomnents and services.
However this way I would need two different urls (Im using Firebase hosting). How could I redirect a user to the right url based on his device?
how would you achieve it and how would you project structure look like?
EDIT:
I just played around a little bit and found a solution that seems to work quite nicely:
In app.component.ts I do this:
if (this.platform.is('desktop')) {
this.isDesktop = true;
this.router.navigate(['/d']);
} else {
this.isDesktop = false;
this.router.navigate(['/']);
}
And then in the app.component.html it do this:
<div class="desktop" *ngIf="isDesktop">
<h1>Desktop</h1>
<router-outlet></router-outlet>
</div>
<ion-app *ngIf="!isDesktop">
<ion-router-outlet></ion-router-outlet>
</ion-app>
And finally in my app-routing.module.ts my routes look like this:
const routes: Routes = [
{ path: 'd', component: WorkoutComponent},
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
So depending on If I’m on desktop or other I will go into different sections of my app.
What do you think of this solution? Is there anything I missing here that will make it a poor decision?