Taking Web Applications Offline
•Download as PPTX, PDF•
3 likes•2,983 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.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Taking Web Applications Offline
Similar to Taking Web Applications Offline (20)
Recently uploaded
Recently uploaded (20)
Taking Web Applications Offline
- 1. Taking WebApplications OfflineMatt Castohttp://google.com/profiles/mattcasto
- 2. Offline Web - Oxymoron“Why would you want to use the web offline?” Some dude in an airplaneMaking The CaseExample: Survey application that needs to work both online and in areas with little or no internet connectivity.
- 6. http://www.whatwg.org/specs/web-apps/current-work/ multipage/offline.html CACHE MANIFEST# version 0.0.8CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
- 7. CACHE MANIFEST# version 0.0.8CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
- 8. CACHE MANIFEST# version 0.0.8CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
- 9. CACHE MANIFEST# version 0.0.8CACHE:index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
- 10. <!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>
- 12. Cached Page – First LoadPage 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!
- 13. Cached Page – Additional LoadPage 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.
- 14. Browser Support – App CacheSource – http://caniuse.com
- 15. DEMO – Simple Cached Site
- 16. if (navigator.onLine)alert(“We’re online!”);window.addEventListener(“online”, function(e) { alert(“online”); }, true);window.addEventListener(“offline”, function(e) { alert(“offline”); }, true);
- 17. Browser Support - onLineSource – http://caniuse.com
- 18. DEMO – OnLine/OffLine App
- 19. HTML5 Data StorageKey/Value data storage by the browserat either the Session or Persistent level.http://dev.w3.org/html5/webstorage/
- 20. 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();
- 21. Browser Support – StorageSource – http://caniuse.com
- 22. DEMO – Local Storage App
- 23. Offline DatabaseSource – http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
- 24. Browser Plug-Ins
- 27. DEMO – Developer Survey
- 30. Logging
- 31. Printing
- 32. Authentication
- 33. AuthorizationResourcesHTML5 spec – http://www.w3.org/TR/html5Exampleshttp://diveintohtml5.org
- 34. http://www.html5rocks.com/tutorialsSilverlight – http://www.silvelight.netAdobe AIR – http://www.adobe.com/AIRmehttp://google.com/profiles/mattcasto
Editor's Notes
- There is no such thing as “offline web apps” – this is an oxymoron. However, web applications can take advantage of browser capabilities and work without a network connection.This quote goes alone with a short story about my flight earlier this week, where my upcoming presentation at CodeMash was the topic. When I told my fellow traveler what my session’s title was, this was what he said.
- As a case study, I describe my current contract with the State of Ohio. They have a long standing ASP.NET web application and they needed a new portion of that site to be available offline for auditors that visit homes that get state government assistance with their heating bills. These auditors need to record information about the electricity usage of appliances and suggest replacements that would use less energy (thus, saving money).
- Internet not available or the website is down.
- You (the developer) can control the cache duration through your web server’s cache settings, but its not reliable for offline use. Also, you have no control over the user’s browser settings.
- The HTML5 specification is more for browser developers, not web application developers, but it can give you an idea of whats going on.
- The cache manifest file contains instructions for the browser to determine how to cache your pages.
- The CACHE section includes pages you want the browser to cache, even if the user hasn’t browsed to them. Note that pages that reference the manifest file will automatically be cached, but its nice to be explicit and include them. Also note that resources, such as CSS files, javascript files and images, must be referenced in order to be loaded into the cache.
- The NETWORK section is where to include pages that should only be available when a network connection is available.
- The fallback section allows you to reference a web page to display when certain pages are requested and there is no network. You can list specific pages, or use a wild card * to define a fall back page for all non-cached pages. The fallback page is implicitly cached by the browser.
- The cache manifest file is referenced as an attribute on the HTML tag in your pages that “kick off” caching.
- You must associate the “text/cache-manifest” MIME type with the file extension you’re using for the cache manifest file. Typically the file will be named “cache.manifest” but I’m using “manifest.cache” since the “.manifest” file extension is already associated with a different MIME type in IIS 7.Note that you can’t use the ASP.NET Development Server (Cassini) to test this since you can’t set up MIME types.
- Step 3 is where things can go wrong. If there is a problem with ANY part of the manifest file, the whole caching process fails.
- Note that step 3 will fail if the user is currently working offline or has no network connection.Also, its very important to note that pages that have been changed won’t be re-loaded unless the cache manifest file has also changed.
- Note that each browser has a different maximum storage amount for cached pages, and there aren’t currrently any APIs or mechanisms in place for increasing that quota – its up to the user!
- Show a simple site and demonstrate caching. Show debug information in Chrome Developr Tools and javascript events that haven’t been covered in slides.
- That’s great, but what about doing real work offline … instead of just displaying cached pages?The HTML5 spec calls for a flag that indicates whether the user is online, and events that are raised when the network status changes.
- Pretty much the same coverage as AppCache, although webkit based browsers don’t have a “work offline” feature, which means you have to have not network connectivity to change the onLine flag – tough to test when developing against localhost. Also, webkit based browsers won’t update the onLine flag until the page is refreshed (VERIFY!!)
- As you can see, pretty much all major browsers support local and session key/value storage.
- Web SQL Database was part of the HTML5 specification for a SQLite database implementation in the browser, but several browsers have stated that they won’t support it and its currently only supported on WebKit browsers. The Indexed Database API looks more promising as far as future browser support, but it isn’t a viable solution today. Also, there have been lots of concerns about missing features in Indexed Database such as encryption.
- Flash has been the solution for developers who want a local database for a while now with several 3rd party database implementations. Silverlight is a good alternative for .NET developers.
- If you want to work offline with a browser plug-in, you don’t really want to cache a page with the plug-in as content – this doesn’t have any advantage over regular caching. Adobe Flash projects can be created to target the AIR runtime which runs out of the browser, has a native SQLite implementation, and is supported in all modern operating systems.
- Microsoft’s Silverlight Out of Browser (OOB) capabilities are a nice alternative to Adobe AIR for .NET developers and is supported on modern Windows and Mac operating systems. There is no support for *nix operating systems, although there’s a 3rd party implementation called Moonlight developd by Novell’s Mono team. There is currently no local database suppport, but there are open source implementations.
- This demonstration is an ASP.NET MVC web application that allows the user to enter survey results and submit them. There is a form for HTML5 storage and caching, there’s a form for Silverlight in and out of browser, and a page with an AIR installer. All 3 implementations of the survey form post to the save ASP.NET MVC controller action.
- Just like anything sent to the browser in an HTML page, anything stored in local storage, no matter what browser or plug-in is used, is available for people to access. Its also possible that users on machines that are shared by multiple users could access each other’s data. Its important to keep this in mind when developing with these features.
- There are lots of other things you should take into consideration if you need to build an offline capable web application; including error handling, logging, printing, authentication / authorization…If these are a big deal for you, maybe you should develop a thick client instead!