Application Cache in HTML 5
When someone says “Web application” then what comes to your mind first? Internet isn’t it?
You have internet ==> you are online ==> you can use the application
Your internet is down = > you are offline ==>you cannot use the application
Think about Outlook. It gives you an option to check your past mails even if you are offline. Just imagine if facebook, gmail had such featuresJ. If our internet application were working even in offline mode it would have made our life easy.
Now this is possible with HTML 5 application cache. Let’s understand it with sample demos.
Lab 8 – Simple Application Cache Demo
Step 1 – Create a new Asp.net Web Forms application
Open visual studio and create a new empty asp.net web forms application
Step 2 – Add Style.css
- Right click the project. Add new folder and name it Styles
- Right click the styles folder >> Add >> New Item. Select style sheet and name it style.css
- Add following css block inside style.css
Step 3 – Create manifest text file as follows
- Right click the project. Add >> New Item. Select Text file and name it MyCache.txt
- Add following content inside it
Step 4 – Create a file which need to be cached
- Right click your project. Add >> New Item. Select Web Form and name it MyPage.aspx
- Add following content inside fil
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<!DOCTYPE html>
<html manifest="MyCache.txt">
<head runat="server">
<title></title>
<link href="Styles/Style.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="DivStyle" id="MyDiv">
Hi, Execution count is 1
</div>
</form>
</body>
</html>
Step 5 – Execute the application
Step 6 – Go offline
Step 7 – Refresh the page
You will notice that you are still able to browse the application.
Step 8 – Change the Web Form
Open MyPage.aspx. And Change content inside “MyDiv” to something else.
<div class="DivStyle" id="MyDiv">
Hi, Execution count is 2
</div>
Step 9 – Execute the applications
 |
It’s not a new output. It’s not refreshing.
|
Step 10 – Change the manifest file as follows
CACHE MANIFEST
# ver 3
CACHE:
/Styles/Style.css
Step 11 – Refresh the page twice
Now you will get the updated output.
Explanation: Understanding step by step
- Very first line in the manifest line that is “CACHE MANIFEST” indicates that it’s a manifest file
- In the page “manifest” attribute of html indicates that “MyPage.aspx” need to be cached.
- In the manifest file there is a section “CACHE”. It will contain a list of files which are required for MyPage.aspx to run properly in offline mode. All of these files will be cached along with MyPage.aspx.
- End user will get the latest contents during the first request and then they get cached. All the subsequent requests will get cached version.
- Cache will get updated when something get changed inside manifest file hence in manifest file just after “CACHE MANIFEST” keyword one comment line is added. In this example we mentioned it as “ver 2” but it can be anything.
- When end user makes a request if requesting contents are cached browser will return the cached version of the content but in the same time in the background browser will make a request for manifest and see if manifest is changed in the server. In case it is changed Cache will be updated. But as I said it will be done in the background hence the current request will get the old content. Hence we have to make double refresh
Solve the double refresh problem
For this simply add following code in your page.
<script>
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
location.reload();
}
</script>
onupdateready event will be fired immediately after the cache is updated.
Note – While practice make sure to clear the Application cache manually before every lab. If you are a chrome user you can do it in this way.
- Click on gear icon and go to settings.
- Expand advanced settings.
- Click on content settings
- Click on All Cookies and site data
- In the search box enter localhost and click delete icon
Understand more about manifest
“CACHE” is not the only section in the manifest file. There are more.
- NETWORK – If you are caching a page you have to specify all the resources in it. Means all the css files, js files, images etc used in the page.
In some cases we want that some resources will be available only online. When it comes to offline it should not be available.
NETWORK section let us list those which we don’t want to cache.
- FALLBACK – In some cases we want that some resources should be replaced with some other resources when it goes offline. Example when it’s online everything should be “red” but when offline everything should be “green”.
Fallback let us define those settings.
Let’s have a demo and understand it.
Step 1 – Create a new Asp.net Web Forms application
Open visual studio and create a new empty asp.net web forms application
Step 2 – Create stylesheet Files
- Right click the project. Add new folder and name it Styles
- Right click the styles folder >> Add >> New Item. Select style sheet and name it style.css
- Add following css block inside style.css
- Right click the styles folder >> Add >> New Item. Select style sheet and name it style2.css
- Add following css block inside style2.css
- Right click the project. Add new folder and name it OnlineStyles
- Right click the OnlineStyles folder >> Add >> New Item. Select style sheet and name it Style3.css
- Add following css block inside style.css
- Right click the project. Add new folder and name it OfflineStyles
- Right click the OfflineStyles folder >> Add >> New Item. Select style sheet and name it Style4.css
- Add following css block inside style.css
Step 3 – Create manifest text file as follows
- Right click the project. Add >> New Item. Select Text file and name it MyCache.txt
- Add following content inside it
CACHE MANIFEST
# ver 1
CACHE:
/Styles/Style.css
# Comment – Style.css will be cached with page
NETWORK:
/Styles/Style2.css
# Comment – Style2.css will be available only online
FALLBACK:
OnlineStyles\Style3.css OfflineStyles\Style4.css
# Comment – Style3.css will be used when online and style4.css will be cached and used when application is offline
Step 4 – Create a file which need to be cached
- Right click your project. Add >> New Item. Select Web Form and name it MyPage.aspx
- Add following content inside file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<!DOCTYPE html>
<html manifest="MyCache.txt">
<head runat="server">
<title></title>
<link href="Styles/Style.css" rel="stylesheet" />
<link href="Styles/Style2.css" rel="stylesheet" />
<link href="OnlineStyles/Style3.css" rel="stylesheet" />
<script>
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
location.reload();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="Div1" id="MyDiv1">
Hi, Execution count is 1
</div>
<div class="Div2" id="MyDiv2">
Hi, Execution count is 1
</div>
<div class="Div3" id="MyDiv3">
Hi, Execution count is 1
</div>
</form>
</body>
</html>
Step 5 – Execute the application
Step 6 – Go offline
Step 7 – Refresh the page
As you can style2.css didn’t cached and style3.css is replaced with style4.css
Importance of NETWORK section
One may ask a question what will happen if you won’t provide it.
In the above example let say we won’t specify Network section. Let’s understand it by a demo,
Step 1 – Clear the cache
Follow the step described in a note after Lab 8.
Step 2 – Remove NETWORK Section and execute the application
When your application executes for the first time it works fine and you will get a correct output.
Step 3 – Refresh the page
Now don’t stop your application. Simply refresh the page you will see some strange output like this.
You are online but still style2.css formatting is not applying because only application get cached it will always loaded from the cache.
When you specify Style2.css in NETWORK section it will always load that file from online location. If you are online it will work, if you are offline they won’t get loaded.
Application caching vs old browser caching
Browser caching works on File level. Browser automatically caches individual files which ultimately reduces the subsequent request load. It will not make your application work offline because some files required for execution of application may not be exist in the cache.
Application caching works on application level. It works on transaction. Here one application means, Page which contain manifest attribute + all the resources specified in CACHE and FALLBACK section of manifest file. Either all of them get cached or none. If one of the resource fail to cache, application cache won’t work.
No comments :
Post a Comment