This is my third post of jQuery Mobile Series and In first two Post, I had explained about Writing your first jQuery Mobile app - Part 1 and Create Multiple jQuery Mobile Pages and Link them - Part 2. And in this post, you will see how to prefetch and cache pages in case of single page template application. To know more about Single Page Template and Multi-Page Template, read Part 2.
Just to recollect you about Single Page Template that there should be individual HTML file for each page and in Multi Page Template, all the pages are combined into single HTML file. As mentioned in Part 2 article, that with Multi Page Template approach all the pages are loaded in one go so your mobile application works faster and consume less bandwidth.
With Single Page Template application, every page is fetched during navigation and you will see a loading spinner animation. But using the prefetch feature, a single-page template application can be made to behave like the multi-page template application.
Related Post:
When using single-page templates, we can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:
<a href="prefetchThisPage.html" data-prefetch>Page 2</a>
We can define this attribute for as many as we would like to prefetch. You can also load the page
programmatically using
$.mobile.loadPage() method.
$("#page1").bind("pageshow", function(event, data) {
$.mobile.loadPage( "prefetchThisPage.html", { showLoadMsg: false } );
});How it works?
Prefetching of pages occurs in background and they creates additional HTTP requests and use bandwidth to load the pages. So when you visit the prefecthed page, you won't see the loader/spinner icon as page is already loaded.
But what if you make a request for the prefetched page but prefetch is not complete? In such case, you will see loader/spinner comes up and the page is shown once it is completely fetched.
Common scenario for using this feature is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos. It is a great feature, but you have to careful here.
- As if there are more pages, more http requests and more bandwidth is consumed to prefetch.
- You should implement this feature only when you are sure that user will visit the prefetched page.
Remember "Prefetching doesn't mean Caching". When a page is prefetched, it is available in the DOM. If you navigate to this prefetched page and then navigate to another page, the prefetched page is automatically removed from the DOM. So its not caching.
Caching pages
In single-page template application, each new page is fetched and stored in the DOM. The page remains in the DOM and is removed once you move away from the page. Only the main or the first page of the app always remains in the DOM. Prefetching helps but to some extent only. So the answer is "Caching".
With DOM caching, you can cachne specific pages in the DOM. These pages, once loaded, remain in the DOM through the life cycle of the app. There are 2 ways to cache the pages either via adding "data-dom-cache" attribute or via JavaScript.
<div data-role="page" id="cacheMe" data-dom-cache="true">
<div>
Or Via JavaScript
<div data-role="page" id="cacheMe">
<script>
$("#cacheMe").page({ domCache: true });
</script>
<div>
There is also another way to cache all pages globally, instead of caching specific pages. Put below jQuery code to the <head> section of your main page. Now, every page visited automatically gets cached in the DOM.
<script>$.mobile.page.prototype.options.domCache = true;</script>
The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. So use caching carefully.
Remember:
When AJAX navigation is used, then remember only <head> section is processed of first page or the main page of your app. The <head> element of other pages is ignored and only their page's div containers are processed. Thus, to make sure that your
JavaScript code is executed in these pages, you need to include the <script> tag within the page's div container.
Summary
In this post, you got an idea about prefecthing and caching pages in Single Page Template application, advantage of prefetching and caching pages. In next post, I will show more about about creating Dialogs in jQuery Mobile App.
Feel free to contact me for any help related to jQuery, I will gladly help you.
