Ionic 5, different files for PWA and native builds

Issue

I want to use the same code-base for my Website and native mobile apps. I am building the native apps using ionic cordova build <platform> and deploying the website with ionic serve --external --prod inside a docker. I need toh convert the bottom-tab navigation bar on my app to a sidebar on my website. This will require change in routing and HTML files. But all the other files which we are displaying remain the same. So, How do i deploy different files for my website and different ones for my native app on every version?

Solution

Ionic Platform service

• You could use the Ionic Platform service to determine the platform of the user's current device, then based on different platforms, display your desired template using *ngIf directive

TS file

import { Platform } from '@ionic/angular';
@Component({...})
export class MyPage {
  is_native: boolean;
  is_pwa: boolean;
  constructor(public platform: Platform) {
     this.is_native = this.platform.is('hybrid');
     this.is_pwa = this.platform.is('pwa');
  }
}

HTML template

    <div #sideMenu *ngIf="is_pwa">...
    </div>
    <div #navBar *ngIf="is_native">...
    </div>

Updated: Shell script

Another way is to replace your template files with different ones using shell scripts.

cp src/app/componenets/template.pwa.html src/app/componenets/template.html

ionic serve --external --prod

Answered By - Ericloiewl