You can read about the HTML5 Offline Web Application standard by visiting the following links:
Currently, the HTML5 Offline Web Applications feature works with all modern browsers with one important exception. You can use Offline Web Applications with Firefox, Chrome, and Safari (including iPhone Safari). Unfortunately, however, Internet Explorer does not support Offline Web Applications (not even IE 9).
Why Build an HTML5 Offline Web Application?
Admittedly, it is becoming increasingly difficult to find locations where you can’t get Internet access.
Unlike the normal browser caching mechanism, the HTML5 Offline Web Application cache is used to specify a caching policy for an entire set of files. You use a manifest file to list the files that you want to cache and these files are cached until the manifest is changed.
Creating the Manifest File
There are two important things that you need to be aware of when using a manifest file. First, all relative URLs listed in a manifest are resolved relative to the manifest file. The URLs listed in the manifest above are all resolved relative to the root of the application because the manifest file is located in the application root.
Second, whenever you make a change to the manifest file, browsers will download all of the files contained in the manifest (all of them). For example, if you add a new file to the manifest then any browser that supports the Offline Cache standard will detect the change in the manifest and download all of the files listed in the manifest automatically.
When Are Updated Files Downloaded?
When you make changes to a manifest, the changes are not reflected the very next time you open the offline application in your web browser. Your web browser will download the updated files in the background.
My heartfelt recommendation is that you do not enable your application for offline storage until after you finish writing your application code. Otherwise, debugging the application can become a very confusing experience.
Offline Web Applications versus Local Storage
Offline Web Applications enable you to store static files persistently. Think of Offline Web Applications as a super cache.
Creating a Manifest File in an ASP.NET Application
- Manifest.txt – This text file contains the actual manifest file.
- Manifest.ashx – This generic handler sends the Manifest.txt file with the MIME type text/cache-manifest.
Here’s the code for the generic handler:
The Default.aspx file contains a reference to the manifest. The opening HTML tag in the Default.aspx file looks like this:
<html xmlns=”http://www.w3.org/1999/xhtml” manifest=”Manifest.ashx”>
Notice that the HTML tag contains a manifest attribute that points to the Manifest.ashx generic handler. Internet Explorer simply ignores this attribute. Every other modern browser will download the manifest when the Default.aspx page is requested.
Seeing the Offline Web Application in Action
Notice that you are provided with the choice of whether you want to use the application offline or not. Browsers other than Firefox, such as Chrome and Safari, do not provide you with this choice. Chrome and Safari will create an offline cache automatically.
If you click the Allow button then Firefox will download all of the files listed in the manifest. You can view the files contained in the Firefox offline application cache by typing about:cache in the Firefox address bar:
You can view the actual items being cached by clicking the List Cache Entries link:
The Offline Web Application experience is different in the case of Google Chrome. You can view the entries in the offline cache by opening the Developer Tools (hit Shift+CTRL+I), selecting the Storage tab, and selecting Application Cache:
Notice that you view the status of the Application Cache. In the screen shot above, the status is UNCACHED which means that the files listed in the manifest have not been downloaded and cached yet. The different possible values for the status are included in the HTML5 Offline Web Application standard:
- UNCACHED – The Application Cache has not been initialized.
- IDLE – The Application Cache is not currently being updated.
- CHECKING – The Application Cache is being fetched and checked for updates.
- DOWNLOADING – The files in the Application Cache are being updated.
- UPDATEREADY – There is a new version of the Application.
- OBSOLETE – The contents of the Application Cache are obsolete.
By taking advantage of this new feature of the HTML5 standard, you can improve the performance of your ASP.NET web applications by requiring users of your web application to download your application once and only once. Furthermore, you can enable users to take advantage of your applications anywhere — regardless of whether or not they are connected to the Internet.
Nice procedure, great set of web apps, keep them coming!!..
Can you provide with a sample application, how to work offline using local storage and update it to the sql server when online
nice project & excellent thinking for this work…….:)
Very nice, HTML 5 is here to stay!
Nice article, thanks for the information.
The blog provides helpful information regarding the topic and it also gives a vast knowledge as well which helps us in our studies and in practical life.
Decent blog but why don’t you guys promote this blog a little more. Has the potential to become really influential. I also like the layout, clean and no-nonsense.
Really happy that you are demonstrating HTML5 – it is amazing. The API that is defeating me though is WebSockets. Can’t find any working examples of it.
Does this application implement it? A good example of something which would use that is a share price index. Any chance of you creating something like that for us? 🙂
Thanks as always.