Ionic v4 PWA: Dealing with root page and physical back button

Ionic Framework
1

Hi there, Ionicists!

I’m developing a PWA using the v4 (with ng 6.x) with a team. We’re currently close to the end of development for the first phase, but there is a bottleneck we are facing.

Imagine that our current flow of screens is the following: (Yes, there is some kind of exaggeration on the login stuff, but we were required by our customer to follow a pattern they already have on a working software, specially due to our target users)

  • pre-login: The user is prompted to continue authentication or as a guest, which has limited features. It’s the root page when they open the app.
  • login: If the user decides to log in, they input user/password and reset it thru this screen.
  • home: A home screen, with our customer logo and directions to our features, version etc. Just dummy static content. Should be our new root page after log in as authenticated/guest
  • [feature screen]: screens with features required by our customer, such as graphs, data and such.

Our issue is: I was supposed to set the root page before login to our pre-login page, and after the user is authenticated, on home page, so that when they hit the back button, it goes to the root page.

If user goes: HomePage > FirstPage > SecondPage and hit back, they return to home instead of FirstPage or the level of screens he has navigated through - and if they hit again at HomePage, it should close the PWA.

I tried almost everything I saw on forums and internet. Using navigateRoot, changing the Router.navigateByUrl() calls, and such but i can’t get this behavior to work.

Also, platform.backButton.subscribe() doesn’t get triggered on the PWA.

Any tips on how to deal with it? I’m also attaching our app-routing-module.ts for reference.

import { AuthService } from '@services';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PreLoginComponent, OidcComponent, RedirectSilentRenewComponent } from '@components';

const routes: Routes = [
    {
        path: '',
        loadChildren: './pages/pre-login/pre-login.module#PreLoginPageModule',
    },
    {
        path: 'home',
        loadChildren: './pages/home/home.module#HomePageModule',
    },
    {
        path: 'lista-atracacao',
        loadChildren: './pages/lista-atracacao/lista-atracacao.module#ListaAtracacaoPageModule',
    },
    {
        path: 'login',
        loadChildren: './pages/login/login.module#LoginPageModule',
    },
    {
        path: 'yard-kpi',
        loadChildren: './pages/yard-kpi/yard-kpi.module#YardKpiPageModule',
        canActivate: [AuthService],
    },
    {
        path: 'gestao-a-vista',
        loadChildren: './pages/gestao-a-vista/gestao-a-vista.module#GestaoAVistaPageModule',
        canActivate: [AuthService],
    },
    {
        path: 'retencao',
        loadChildren: './pages/retencao/retencao.module#RetencaoPageModule',
        canActivate: [AuthService],
    },
    {
        path: 'tracking-carga',
        loadChildren: './pages/tracking-carga/tracking-carga.module#TrackingCargaPageModule',
        canActivate: [AuthService],
    },
];
routes.push({
    path: '**',
    redirectTo: 'home',
});

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: false })],
    exports: [RouterModule],
})
export class AppRoutingModule {}