Cordova angular app on hardware back button press, open last opened view

Question

Initially, I am in view "A" and then i loaded a few things from api. Now when on button click, I move to View "B" and then when back button click (hardware/nav bar back button), I moved back to View A, but view A's content was already destroyed and only simple view got loaded.

window.history.back();

So, I came with a way, i.e. on every view load, I added it in my localstorage state array. and when back pressed, I routed back to previous state.

this.router.navigate([previousState]);

But this works only when my nav bar button click. On hardward button click, i get navigated back but my state is not fetched again.

My code is:

@Injectable()
export class AppStateService {
private menuOpen: boolean = false;
private headerTitle: string = "";
private offlineState: boolean = false;


public constructor(private router: Router) {
    document.addEventListener("backbutton", () => {
        this.back(true);
    }, false);
}

public back(hardwareClick?: boolean): void {

    var routes: string[] = [
        'Login',
        'Main'
    ];
    for (var i of routes) {
        var route = this.router.generate([i]);
        if (this.router.isRouteActive(route)) {
            this.exitApp();
            return;
        }
    }

    var  previousState = CordovaService.getPreviousState();
    this.router.navigate([previousState]);

}

Visual example:

though from B to A works fine when nav bar back button click What might be the problem?

Answer 1

You are trying to solve a problem that was created by yourself alone. You should not create multiple pages on the same Cordova app to begin with.

This is the first of the Best Practices Cordova app development principles:

1) SPA Is Your Friend

First and foremost - your Cordova applications should adopt the SPA (Single Page Application) design. Loosely defined, a SPA is a client-side application that is run from one request of a web page. The user loads an initial set of resources (HTML, CSS, and JavaScript) and further updates (showing a new view, loading data) is done via AJAX. SPAs are commonly used for more complex client-side applications. GMail is a great example of this. After you load GMail, mail views, editing, and organization are all done by updating the DOM instead of actually leaving the current page to load a completely new one.

Yes, you might need to write more code, but you may still use multiple JS files to create your views in the single page. The multiple pages approach also features performance penalties:

Even if you choose not to use Cordova, creating a mobile application without using a single page architecture will have serious performance implications. This is because navigating between pages will require scripts, assets, etc., to be reloaded. Even if these assets are cached, there will still be performance issues.