Monday, December 19, 2011

jQuery Mobile Page Caching demo

In my previous post, I outlined how to prefetch links to make jQuery mobile app load your pages faster. The ui-loader spinning animation was not shown as you navigate from one page to another.

Launch
 - The previous example with prefetch


But, as also mentioned, it has certain limitations,
  • If there are more pages, more http requests are sent out and more bandwidth is required to prefetch
  • If a page hasn't been fully prefetched, the ui-loader spinner animation comes up till the page is fully loaded. Try to click fast and you will see
  • Once you visit a prefetched page, navigating away from the page will remove the page from DOM. So this is not same as caching the page. The next visit to the page will again need the page to be fetched.
So the obvious solution seems to be to cache the frequently visited pages in the DOM. This way, every link doesn't have to be prefetched on every visit to the page. This is easily done in jQuery Mobile by adding the attribute data-dom-cache="true" to the page div container of the page that you want to cache. 


You could also cache a specific page programmatically by using this call


    pageContainerElement.page({ domCache: true });

If you want to cache all pages visited, you could turn on DOM caching using the below code (but keep an eye on the DOM size as it could grow very fast)


    $.mobile.page.prototype.options.domCache = true;

You can now observe how caching works with the code inspector open (CTRL+SHIFT+I) in your browser. As you navigate, the visited page is not removed from the DOM and after the first visit, it remains put! You will remember in the previous post, the page div used to get added to the DOM and then removed on every page visit.

Let us visit the code...

Launch - Example with prefetch and DOM cache enabled


mainpage-domcache.html
<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

    <!-- Use only if you want to cache all visited pages -->
    <script>
      $.mobile.page.prototype.options.domCache = true;
    </script>
  </head>
  <body>
    <div id="page1" data-role="page">
      <div data-role="header">
        <h1>Header of Main Page</h1>
      </div>
      <div data-role="content">
        <p><a href="secondpage-domcache.html" data-role="button" data-prefetch>Go to Page 2</a></p>
      </div>
    </div>
  </body>
</html>

secondpage-domcache.html (to cache single page)
<title>Second Page</title>
<div id="page2" data-role="page" data-dom-cache="true">
  <div data-role="header">
    <h1>Header of Page 2</h1>
  </div>
  <div data-role="content">
    <p><a href="#" data-role="button" data-rel="back">Go Back</a></p>
  </div>
</div>

Here you will see that the spinning loader doesn't show up. The page is already there in the DOM after the first visit! You can click the links fast and see it still works fine. You can exclude the script to cache everything and try this code with multiple pages and see how caching works.

Just as in real life, there is a flip side to everything positive. Here, you have to be careful how big your DOM grows, as pages keep adding to it. You have to code for the clean up of older pages or pages you no longer need in cache. Mobile devices have limited memory and a bloating DOM could cause misery. So take care !

4 comments:

  1. This was a good suggestion that you put up here...dude…..hope that it benefits all the ones who land up here. 

    Edmonton Mobile App Development

    ReplyDelete
  2. I have used this kind but the google ads on second page doesn't show ..

    ReplyDelete
  3. You have to code for the clean up of older pages or pages you no longer need in cache. How can I do it?

    ReplyDelete
    Replies
    1. easiest way would probably be just to remove the page element (by id) from the DOM using http://api.jquery.com/remove/

      Delete