Add offline browsing support

Add offline browsing support

HTML5 Offline Mode is a cool feature you can add to your web site to increase the usability of the system. While enabling the system accessible when no network connectivity available, you can also improve the loading time of the site when online. 

Adding this feature is pretty simple but there are few pitfalls you might encounter along the way. Below steps guide you on the process and remind you on possible issues.

1. First you have to add the cache manifest file to your web site root.(File extension : .appcache)

Manifest file: cache.appacache

Lookout: Many articles in web describe the file extension as .manifest. This is incorrect as specification changed later to .appcache.

2.   Add content to cache.appche file. Look below for sample 

CACHE MANIFEST

# 2012-03-26 v3.2.006# change version if you want the browser to get this version.CACHE:content/bootstrap/bootstrap.csscontent/site.css#relative paths are dangerous. App cache.appcache can be requested from pages in different #folder locations in your site/mysite/contacts# could also be a path to MVC controller/mysite/offline.htmlSETTINGS:prefer-online#when user is online, browser avoid using local cache.NETWORK:*http://*#tells the browser to load content from this location for any other resource that not cached. #Use * and http:// both as some browsers use http:// and others *.FALLBACK:/mysite/ /mysite/offline.html
#tells the browser if content under /mysite/ not available, show /mysite/offline.html as a fallback.Make sure to add offline.html to 'cache:'

3.    How it looks in the browser

4.  Add custom logic to offline event 

User navigator.onLine in Javascript to check whether the app is online or offline. For better usability you can add custom message box showing something like ‘This page is not available offline.’ When the user try to access a page in offline mode which is only available when online. (Ex: payment page)

function CheckOnlineStatus() {

       return navigator.onLine;

}

So it's that simple! But lookout for below pitfalls

Pitfall 1

Any error in downloading a resource in  .appcache file will stop updating appcache for the full site. If there is a previous version of cache in the browser application will continue to run with old files!!

Pitfall 2 

Cache key is case sensitive. See below scenario.

html

..

    <link type="text/css" rel="stylesheet" href="/CONTENT/site.css" />

..

cache.appche

…

CACHE:

content/bootstrap/bootstrap.css

content/site.css

…

Since Application Cache is case sensitive site.css request not loading from cache.

Pitfall 3 (For MVC.Net developers)

If IIS virtual folder name set to Upper Case (ie: MYAPP) and you include your scripts with RAZOR @Scripts.Render("~/content/site.css"), the resolve URL will be equivalent to  <link type="text/css" rel="stylesheet" href="/MYSITE/content/site.css" />. You will fall to pitfall 3!

Pitfall 4

Implementation of SETTINGS: varied with browser. It’s not reliable to depend on at this stage. So DON’T DEPEND ON IT.

Pitfall 5   (For MVC.Net developers)

MVC script bundles add cache busting key to the URL when you add bundle resources use  @Scripts.Render("~/bundles/jquery"). Ex:

<script src="/mysite/bundles/jquery?v=oosVy5z3-0WpKZ_P6-Iln819skOH2-zdX3M4roSAQwE1"></script>

       This dynamic key will result in a cache miss.

How to overcome?

1     Approach 1: .appcache file should be dynamically created with every build to have the bundle key also added to the cache entry. Note any changes to the bundle will result in a new key generated by the framework.

Ex:

CACHE:

content/bootstrap/bootstrap.css

content/site.css/mysite/bundles/jquery?v=oosVy5z3-0WpKZ_P6-IAQwE1

2    Approach 2: Simply avoid the key by using ResolveBundleUrl

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery", false)"></script>

Note that ResolveBundleUrl doen not provide some features in @Scripts.Render (ex: avoiding minification in debug mode)