I would like to create application which support offline mode using HTML5 appcache. Before get into MVC offline mode, just read about HTML5 application cache
Steps to create MVC HTML5 Offline application
1) Create new MVC Web project
2) On created Manifest.cshtml add code as required to do cache in browser
- Here i removed layout
- Also set the content type as 'text/cache-manifest', so that browser will understand this file
- CACHE MANIFEST is required syntax for manifest file
- #version added with assembly file name and date. This will help to update cache automatically whenever new build happens
- NETWORK is *
- Under CACHE we can do whatever required. Here JS files, CSS files, Images, CSHTML pages, Other site resources added
- FALLBACK added to logoff, if there is no connection for logoff then it will return error page instead
- Code
3) Include this manifest file path in _Layout.cshtml page html tag section
- Also set the content type as 'text/cache-manifest', so that browser will understand this file
- CACHE MANIFEST is required syntax for manifest file
- #version added with assembly file name and date. This will help to update cache automatically whenever new build happens
- NETWORK is *
- Under CACHE we can do whatever required. Here JS files, CSS files, Images, CSHTML pages, Other site resources added
- FALLBACK added to logoff, if there is no connection for logoff then it will return error page instead
- Code
@{
Layout = null;
}
@{
HttpContext.Current.Response.ContentType = "text/cache-manifest";
}CACHE MANIFEST
#version @System.Reflection.Assembly.GetExecutingAssembly().GetName().Version - @File.GetCreationTime(System.Reflection.Assembly.GetExecutingAssembly().Location).ToString("MM/DD/YYYY")
NETWORK:
*
CACHE:
# JS files
@Url.Content("~/Scripts/jquery-1.10.2.min.js")
# CSS files
@Url.Content("~/Content/bootstrap.min.css")
@Url.Content("~/Content/site.css")
#Images
@*@Url.Content("~/Content/images/logo.png")*@
#CSHTMLPages
@Url.Content("~/Home/Index")
@Url.Content("~/Home/About")
@Url.Content("~/Home/Contact")
#Other Site Resources
@Url.Content("http://fonts.googleapis.com/css?family=Roboto:00,400,700,300")
FALLBACK:
@Url.Content("~/Account/LogOff") @Url.Content("~/Errors/Default.html")
3) Include this manifest file path in _Layout.cshtml page html tag section
4) If you run application we will get error then we should know what is that
5) So we can add appcache.js file under script folder add following code to verify error
- Code
var appCache = window.applicationCache;
appCache.addEventListener('cached', function (event) {
console.log('All files downloaded!');
}, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', function (event) {
console.log('Checking for manifest!');
}, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', function (event) {
console.log('Downloading cache!');
}, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', function (event) {
console.log('An error occurred!');
}, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', function (event) {
console.log('No cache updates!');
}, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', function (event) {
console.log('Manifest cannot be found!');
}, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', function (e) {
console.log('File downloaded!');
}, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', function (e) {
console.log('New cache available!');
//appCache.swapCache();
}, false);
5) So we can add appcache.js file under script folder add following code to verify error
var appCache = window.applicationCache;
appCache.addEventListener('cached', function (event) {
console.log('All files downloaded!');
}, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', function (event) {
console.log('Checking for manifest!');
}, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', function (event) {
console.log('Downloading cache!');
}, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', function (event) {
console.log('An error occurred!');
}, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', function (event) {
console.log('No cache updates!');
}, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', function (event) {
console.log('Manifest cannot be found!');
}, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', function (e) {
console.log('File downloaded!');
}, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', function (e) {
console.log('New cache available!');
//appCache.swapCache();
}, false);
6) Include appcache.js in _layout.cshtml
7) If we run application and check in console of browser, we can see logs of this appcache and thats it.
