Ionic page cache problem

Ionic Framework ionic-v3
1

hi, i use ionic side menu. Page is reloaded when I click on a page from the menu. How can i cache open page and push page?

2

Hello, try using service-worker.js

3

thank you for reply. Unfortunately I could not. I do not want a loaded page to load later

4

You shouldn’t be caring about any of this. It’s the framework’s job.

5

Ionic 3 does not seem to have this feature

6

I am struggling with something similar. I am new and recently started working on Ionic V3 and Angular 4. My problem; I have page (component having 40 D3 charts in slider component. EACH time one navigates (Push) from home page to this chart page, it take around 6 seconds. The entire page is redrawn; from constructor to ionViewDidLoad to all D3 function, etc getting executed. (each time).

The expectation is, the page (can) take longer time to load when viewed for the first time and then it should take much shorter time on any subsequent views thereafter.

I, did the same, using Tabs and its behavior is close to the expectation. First time it takes 6 secs and later 3 secs. The page is not redrawn (constructor and D3 functions don’t get called). But even these 3 secs is a problem and my best guess is, this is the time required for re-rendering SVGs. Can anyone confirm this?

Although the timings are better while testing in browser, the delay is noticeable here too.

Additionally, I have these questions.

Am I missing something?
Is there a way to force cache a page? (in V2 there was a story of 10 pages getting cached)
Is there a way to pre-initialise pages, without viewing them (or navigating to them)?
If Tabs can manage, why cant Push?

7

Pages? Not that I can think of. However, you may be able to look into drawing your charts into <canvas> elements and then you could rip them to a static image.

Because with tabs, all the currently unselected tabs are still lurking in the DOM, and switching from one to another doesn’t change the underlying document. When you push, you are completely swapping out the whole document.

8

Quick follow-up on the tabs: Since tabs are still lurking in the DOM, would you know if there’s a way to keep its images rendered in the background when opening another tab? I have a tab with a lot of small images and every time that tab’s view is being reentered they reload. That takes about a second which looks very flashy and bad. Am I missing something or is this by design?

EDIT:

Never mind. I just realized that the page with the above described issue isn’ actually using ion-tabs but ion-segment which utilizes ngSwitch, hence removes the img elements from the DOM…

9

Hi,
I know this is a bit old but I faced the same issue today and I managed to cache segments views by not using ngSwitch but directly the [hidden] attributes with the segment condition this way :

<ion-segment [(ngModel)]="segmentName">
  <ion-segment-button value="profile">
    Profile
  </ion-segment-button>
  <ion-segment-button value="friends">
    Friends
  </ion-segment-button>
</ion-segment>
<page-profile [hidden]="segmentName != 'profile'" ></page-profile>
<page-friends [hidden]="segmentName != 'friends'" ></page-friends>

Just replace ngSwitchCase by the [hidden] conditional

1 Like