Taking Web Applications Offline

by Matt Casto on Jan 12, 2011

4,142 views

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.

Less

10 Embeds 1,220

http://programwith.net	1115
http://translate.googleusercontent.com	40
http://www.programwith.net	24
http://speakerrate.com	21
http://mattcasto.com	6
http://www.mattcasto.com	5
http://feeds.feedburner.com	4
http://webcache.googleusercontent.com	2
http://localhost	2
http://216.119.97.66	1

More...

Statistics

Favorites: 0
Downloads: 40
Comments: 0
Embed Views: 1,220
Views on SlideShare: 2,922
Total Views: 4,142

Taking Web Applications Offline — Presentation Transcript

Taking WebApplications Offline
Matt Casto
http://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.html
site.css
jquery-1.4.1.js
emoticon_smile.png
NETWORK:
noncached.html
FALLBACK:
/ offline.html

<!DOCTYPE HTML>
<htmlmanifest="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
Page with manifest attribute is requested.
The page is loaded (including referenced assets)
The browser loads the manifest file and parses it.
The browser loads indicated files in the background.
At this point all of these resources will now be loaded from the browser’s cache!

Cached Page – Additional Load
Page that the browser has cached is requested.
The browser loads the file from its cache.
The browser attempts to load the manifest file from the server.
If changes have been made to the manifest file, all resources are re-cached.
If the current page was re-cached, changes won’t show up unless the user refreshes.

Browser Support – App Cache
Source – http://caniuse.com

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);

Browser Support - onLine
Source – http://caniuse.com

DEMO – OnLine/OffLine App

HTML5 Data Storage
Key/Value data storage by the browser
at 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();

Browser Support – Storage
Source – http://caniuse.com

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.net
Adobe AIR – http://www.adobe.com/AIR
me

http://google.com/profiles/mattcasto
http://speakerrate.com/talks/
http://www.slideshare.net/mattcasto/

Taking Web Applications Offline

by Matt Casto on Jan 12, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 1,220

Statistics

Taking Web Applications Offline — Presentation Transcript