Entered pages not cached? ionViewDidEnter called multiple times

Ionic Framework ionic-v3
1

I’m adding Google Analytics page timing and I want to log timing for initial construction of a page and subsequent entries into that page. So I have a mixin Component that my other Components extend:

import { Component } from '@angular/core';


const CATEGORY = 'Page Timing';
const LOAD = 'Load';  // When page is constructed only called once
const ENTER = 'Enter';  // When page is about to enter

@Component({
  selector: 'page-google-analytics',
  templateUrl: 'google-analytics.html'
})
export class GoogleAnalyticsPage {

  protected name: string = '';
  protected willEnterStart: number = 0;
  protected didLoadStart: number = 0;

  ionViewDidLoad() {
    this.didLoadStart = new Date().getTime();
  }

  ionViewWillEnter() {
    this.willEnterStart = new Date().getTime();
    // avoiding DI of GoogleAnalytics in all derived classes...
    if (window['ga']) {
        window['ga'].trackView(this.name);
    }
  }

  ionViewDidEnter() {
    if (window['ga']) {
      let now = new Date();
      if (this.didLoadStart) {
        console.log(this.name, LOAD, now.getTime() - this.didLoadStart);
        window['ga'].trackTiming(CATEGORY, now.getTime() - this.didLoadStart, this.name, LOAD);
      }
      console.log(this.name, ENTER, now.getTime() - this.willEnterStart);
      window['ga'].trackTiming(CATEGORY, now.getTime() - this.willEnterStart, this.name, ENTER);
      this.didLoadStart = 0;
      this.willEnterStart = 0;
    }
  }

On Tabs the first time I visit each Tab I see a ‘Load’ followed by an ‘Enter’ logged and subsequent visits to that page I only see ‘Enter’ logged. Which is what I expect.

But all other pages I visit I always see both ‘Load’ and ‘Enter’ logged every time I visit the same page (even with the same NavParams). I expected all pages to be cached once they are Entered(?)

Am I misunderstanding the lifecycle events?

1 Like
2

Documentation matches what you are expecting:

NavController - Ionic API Documentation - Ionic Framework

Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.

ionViewDidLoad: Fired only when a view is stored in memory. This event is NOT fired on entering a view that is already cached. It’s a nice place for init related tasks.

3

I’ve created a plunkr that reproduces it: http://plnkr.co/lIdPVA

1 Like
4

Maybe create an issue here: https://github.com/ionic-team/ionic/issues (Crosslink this topic to the issue and other direction)

5

I created this issue: https://github.com/ionic-team/ionic/issues/12111

1 Like