Working Offline With Html5

 About Working Offline With Html5

With Working Offline With Html5 support, we can use HTML and related technologies to build applications that can still function while disconnected from the Internet. This is especially useful for developing applicationsfor mobile devices that may drop connections. This technique works in Firefox, Chrome, and Safari, as well as on the iOS and Android 2.0 devices, but there’s no fallback solution that will work to provide offline support for Internet Explorer. AwesomeCo just bought its sales team some iPads, and they’d like to make the notes application we developed in Storing Data in a Client-Side Relational Database , on page 181, work offline. Thanks to the HTML5

manifest file, that will be a simple task. Defining a Cache with the Manifest The manifest file contains a list of all the web application’s client-side files that need to exist in the client browser’s cache in order to work offline. Every file that the application will reference needs to be listed here in order for things to work properly. The only exception to this is that the file that includes the manifest doesn’t need to be listed; it is cached implicitly. Create a file called notes.manifest. Its contents should look like this for  Working Offline With Html5,

# v = 1.0.0

The version comment in this file gives us something we can change so that browsers will know that they should fetch new versions of our files. When we change our code, we need to modify the manifest. Also, we’ve been letting Google host jQuery for us, but that won’t work if we want our application to work offline, so we need to download jQuery and modify our script tag to load jQuery from our javascripts folder for Working Offline With Html5.

<script type= "text/javascript"
src="javascripts/jquery.min.js" >

Next, we need to link the manifest file to our HTML document. We do this by changing the html element to Working Offline With Html5:

<html manifest= "notes.manifest" >

That’s all we need to Working Offline With Html5 .

There’s just one little catch—the manifest file has to be served by a web server, because the manifest must be served using the text/cache-manifest MIME type. If you’re using Apache, you can set the MIME type in an .htaccess like this for Working Offline With Html5:

AddType text/cache-manifest .manifest

After we request our notes application the first time, the files listed in the manifest get downloaded and cached. We can then disconnect from the network and use this application offline as many times as we want. Be sure to investigate the specification to Working Offline With Html5. The manifest file has more complex options you can use. For example, you can specify that certain things should not be cached and should never be accessed offline, which is useful for ignoring certain dynamic files. Manifest and Caching When you’re working with your application in development mode, you are going to want to disable any caching on your web server. By default, many web servers cache files by setting headers that tell browsers not to fetch a new copy of a file for a given time. This can trip you up while you’re adding things to your manifest file. If you use Apache, you can disable caching by adding this to your .htaccess file to Working Offline With Html5.

ExpiresActive On
ExpiresDefault "access"

This disables caching on the entire directory to Working Offline With Html5

So it’s not something you want to do in production. But this will ensure that your browser will always request a new version of your manifest file. If you change a file listed in your manifest, you’ll want to modify the manifest file too, by changing the version number comment we added. The Future Features like localStorage and Web SQL Databases give developers the ability to build applications in the browser that don’t have to be connected to a web server. Applications like the ones we worked on run on an iPad or Android device as well, and when we combine them with the Working Offline With Html5 manifest file, we can build offline rich applications using familiar tools instead of proprietary platforms. As more browsers enable support, developers will be able to leverage them more, creating applications that run on multiple platforms and devices, that store data locally, and that could sync up when connected. The future of Web SQL Storage is unknown. Mozilla has no plans to implement it in Firefox, and the W3C is choosing instead to move forward implementing the IndexedDB specification. We’ll talk more about that specification in Section 11.5, Indexed Database API, However, W e b SQL Storage has been in use on the iOS and Android devices for a while, and it’s likely to stay. This specification could be extremely useful to you if you’re developing applications in that space for Working Offline With Html5.