Skip to main content

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 !
Labels:

Comments

  1. esoftwallMarch 25, 2013 at 11:24 PM

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

    ReplyDelete
  2. BaixaEbookJanuary 7, 2014 at 4:48 AM

    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. chetankjainJanuary 7, 2014 at 10:58 AM

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

      Delete

Post a Comment

Popular posts from this blog

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi...
19 comments
Read more

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesh...
9 comments
Read more

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t...
16 comments
Read more