Html5 Offline app with angular not working offline

Question

I have an Single Page html5 offline app with angularJs, Breeze and Asp.net MVC. The app is meant to store all the files in the cache and then just work off line. We do have a manifest files that lists all the files that the application needs including all the templates for angular to slot into the main page. To load the templates we are using standard angular routes. The app works just fine when there is a connection to the server, and this is because everytime angular fetches a template, it fetches it from the server even though the file is in the local cache. Once Angular has fetched the template once, if you load the same url again it works fine and loads it from the local cache.

Below is our cache manifest example( I have tried removing the Appendhash)

    CACHE MANIFEST
    # version 0.90
    # @Url.Content("~/views/shared/_LayoutSPA.cshtml").AppendHash(Request)
    # @Url.Content("~/views/portal/Index.cshtml").AppendHash(Request)

    CACHE:
    # AppendHash approach from @@ShirtlessKirk via http://bit.ly/12HlyCD to ensure the content manifest changes any time any page referencing it changes
    Index
    @Url.Content("~/Templates/jobSummaryNotes.html").AppendHash(Request)
@Url.Content("~/Templates/notfound.html").AppendHash(Request)
@Url.Content("~/Templates/orderInstall.html").AppendHash(Request)
@Url.Content("~/Templates/packages.html").AppendHash(Request)
@Url.Content("~/Templates/parties.html").AppendHash(Request)
@Url.Content("~/Templates/party.html").AppendHash(Request)
@Url.Content("~/Templates/property.html").AppendHash(Request)
@Url.Content("~/Templates/profit.html").AppendHash(Request)
@Url.Content("~/Templates/quote.html").AppendHash(Request)
@Url.Content("~/Templates/quotes.html").AppendHash(Request)

I have checked the cache in chrome and all the files etc are there.

below is our standard route config

.config(["$routeProvider", function ($routeProvider) {
    'use strict';

    // default root
    $routeProvider.when("/", {
        controller: "toriga.jobsController",
        templateUrl: "templates/jobs.html"
    });

    $routeProvider.when("/notfound/", {
        templateUrl: "templates/notfound.html"
    });
 $routeProvider.when("/epc/:id", {
        controller: "toriga.epcController",
        templateUrl: "templates/epc.html"
    });

Some of the routes are with the parameters.

We are really confused to why angular does not fetch the template from the application cache and also why once you have visited the page, for example "epc", if you navigate to "epc" again it works as intended and does not go to the server.

Many thanks

Answer 1

Solved,

The problem is that manifest is case-sensitive, hence the address in the angular route should exactly match the entry in the maninfest. so for example // default root

 $routeProvider.when("/", {
        controller: "toriga.jobsController",
        templateUrl: "templates/jobs.html"
    });

Should match manifest entry:

@Url.Content("~/templates/jobs.html")