Ionic Deep linker view does not update on browser back button event

Question

I have a PWA built with ionic deep linker. I have done a demo here https://stackblitz.com/edit/ionic-mee2ut?file=app%2Fcustomer%2Fcustomer.component.html where the browser back button doesn't work as expected.

Steps to reproduce
 1.In Dashboard page click on edit button.It will navigate to customer 
 page(see URL.It is changed to /Customer/CustomerId).
 2.In Customer page, you will see the customer info and other customers 
 list, there click edit from other customers list.This will open another 
 page.(see URL.It is changed to /Customer/CustomerId).
 3.Click on browser back button u can see that the URL is changed but the 
 view is not updated.

If I repeat steps 1 & 2 then click on nav back button instead of browser button then it works correctly.Both the URL and the view gets updated.

Is there something I am doing wrong because the browser back button does not work as expected or this is issue of ionic framework.

This is how i navigate between views

  EditCustomer(Customer: any) {
   this.navCtrl.push('Customer', { Id: Customer.Id, Name: Customer.Name });
  }

Can somebody please tell me a way how to resolve this issue?

Answer 1

I saw your code in the above url, you are passing id as param but not the name so, that is the reason url is changing but data is not reflected i modified your code in app.module.ts file please replace this code in your app.module.ts file

IonicModule.forRoot(MyApp, {}, {
      links: [
        { component: DashboardComponent, name: 'Dashboard', segment: 'Dashboard' },
        { component: CustomerComponent, name: 'Customer', segment: 'Customer/:Id/:Name' }
      ]
    })

Answer 2

Please replace your app.module.ts with the following code

import { Component } from '@angular/core';
import { Platform, IonicApp, App } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'Dashboard';

  constructor(private _app: App, platform: Platform, private _ionicApp: IonicApp,) {
    platform.ready().then(() => {
      this.setupBackButtonBehavior();
    });
  }

    private setupBackButtonBehavior () {

    // If on web version (browser)
    if (window.location.protocol !== "file:") {

      // Register browser back button action(s)
      window.onpopstate = (evt) => {
        //Navigate back
        if (this._app.getRootNav().canGoBack()) 
        this._app.getRootNav().pop();
      };
    }
  }
}

Answer 3

I was able to use something like this:

let randomID = this.makeId(5); // random string id
this.navCtrl.push('path', {
     eventID: eventID,
     instituteID: instituteID,
     randomID: randomID
}, {
     id: `path/${eventID}/${instituteID}/${randomID}`
});

This "id" seems to fix it, but if you can go to the same page, then it requires a "random" value to separate each visit to that page.

@IonicPage({
    name: 'path',
    segment: 'path/:instituteID/:eventID/:randomID'
})

It looks like, by default, it uses the name of the page as an id for that view. If multiple views have same id => issue when using browser back/forward. That's where the random comes in, to separate multiple instances of the same page.