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.
..
<link type="text/css" rel="stylesheet" href="/CONTENT/site.css" />
..
…
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:
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
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)
