HTML5 Offline Web Application

HTML5 Offline Web Application

[email protected]

Agenda

Client-side Caching HTTP Response Header

Expires Header Cache-Control Header ETag Header Last-Modified Header

Offline Web Application Cache Manifest Application Cache

Client-side Caching

HTTP Response Header

Expires Header Gives the date/time after which the response is

considered stale Example

Expires: Thu, 01 Dec 1994 16:00:00 GMT


Cache-Control Header Tells all caching mechanisms from server to client

whether they may cache this object. It is measured in seconds

Example Cache-Control: max-age=3600


Entity Tag / ETag Header An identifier for a specific version of a resource, of

ten a message digest Example

ETag: "737060cd8c284d8af7ad3082f209582d"


Last-Modified Header The last modified date for the requested object Example

Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT

Most modern Web servers will generate both ETag and Last-Modified headers to use as validators for static content automatically

Offline Web Application

Before HTML5…

Browser's cache based on server-side rules and client-side configuration

Regular caching can lead to undesired results while you're offline

HTML5 Offline Feature

Create a manifest file that lists your app's assets and reference it in a manifest attribute in your web pages' html elements

You add the manifest attribute to the <html> element, and point it to the file containing your application’s manifest

Cache Manifest

Manifest will cache HTTP GET requests, while POST, PUT, and DELETE will still go to the network If the page has an active manifest file, all GET req

uests will be directed to local storage Web server is sending the text/cache-manifes

t file header when you request any file with the *.manifest / *.appcache extension

Manifest Structure

The first line of the file must always be CACHE MANIFEST

Comments start with # and must appear on a line of their own

Case-sensitive file names must be listed exactly as they appear on disk

3 directive sections CACHE:CACHE: section NETWORK:NETWORK: section FALLBACK:FALLBACK: section

Manifest Structure

CACHE:CACHE: section The files will be cached in Application Cache Add a list of cached files under the CACHE

MANIFEST directive without the CACHE:CACHE: section Add a list of cached files anywhere else in the file,

you need to place them under an explicit CACHE:CACHE: section

Manifest Structure

CACHE:CACHE: section rules Only one file name per line A full file name is required, no wildcards * allowed File names can contain path information or even

an absolute URL File names can't include fragment identifiers, e.g.

comment #

Manifest Structure

NETWORK:NETWORK: section Any URLs will bypass the application cache and

load directly from the server Explicitly state that anything that isn’t cached

must go via the web by using a wildcard * (note that this is the default behavior if omitted)

Manifest Structure

FALLBACK:FALLBACK: section Specify a fallback resource that must be served if

a specific resource is not available (either because you’re offline or it’s not in the cache)

List entire directories or URL paths in the NETWORK:NETWORK: and FALLBACK:FALLBACK: sections, not full files name

Manifest Structure

Manifest Structure

Update Cache

Once an application is offline it remains cached until … User clean their browser's data storage for your

site Manifest file is updated

Updating a file listed in the manifest doesn't mean the browser will re-cache that resource

Application cache is programmatically updated

Update Manifest

Application Cache Busting Add a version number (from a version control

system) or timestamp string in a comment # in the manifest file

Add an final MD5 checksum into the manifest file Add each file’s MD5 checksum as a comment

after the file name

Update Manifest

Only when the web page is reloaded will the new cached assets come into play and become available

If you can’t wait for the next page reload, you can programmatically add an event listener for the updateReady event and prompt the user to reload the page

Update Manifest via JavaScript

Checking Status

Checking for Browser Support Compatibility Tables if (if (window.applicationCachewindow.applicationCache) {) {

// this browser supports offline web apps // this browser supports offline web apps}}

Checking Online / Offline Check the property navigator.onlinenavigator.online whether the b

rowser is online or not Pull in a piece of JavaScript and check online / off

line status via FALLBACK rule

Checking Online / Offline

Checking Online / Offline

Application Cache API

Application Cache API

Clean Cache

Firefox Tools > Clear Recent History Tools > Options (Preferences on Mac OS X) >

Advanced > Network > Select specific application cache > Remove

Chrome Settings Menu > Tools > Clear Browsing Data

Safari Settings Menu > Reset Safari

Debug Manifest Challenge

Include missing files in the manifest When the manifest is updated and the brows

er does not reflect the update until the web page is loaded

If the manifest has a cache control header set on it, the browser may not check for a new version of the manifest Manifest is not cached by the browser, or if it is ca

ched it is done only via an ETag.

Conclusion

Tips Turn off the manifest file during development and enable it

only when the project is ready to go live Access Application Cache Content

Visit about:cache in Firefox Security

Private Browsing mode Disk Quota

Limit it to about 5 MB per domain Demo

Q&A

Technology

HTML5 Offline Web Application