Offline caching of data is very important feature .This feature is commonly required in mobile applications where we would like the pages to be cached locally in the browser ,so that user can browse through this pages even if the application goes offline temporarily due to network failure .
HTML 5 came with a manifest file concept where the files and pages to be cached in the browser are specified in a text file which is kept in the same server domain as the other pages .This file is basically a text file of content type is text/cache-manifest.
W3schools is a place where i learn basics .Thanks to w3schools for presenting content in simple language .Here is the reference link for all the enthusiastic.
http://www.w3schools.com/html/html5_app_cache.asp
The App-cache concept is clearly explained on the link above . Summarizing ,its just the manifest file of type text/cache-manifest that tells the browser on the content that will be cached in the server.
<html manifest="demo.appcache">
The html has an attribute to indicate the manifest file .An example shown above where demo.appcache is the text file that holds resources that will be cached once there is no network and still you can access content that's cached on the browser .
Visualforce had some new attributes in recent summer13 and a mainfest attribute was provided in <apex:page> tag to specify manifest file .
This small write up will take you through a very small tutorial where we cache a page and make it accessible even when the browser is offline .
Lets begin step by step
1)We will first create a page that will be html5 and also specify the manifest file in that page
Here is the simple visualforce page we create first and lets name it as test
<apex:page doctype="html-5.0" manifest="/apex/CacheManifest" showheader="false" sidebar="false" standardstylesheets="false"> <header> <h1> Congratulations!</h1></header> <article> This page looks almost like HTML5! </article> <img src="/img/seasonLogos/2013_summer_aloha.png" /> </apex:page>
2)The manifest file can also be created from the visualforce page .Naming the page as "CacheManifest"
<apex:page contentType="text/cache-manifest" applyHtmlTag="false" standardStylesheets="false" showHeader="false">CACHE MANIFEST#img/img/seasonLogos/2013_summer_aloha.png</apex:page>
3)Open the visualforce page /apex/test and go offline by disconnecting the network.
Try refreshing and you will see even if your computer has no network still this page will exist due to browser caching of the image .
Here are the some of the snapshots i took from my pre-release org to demonstrate this feature
Observe in chrome how i view the cached resources using the inspect element utility provided by the chrome .
Now let me go offline and view the same page
One thing to note on this is html5 app-cache is insecure and hence for enterprise applications where data security is primary consideration to develop offline applications this is not the suggested way .
Still this is popular when you want to store some pictures and small data in browser cache for offline .
Thanks to Bob Buzzard for answering my query on stackexchange and that had solve the issue of specifying CACHE MANIFEST.
Reference
http://salesforce.stackexchange.com/questions/11104/manifest-attribute-of-summer13-not-working-on-my-prerelease-org
Try refreshing and you will see even if your computer has no network still this page will exist due to browser caching of the image .
Here are the some of the snapshots i took from my pre-release org to demonstrate this feature
Observe in chrome how i view the cached resources using the inspect element utility provided by the chrome .
Now let me go offline and view the same page
One thing to note on this is html5 app-cache is insecure and hence for enterprise applications where data security is primary consideration to develop offline applications this is not the suggested way .
Still this is popular when you want to store some pictures and small data in browser cache for offline .
Thanks to Bob Buzzard for answering my query on stackexchange and that had solve the issue of specifying CACHE MANIFEST.
Reference
http://salesforce.stackexchange.com/questions/11104/manifest-attribute-of-summer13-not-working-on-my-prerelease-org
No comments:
Post a Comment