Taking Web Applications Offline
31
Taking Web Applications Offline Matt Casto http://google.com/profiles/ mattcasto
-
Upload
matt-casto -
Category
Technology
-
view
7.712 -
download
3
description
One of the main advantages of web applications is their ease of deployment. The same can't be said about desktop applications. However, desktop applications work without a network connection. While this used to be a deal breaker for web applications, recent developments in HTML 5 and browser plugins such as Flash and Silverlight allow developers to create web applications that work both online and offline. In this session, Matt will demonstrate how to create offline web applications in HTML 5, Silverlight and Air. Also, other factors for offline applications, such as client-side data storage, will be examined in detail.
Transcript of Taking Web Applications Offline
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
