Taking Web Applications Offline Matt Casto http://google.com/profiles/ mattcasto
May 08, 2015
Taking WebApplications Offline
Matt Castohttp://google.com/profiles/mattcasto
Offline Web - Oxymoron
“Why would you want to use the web offline?”
- Some dude in an airplane
Making The Case
Example: Survey application that needs to work both online and in areas with little or no internet connectivity.
Bandwidth Isn’t Ubiquitous
Traditional Caching
HTML5 App Cache
• http://www.w3.org/TR/html5/offline.html
• http://www.whatwg.org/specs/web-apps/current-work/ multipage/offline.html
CACHE MANIFEST# version 0.0.8
CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.png
NETWORK:noncached.html
FALLBACK:/ offline.html
CACHE MANIFEST# version 0.0.8
CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.png
NETWORK:noncached.html
FALLBACK:/ offline.html
CACHE MANIFEST# version 0.0.8
CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.png
NETWORK:noncached.html
FALLBACK:/ offline.html
CACHE MANIFEST# version 0.0.8
CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.png
NETWORK:noncached.html
FALLBACK:/ offline.html
<!DOCTYPE HTML><html manifest="manifest.cache"> <head> <title>Hello AppCache</title> <link href="site.css" rel="stylesheet“ type="text/css" /> <script src="jquery-1.4.1.js" type="text/javascript"></script> </head> <body> <h1>Hello AppCache!</h1> </body></html>
MIME type
text/cache-manifest
Cached Page – First Load
1. Page with manifest attribute is requested.2. The page is loaded (including referenced assets)3. The browser loads the manifest file and parses
it.4. The browser loads indicated files in the
background.5. At this point all of these resources will now be
loaded from the browser’s cache!
Cached Page – Additional Load
1. Page that the browser has cached is requested.
2. The browser loads the file from its cache.3. The browser attempts to load the manifest
file from the server.4. If changes have been made to the manifest
file, all resources are re-cached.5. If the current page was re-cached, changes
won’t show up unless the user refreshes.
DEMO – Simple Cached Site
if (navigator.onLine)alert(“We’re online!”);
window.addEventListener(“online”, function(e) { alert(“online”); }, true);
window.addEventListener(“offline”, function(e) { alert(“offline”); }, true);
DEMO – OnLine/OffLine App
HTML5 Data Storage
Key/Value data storage by the browserat either the Session or Persistent level.
http://dev.w3.org/html5/webstorage/
sessionStorage.setItem(“key”, “value”);sessionStorage.getItem(“key”,
“value”);sessionStorage.removeItem(“key”);sessionStorage.clear();
localStorage.setItem(“key”, “value”);localStorage.getItem(“key”, “value”);localStorage.removeItem(“key”);localStorage.clear();
DEMO – Local Storage App
Offline Database
Source – http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
Browser Plug-Ins
DEMO – Developer Survey
Security Concerns
Other Concerns
• Error Handling• Logging• Printing• Authentication• Authorization
Resources
HTML5 spec – http://www.w3.org/TR/html5
Examples• http://diveintohtml5.org• http://www.html5rocks.com/tutorials
Silverlight – http://www.silvelight.netAdobe AIR – http://www.adobe.com/AIR
me• http://google.com/profiles/mattcasto • http://speakerrate.com/talks/5289-taking-web-applications-offline • http://
www.slideshare.net/mattcasto/taking-web-applications-offline-6531560