Html5离线应用程序，角度无法脱机工作

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.

我有一个单页html5离线应用程序与angularJs,Breeze和Asp.net MVC。该应用程序旨在将所有文件存储在缓存中,然后离线工作。我们有一个清单文件,列出了应用程序所需的所有文件,包括用于插入主页的角度的所有模板。要加载模板,我们使用标准角度路径。当与服务器建立连接时,应用程序工作正常,这是因为每次角度提取模板时,即使文件位于本地缓存中,它也会从服务器获取模板。一旦Angular获取模板一次,如果再次加载相同的URL,它可以正常工作并从本地缓存加载它。

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

下面是我们的缓存清单示例(我试过删除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.

我已经检查了chrome中的缓存以及所有文件等。

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.

我们真的很困惑为什么angular不从应用程序缓存中获取模板,以及为什么一旦你访问了页面,例如“epc”,如果你再次导航到“epc”它按预期工作,不会去服务器。

Many thanks

1 个解决方案

#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

问题是清单是区分大小写的,因此角度路径中的地址应与maninfest中的条目完全匹配。所以例如//默认root

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

Should match manifest entry:

应该匹配清单条目:

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

#1