using html5 application cache to create offline web applications
DESCRIPTION
Everything you always wanted to know about HTML5 Offline Web Applications...By Peter Lubbers, Kaazing HTML5 TrainingExample files are at http://bit.ly/9pJ1ZqAbout this presentation:Application Cache is a new HTML5 feature that can be used to create offline applications and speed up your web apps by prefetching your sites’ assets.TRANSCRIPT
![Page 1: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/1.jpg)
Peter Lubbers, Kaazing
HTML5 Offline Web Applications
![Page 2: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/2.jpg)
Kaazing (Pizza and Drinks)• Enterprise-Ready HTML5 WebSocket Gateway enabling
massively scalable, real-time web applications• HTML5 and WebSocket Training (Yes, we’re hiring!)
Marakana (Organization)• Cutting-Edge Open Source Training (San Francisco, New
York, Toronto, and on demand)
Twilio (Venue)• Allows web applications to easily make and receive phone
calls and SMS text messages using a simple web service API
Apress (Raffle Prizes)• Books for professionals by professionals
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Thanks to Our Sponsors!
![Page 3: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/3.jpg)
about:peterlubbers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 4: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/4.jpg)
Agenda
• About Offline Web Apps • Creating Offline Web Apps• Server Configuration• Tips, Tricks, and Q&A
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 5: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/5.jpg)
Offline Web Applications• New HTML5 Specification • Also known as Application Cache (AppCache)• WHATWG: http://
www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
• W3C: http://dev.w3.org/html5/spec/offline.html#offline
• Spec is primarily aimed at browser developers to ensure interoperability…
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 6: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/6.jpg)
Data for the current section. The format that data lines must take depends on the current section. When the current section is the explicit section, data lines must consist of zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, a valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters. When the current section is the fallback section, data lines must consist of zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, a valid URL identifying a resource other than the manifest itself, one or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, another valid URLidentifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters. When the current section is the online whitelist section, data lines must consist of zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters, either a single U+002A ASTERISK character (*) or a valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab) characters…
Copyright © 2010 - Kaazing Corporation. All rights reserved.
WHATWG spec
The Spec…
![Page 7: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/7.jpg)
And the Slightly Simpler Version…
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Sweet! I’m offline! How easy was that!
![Page 8: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/8.jpg)
Offline Web Applications• Allow you to keep using web apps and sites without a
network connection (for example, on an airplane or in rural areas and subways)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 9: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/9.jpg)
Offline without AppCache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Noooooooo!
![Page 10: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/10.jpg)
Traditional Caching• Cache duration can be controlled through
Web Server’s Cache HTTP headerso For example, in Apache’s .htaccess file (see
example on next slide)
• Not reliable for offline use• Browser caching settings also apply
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 11: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/11.jpg)
<IfModule mod_expires.c> Header set cache-control: public ExpiresActive on# your document html ExpiresByType text/html "access"# rss feed ExpiresByType application/rss+xml "access plus 1 hour"# favicon (cannot be renamed) ExpiresByType image/vnd.microsoft.icon "access plus 1 week" # media: images, video, audio ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month"# webfonts ExpiresByType font/ttf "access plus 1 month" ExpiresByType font/woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month"# css and javascript ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month"</IfModule>
Copyright © 2010 - Kaazing Corporation. All rights reserved.
.htaccess File
Web Server Caching Settings
Source: Paul Irish & Divya Manian http://html5boilerplate.com/
![Page 12: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/12.jpg)
Offline Web Applications• Allow you to cache pages that have not been
visited• Browsers cache data in an Application Cache• Once resources are cached, you can access them
very quickly (without a network request)• HTML5 also allows online and offline detection• Using offline mechanism allows you to easily
prefetch site resources (speeds up pages, but uses bandwidth)
• Pages served using TLS (SSL) can also be included to work offline
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 13: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/13.jpg)
DemoCopyright © 2010 - Kaazing Corporation. All rights reserved.
Source Files: http://bit.ly/9pJ1Zq or:http://tech.kaazing.com/training/offline/peter-lubbers-html5-offline-web-apps-presentation-code.zip
![Page 14: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/14.jpg)
Browser Support for Offline Web Applications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Source: http://caniuse.com/ (the best site for checking browser support for HTML5 features)
Hi-res browser logos: http://paulirish.com/2010/high-res-browser-icons/
4.0+ 4.0+3.5+ 10.6+ Some day…
![Page 15: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/15.jpg)
Offline Emulation• HTML5 Gears Project by Brad Neuberg,
Google: http://code.google.com/p/html5-gears/
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 16: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/16.jpg)
Developing Offline Web Applications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 17: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/17.jpg)
CACHE MANIFEST# manifest version 1.0.1 # Files to cacheindex.htmlcache.htmlhtml5.cssimage1.jpgimg/foo.gifhttp://www.example.com/styles.css
# Use from network if availableNETWORK:network.html
# Fallback contentFALLBACK:/ fallback.html
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Manifest File
The Manifest File
![Page 18: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/18.jpg)
<!DOCTYPE html><html manifest="offline.manifest"> <head> <title>HTML5 Application Cache</title>
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML
Using a Manifest File in HTML• Reference the manifest file:
o <name>.manifest – it must match the name of the manifest file
o Add as attribute to HTML element
![Page 19: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/19.jpg)
Browser Notification• Users may have to opt in (similar to
Geolocation)• Configurable and not default in all browsers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 20: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/20.jpg)
The Manifest File• Manifest file has three sections:
o CACHE:o NETWORK:o FALLBACK:
• Multiple sections (of the same kind) are allowed• First line must be CACHE MANIFEST• Comments start with # (don’t use inline
comments)• An application cache is created using the
manifest’s complete URL (you can have multiple manifest files in a site)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 21: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/21.jpg)
CACHE: Section• To cache files in the AppCache, include them in
the CACHE: section or list files directly under CACHE MANIFEST (default is to cache files)
• Add one file per line (full name required)• Files can contain path information or even be an
absolute URL• Application caches can’t include fragment
identifiers (#) or wildcards• Case sensitive• Files that reference the manifest file will
automatically be cached
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 22: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/22.jpg)
NETWORK: Section• Also called the online whitelist• Files listed in this section listed will not be
loaded from the cache, but retrieved over the network (from the server) if online
• You can specify “*”o Sets the online whitelist wildcard flag to “open”o Access to resources on other origins will not be
blocked
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 23: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/23.jpg)
FALLBACK: Section• Provides a way to fall back if resources
cannot be found• Specify a fallback namespace and a fallback
page for that namespace:/ fallback.html
• You can only list one fallback namespace
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 24: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/24.jpg)
Initial Cache Sequence1. Access the page (with the manifest attribute)
2. Page is loaded and page’s resources are loaded (from the server)
3. Manifest is encountered and parsed, all files flagged for caching are loaded in the background
4. Go offline (regular caching is also in effect, so watch for false positives)
5. Access a CACHE: resource (loads from cache)
6. Access a NETWORK resource (FALLBACK content is served, files will be available if you go back online)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 25: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/25.jpg)
Step 1: First Page Load
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 26: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/26.jpg)
Step 2: Going Offline
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 27: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/27.jpg)
Step 3: Offline Web Page
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 28: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/28.jpg)
Step 4: Network Page
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 29: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/29.jpg)
Consecutive Load Sequence 11. Go back to online mode
2. Change the cache.html page on the server
3. Reload the cache.html page in the browser
4. The (old) page loads from the application cache (The changes do not appear!)
5. The browser checks to see if the referenced manifest file has been updated and does nothing since it has not been modified
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 30: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/30.jpg)
Consecutive Load Sequence 26. Update the manifest file (make a trivial change,
like a version number comment update)
7. Reload the cache page in the browser
8. The (old) page loads from the application cache (This is always the first action from the browser, so the changes still don’t appear!)
9. The browser checks to see if the referenced manifest has been updated and since it has, it downloads all the files flagged to be cached
10.The new files are now in the application cache, reload the page once more to see the latest changes
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 31: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/31.jpg)
// Simple methodif(window.applicationCache) { // this browser supports offline web apps}
//Or just use Modernizr (source: http://www.modernizr.com/)if (Modernizr.applicationcache){ // We have offline web app support! Continue operation, // indicating to the user that the app will sync up once they get back online} else { // No offline support, show errors if the user goes offline}
Copyright © 2010 - Kaazing Corporation. All rights reserved.
JavaScript
Checking for Browser Support
![Page 32: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/32.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Checking for Online and Offline Events
window.addEventListener("online", function(e) { log("Application is now online");}, true);
window.addEventListener("offline", function(e) { log("Application is now offline");}, true);
JavaScript
![Page 33: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/33.jpg)
Using Web Pages Offline• Test offline pages using the
“Work Offline” feature if available(Not in Chrome andSafari)
• Disconnect your computer (does not work for localhost)
• Watch out for false positives (regular browser caching)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Opera
Firefox
![Page 34: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/34.jpg)
Working Offline
Browser Work Offline
Chrome Disconnect from the network
Firefox File > Work Offline
Safari Disconnect from the network
Opera File > Work Offline
Internet Explorer N/A (Does not support App Cache)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 35: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/35.jpg)
ApplicationCache Events• The window.applicationCache object fires
several events related to the state of the cache • window.applicationCache.status is a
numerical property indicating the state of the cacheo 0 UNCACHEDo 1 IDLEo 2 CHECKINGo 3 DOWNLOADINGo 4 UPDATEREADYo 5 OBSOLETE
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 36: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/36.jpg)
Event Callback Attributes
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Callback Attribute Event
onchecking CHECKING
ondownloading DOWNLOADING
onupdateready UPDATEREADY
onobsolete OBSOLETE
oncached CACHED
onerror ERROR
onnoupdateready NOUPDATE
onprogress PROGRESS
![Page 37: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/37.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Checking App Cache Status
window.applicationCache.onchecking = function(e) { log("Checking for application update");} window.applicationCache.onnoupdate = function(e) { log("No application update found");}window.applicationCache.onupdateready = function(e) { log("Application update ready"); window.applicationCache.swapCache();}window.applicationCache.onobsolete = function(e) { log("Application obsolete");}
JavaScript
Forces correct behavior in some
browsers
![Page 38: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/38.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Checking App Cache Status
window.applicationCache.ondownloading = function(e) { log("Downloading application update");}window.applicationCache.oncached = function(e) { log("Application cached");}window.applicationCache.onerror = function(e) { log("Application cache error");}window.applicationCache.onprogress = function(e) { log("Application Cache progress");}
JavaScript
![Page 39: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/39.jpg)
Server Configuration
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 40: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/40.jpg)
Serving the Manifest File• Manifest files have the MIME type text/cache-manifest
• Most web servers need to be configured to serve the manifest files correctlyo Served correctly by default by Python's
SimpleHTTPServer on Ubuntu Linuxo For Python on Windows/Mac OS X or Apache,
update the configuration files with the MIME type
• Verify how the manifest file is served by using network or curl –I http://offline.example.com/offline.manifest
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Source: Introducing HTML5, Offline Chapter, Bruce Lawson and Remy Sharp
![Page 41: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/41.jpg)
# Apache mimetype configuration# APACHE_HOME/conf/mime.typestext/cache-manifest manifest
Copyright © 2010 - Kaazing Corporation. All rights reserved.
mime.types File
Apache Configuration
# Apache mimetype configurationAddType text/cache-manifest .manifest
.htaccess File
Or:
![Page 42: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/42.jpg)
# Cache settings for the manifest file<IfModule mod_expires.c> Header set cache-control: public ExpiresActive on...# Prevent receiving a cached manifest ExpiresByType text/cache-manifest "access plus 0 seconds"...</IfModule>
Copyright © 2010 - Kaazing Corporation. All rights reserved.
.htaccess File
Apache Configuration
Source: Introducing HTML5, Offline Chapter, Bruce Lawson and Remy Sharp
![Page 43: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/43.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
mimetypes.py File
Python Configuration
Windows: PYTHON_HOME/Lib/mimetypes.py, for example:C:\Python26\Lib\mimetypes.pyMac:PYTHON_HOME/Lib/mimetypes.py, for example:/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/mimetypes.py
Important: If you do not have a mimetypes.py file, you can use mimetypes.py from the offline/ mac-config-file example folder. If you already have a compiled mimetypes.pyc file in the same directory, ensure that the permissions on this file are changed to read/write. When you start Python with the new file, Python compiles it and generates or overwrites the mimetypes.pyc.
# Python SimpleHTTPServer mimetype Configuration# python –m SimpleHTTPServer 9999)'.manifest' : 'text/cache-manifest',
![Page 44: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/44.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Microsoft IIS Configuration
![Page 45: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/45.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Offline Web Applications Tips and Tricks
![Page 46: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/46.jpg)
Debugging Offline Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Chrome: Chrome Developer Tools > StorageNote: Not available in Safari Web Inspector yet…
![Page 47: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/47.jpg)
Accessing Offline Resources
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 48: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/48.jpg)
Accessing the Offline Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Firefox: about:cache
![Page 49: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/49.jpg)
Accessing the Offline Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Firefox SQLite Manager Add-on: https://addons.mozilla.org/en-US/firefox/addon/5817/
![Page 50: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/50.jpg)
Accessing the Offline Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
File System Access
![Page 51: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/51.jpg)
Browser Offline Cache Settings and
Clearing the Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 52: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/52.jpg)
Offline Cache Settings
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Firefox: Tools > Options (Preferences on Mac OS X) >
Advanced > Network
![Page 53: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/53.jpg)
Offline Cache Settings
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Opera: opera:config
![Page 54: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/54.jpg)
Clearing the Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Chrome: Settings Menu > Tools > Clear Browsing Data
Opera: Tools > Preferences > Storage
![Page 55: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/55.jpg)
Clearing the Cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Firefox: Tools > Clear Recent History
Safari: Settings Menu > Reset Safari
![Page 56: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/56.jpg)
Clearing the CacheBrowser Steps to Clear the Cache
ChromeSettings Menu > Tools > Clear Browsing Data
FirefoxTools > Clear Recent History (and Tools > Options (Preferences on Mac OS X) > Advanced > Network > Remove for app cache)
Safari Settings Menu > Reset Safari
OperaTools > Preferences > Storage (+ Tools > Clear Private Data)
Internet Explorer Coming soon…
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Note: Close any offline pages before you do this to avoid problems
![Page 57: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/57.jpg)
Private Browsing• Most private browsing modes prevent writing
to application cacheo For example, Safari’s
Private Browsing mode, and Chrome’s Incognito Mode
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 58: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/58.jpg)
Security Considerations• Others browsing the same site (on the same
machine in the same browser) can potentially access your cached data (data is cached based on the manifest file URL)
• Do not store sensitive, personal data in the application cache
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 59: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/59.jpg)
Best Practices• Manifest errors are fatal (case sensitive entries)• If you are adding and removing (lots of files) files,
remember to update the manifest fileo Use a predeployment scripto Use a version Comment in the manifest file
• Host your site on different domain nameso You can do this on your local machine by hacking the
hosts file (see example on the next slide)o Windows:\WINDOWS\system32\drivers\etc\hosts
o UNIX: /etc/hosts
• To see if files are requested, watch the server logCopyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 60: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/60.jpg)
Checking Server Access
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 61: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/61.jpg)
# For example127.0.0.1 localhost127.0.0.1 offline0.example.com127.0.0.1 offline1.example.com
Copyright © 2010 - Kaazing Corporation. All rights reserved.
hosts file
hosts File for Testing
![Page 62: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/62.jpg)
Disk Quota• Don’t assume success and check for errors
o Example in Chrome: Application Cache Error event: Failed to commit new cache to storage, would exceed quota
• In the future, browsers will hopefully have graceful quota upgrade mechanisms like Opera’s for LocalStorage
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 63: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/63.jpg)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Works Well With HTML5 Web Storage…
if (navigator.onLine) { //Send updates to server} else { window.localStorage.myLocalKey = ‘Some Data'; }}
JavaScript
![Page 64: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/64.jpg)
CACHE MANIFEST
FALLBACK:/ /offline.html
NETWORK:*
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Manifest File
Cache-As-You-Go• If you add the manifest attribute, files will be
added to the cache implicitly• Subresources and dependencies may not be
loaded properly (CSS, JS, etc.)
![Page 65: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/65.jpg)
This work is licensed under a Creative Commons Attribution 3.0 License.
![Page 66: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/66.jpg)
THANKS
!Kaazing Jobs: http://www.kaazing.com/about/careers.html
E-mail: [email protected]
Twitter: @peterlubbers
LinkedIN: Peter Lubbers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 67: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/67.jpg)
Resources• WHATWG Offline Web Apps spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
• W3C Offline Web Apps spec: http://dev.w3.org/html5/spec/offline.html#offline
• Offline example source files: http://bit.ly/9pJ1Zq • Pro HTML5 Programming, Offline chapter, Peter
Lubbers, Brian Albers, and Frank Salim• Introducing HTML5, Offline chapter, Bruce
Lawson and Remy SharpCopyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 68: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/68.jpg)
HTML5 Training Discount
Copyright © 2010 - Kaazing Corporation. All rights reserved.
E-mail: [email protected]
![Page 69: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/69.jpg)
Copyright © 2010 Kaazing Corporation, All rights reserved.All materials, including labs and other handouts are property of Kaazing Corporation. Except when
expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any part of this training material, in any form, or by any means.
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 70: Using HTML5 Application Cache to Create Offline Web Applications](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a8cd4a795913288b45b6/html5/thumbnails/70.jpg)