Javascript generated content not cached Ratchet v2.0.2

Question

I am using the movies demo app app included with Ratchet as a template for my app.

The first thing I did was to change the static html movies on index page to jQuery ajax fetched movies. But the problem I ran into is that when I go back to the index page, it's empty because the javascript fetched and generated content wasn't cached.

This same issue appears here: https://groups.google.com/forum/#!topic/goratchet/3nlzW_A8Tys

The solution is to addEventListener("push") and cache the page, but I'm not clear on how to accomplish this.

• do I have to use Push to fetch content, and if so how?
• how do you cache the page?

Answer 1

Push.js caches the context before you navigate away from the page, and caches it in the associative array domCache keyed by the timestamp for the navigation event. To go back to the cached page by firing a popstate event with the timestamp.

var e = new CustomEvent('popstate')
e.state = <cached-timetamp-key>
window.dispatchEvent(e)

The cached item key is the last item in the cached back stack cacheMapping.cachedBackStack

So, if you add a method to push.js (in your ratchet.js file) to return the next item in the backstack

var getPreviousId = function () {
    var backStack = JSON.parse(cacheMapping.cacheBackStack);
    return backStack.length > 0 ? backStack[backStack.length -1] : null;
}

and where save the previous id where the current id is saved e.g. find

PUSH.id = data.id;

and add the line to expose the previous id

PUSH.id = data.id;
PUSH.previousId = getPreviousId(); //save previous id

Then you can go back to the cached page with the following

var e = new CustomEvent('popstate');
e.state = PUSH.previousId;
window.dispatchEvent(e);

If you want ratchet to handle the automatically, you will have to go into the touchend() method or PUSH() itself call popstate() when its appropriate.