The best way to serve different pages for each platform?


#1

Objective

What I want to accomplish here is to find out the cleanest way to write some service code to check the current user’s device or platform and to serve a different view by following the condition. For example, in a mobile device, tabs in the bottom, on the other hand in a desktop browser should hide tabs and show split pane on the left side ONLY.

I’ve already read several threads related to this topic including the documentation about the platform, but still, I get stuck in the middle of the problem. :frowning:

Project structure

app.component.ts

export class MyApp {
  rootPage:string;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    firebase.initializeApp(environment.firebase);

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.rootPage = 'HomePage'; // Tabs reside in this page
        unsubscribe();
      } else {
        this.rootPage = 'LoginPage'; // When user is not authenticated
        unsubscribe();
      }
    });

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

home.ts

export class HomePage {
  firstTab: string = 'UserPage';
  secondTab: string = 'ChatPage';
  lastTab: string = 'SettingPage';

  constructor() { }

}

home.html

<ion-tabs>
    <ion-tab [root]="firstTab" tabTitle="Users" tabIcon="ios-people"></ion-tab>
    <ion-tab [root]="secondTab" tabTitle="Chats" tabIcon="ios-chatbubbles"></ion-tab>
    <ion-tab [root]="lastTab" tabTitle="Settings" tabIcon="ios-settings"></ion-tab>
</ion-tabs>

login.ts

export class LoginPage {
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private platform: Platform,
    private authService: AuthServiceProvider,
    private userService: UserServiceProvider) {

    // I don't think it's a good idea to place device validation here
    if (this.platform.is('core')) 
      console.log('Web');
    else
      console.log('Mobile');
  }

  async login() { ... }
}

user.ts

export class UserPage {
  private subscription: Subscription;
  private loggedInUser: any[];
  private users: any[];

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private userService: UserServiceProvider,
    private authService: AuthServiceProvider) { }

  getVerifiedUsers() { ... }

  getLoggedInUser() { ... }
}

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.9.0
npm   : 5.5.1
OS    : OS X El Capitan
Xcode : Xcode 8.0 Build version 8A218a