I have a app which has tow pages. The over view and the detail. When the app opens the overview page opens. During this time I create a inner HTML (using data from web service) and push to my parent div in overview page. This works fine but takes some time (let says 4 sec). This is fine because it is the initial boot up of app and is acceptable. The INNER HTML generated is stored in global scope also.
If user needs to go to a detail, he clicks an item in overview and he is taken to detail page. This also works fine. If he wants to come back to overview page, he clicks the back button.
The problem starts here. When the user clicks the back button and I navigate back to overview page, I have to again insert the inner HTML (because the page doesnot cache it from last time) and so user sees a delay of 4 secs everytime he navigates from detail to overview page.
Is there anyway to cache this generated HTML in overview page, my data does not change frequently, so I only query the service on app start time and there us no talk to service after that.
The delay is too much and not acceptable on low end device such as "Surface RT". Any ideas?
I think you can get the data at launch. And then store that in Indexed Database. You can get the data from IndexedDB in the page.
Storing data is not an issue, I am anyways storing the created inner HTML in global scope (so I do not create that every time the navigation takes me to the page).
What the issue is in my opinion is that every time the navigation takes me to this page where the inner HTML is empty and I have to insert that again. The issue is that after insertion it takes a while to paint the screen.
What I was looking at was that once initialized the overview page can be cached (with inner HTML) so that the process of inserting and painting doesnot happen again and again.
Could you share a simple project to demonstrate that? And then upload that to skydrive.
So I can reproduce on my side.