Optimize PWA for desktop browsers?

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?


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;
      } else {
        this.isDesktop = false;

And then in the app.component.html it do this:

<div class="desktop" *ngIf="isDesktop">

<ion-app *ngIf="!isDesktop">

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?