How to manage user Onboarding Screen in ionic app

Question

How to Check when press the app icon that user is newly user for that app. and if that user is newly show onboard screen for this this user.

Answer 1

At the initialization of the app you can do a check if the user has finished the onboarding. You can do the check by using the local storage / Ionic storage. I would suggest to do the check in app.component.ts.

Example:

app.component.ts

export class AppComponent {

  constructor(
    ...
    private router: Router,
    private storageService: StorageService,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.splashScreen.hide();
      
      // Method to send user to onboarding pages
      this.pushToAppOnboarding();
    });
  }


  async pushToAppOnboarding() {
   await this.storageService.getItem('onboarding').then((key) => {
      // StorageService only takes strings. Thus, compare if the string equals 'true'.
      if (key.value !== 'true') { 
        this.router.navigate(['/onboarding']);
      }
    });
  }
}

onboarding.page.html

<ion-content>
  <!-- place your onboarding content here. Use e.g. ion-slider -->
  <ion-button (click)="finishAppOnboarding()">Lets Start</ion-button>
</ion-content>

onboarding.page.ts

  constructor(
    private router: Router,
    private storageService: StorageService,
  ) { } 

  finishAppOnboarding() {
    this.storageService.setItem('onboarding', 'true');
    this.router.navigate(['/route-to-your-homepage']);
  }