具有角度的Html5离线应用程序无法离线工作答案

【问题标题】：Html5 Offline app with angular not working offline具有角度的Html5离线应用程序无法离线工作
【发布时间】：2015-01-09 09:02:01
【问题描述】：

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

以下是我们的缓存清单示例（我已尝试删除 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)

我已经检查了 chrome 中的缓存，所有文件等都在那里。

下面是我们的标准路由配置

.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"
    });

有些路由是带参数的。

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

非常感谢

【问题讨论】：

标签： html angularjs caching html5-appcache application-cache

【解决方案1】：

解决了，

问题在于清单是区分大小写的，因此角度路由中的地址应该与清单中的条目完全匹配。所以例如 // 默认根

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

应该匹配清单条目：

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

【讨论】：