HTML5 AppCache with MVC bundles


HTML5 has many handy additions and I recently had the opportunity to use the Appcache Manifest. This feature enables your site to work offline which is particularly useful for mobile orientated sites as users may not always have a reliable 'net connection.

The following guide goes through the approach I took for getting it working via .Net's MVC framework.

Prep the HTML tag

On the page you want to have a manifest for, add the following:

<html lang="en" manifest="/AppCache/AppManifest">

This will tell the browser to look for the appcache manifest.

Setup the Model

We don't need many properties on our Model for the manifest generation. The following will do
public class AppCacheModel
    {
        public string AssemblyVersion { get; set; }
        public List< string> CacheCollection { get; set; }
    }
  • An assembly version which will help update the manifest file contents after every build
  • A CacheCollection list of urls to add to the cache

Add a view

You will need to set various headers to get the manifest file to work correctly. In particular, set the MIME content type to "text/cache-manifest" and set the cache headers so that the manifest never caches.
@model MyWebsite.Models. AppCacheModel
@{
    Layout = null;
    Response.ContentType = "text/cache-manifest";
    Response.Cache.SetCacheability( HttpCacheability.NoCache);
    Response.Cache.SetExpires( DateTime.MinValue);
}CACHE MANIFEST
# Server Assembly Version: @ Model.AssemblyVersion
NETWORK:
*
CACHE:
@foreach (string cacheItem in Model.CacheCollection)
{
    @ cacheItem
}

Instead of hard-coding the individual assets in the Cache section, we are going to get the controller to add them in for us...

Code up the Controller

The controller populates the model with:
  • the assembly version
  • the links to the various assets to be cached. 
The code handles MVC Bundles and also generates a list of asset urls from target folders. If the assets are in a CDN bucket somewhere, you can also provide the link to the CDN.

public class AppCacheController : Controller
    {
        public ActionResult AppManifest()
        {
            // Build the model
            var model = new AppCacheModel();

            model.AssemblyVersion = GetType().Assembly.GetName().Version.ToString();
            model.CacheCollection = new List< string>();
            model.CacheCollection.Add(WriteBundle( "~/bundles/jquery"));
            model.CacheCollection.Add(WriteBundle( "~/bundles/site"));
            model.CacheCollection.Add(GetPhysicalFilesToCache( "~/images", "*.jpg" , "http://cdn.eoinclayton.net/website" ));
            model.CacheCollection.Add(GetPhysicalFilesToCache( "~/images", "*.png" , "http://cdn.eoinclayton.net/website" ));
            model.CacheCollection.Add(GetPhysicalFilesToCache( "~/css", "style*.css", string .Empty));

            return View(model);
        }

        private string WriteBundle( string virtualPath)
        {
            var bundleString = new StringBuilder();
            bundleString.AppendLine( Scripts.Url(virtualPath).ToString());
            return bundleString.ToString();
        }

        private string GetPhysicalFilesToCache( string relativeFolderToAssets, string fileTypes, string cdnBucket)
        {
            var outputString = new StringBuilder();
            var folder = new DirectoryInfo(Server.MapPath(relativeFolderToAssets));
            foreach ( FileInfo file in folder.GetFiles(fileTypes))
            {
                string location = ! String.IsNullOrEmpty(cdnBucket) ? cdnBucket : relativeFolderToAssets;
                string outputFileName = (location + "/" + file).Replace("~" , string.Empty);
                outputString.AppendLine(outputFileName);
            }
            return outputString.ToString();
        }
    }


How to test

1. Open your app/site in Firefox
2. Once it is loaded, close down Firefox
3. Re-open and set Firefox to Offline mode (File -> Offline)
4. Hit your app/site. Even though you are offline, it should still work

You can follow a similar approach on your device, just use Airplane mode instead of Offline mode.

Things to watch out for

  1. Do NOT cache the manifest file! Just don't do it. If you do, your site/app may never update for your clients...!
  2. Refrain from using the "No-Store" response header on the manifest file. The offline site continued to work as expected in Chrome, but in Firefox the entire site stopped working offline...
  3. Use Chrome's Javascript Console (Tools -> Javascript Console) to see if the manifest is being loaded correctly. It will give a breakdown for each item being cached and will tell you, for example, if you try to cache a non-existing asset
  4. To deactivate the appcache manifest, just removing it from the HTML tag is not enough. My site stopped updating entirely when I did this. You will also need to remove the manifest url/view.
  5. You do have a additional bucket to store data known as the 'Local Storage' (http://diveintohtml5.info/storage.html)
  6. There are also optional Javascript events to listen to. This handy Stackoverflow post goes through what the different events do: http://stackoverflow.com/a/20045644

Popular posts from this blog

Splitting a polygon using SQL Server Spatial queries

Image
A recent project involved drawing regions on a map of a country using the Bing Maps Silverlight control . The user could zoom in to a suburb and draw a region (polygon) around an area on the map. Another feature, and hence the purpose of this blog post, involved enabling a user to draw a line through a region (polygon) and split the region in two: how was that splitting done? Note: you will probably need some database experience and ideally some Bing/Google Maps experience for this to make sense A quick intro to SQL Server Spatial queries SQL Server 2008 introduced support for geo-spatial data . The two new spatial data types are: Geometry: supports flat data surfaces. The following will create a polygon and a line and you can see that our resulting rectangle and line are straight: DECLARE @Geometry GEOMETRY = 'POLYGON((10 10, 40 10, 40 40, 10 40, 10 10))' DECLARE @Linestring GEOMETRY = 'LINESTRING(5 5, 50 50)' SELECT @Geometry SELECT @Linestr
Read more

Setting up SourceTree, BitBucket, SSH with a proxy on Windows

Image
When using SourceTree to connect to Bitbucket with an SSH key through a proxy server, there are a number of steps to follow... SourceTree setup 1. Open SourceTree, goto Tools and select 'Create or Import SSH Keys' 2. A dialog will open up. Click Generate to generate a public private key pair:   Provide a suitable passphrase and save both the public and private keys 3. In your system tray, right click on Pageant (PuTTY authentication agent) and select "Add Key"   Select the private key you created in step 2 Proxy Setup with Putty 1. Setup your HTTP Proxy settings in Putty Click on your Start button and search for Putty When Putty comes up goto the Session Category 'Default Settings' and then Load Goto the Proxy category and add in the proxy settings, making sure to select the right proxy type Go back to the Session Category and save the updates to the Default Settings   Bitbucket setup 1. Goto BitBucket, navigate to "Your Acc
Read more

MVC HTTP Headers for CDN caching

Image
On a recent project I added upgraded our systems to use a Content Delivery Network (CDN). The project supplied content to users and we wanted to offload the 'heavy-lifting' of the content supply away from our PROD server onto a more robust delivery network. The mobile clients would request the content from the CDN. If the CDN hadn't cached the content yet, it would grab it from our PROD server, cache it, and respond back to the clients. For this caching to work, though, some HTTP Header magic was required. Which headers should you watch out for? Cache control should be public For the CDN to cache the content on behalf of your origin server, set the Cache-control=public Expires Date To stop the CDN regularly requested the same static content from your PROD server, set the Expires-Date setting to be in the far future (e.g. > 1 year)  Vary  Watch out for the 'Vary' header. MVC3 had initially defaulted to adding the "vary=*" http head
Read more