Question

我正在处理应用程序，我需要缓存某些

请求

所以我正在使用HTML5缓存

这是我的清单文件

CACHE MANIFEST
# 2d25a26de3a1148a2fa5e534325f84cca2184090174c6ba451451c54f71f52d6
assets/application.js
assets/application.css
assets/glyphicons/png/glyphicons_064_lightbulb.png
assets/jquery-mobile/ajax-loader.gif
assets/jquery-mobile/icons-18-white.png
application.manifest

NETWORK:
/project_show
/application.manifest

现在我在/projects_show页面中的内容看起来像这样

<div data-role="header" class="header">
</div>

<div data-role="content" class="content">
</div>  

<div data-role="footer" class="footer" style="text-align:center">   
</div>  

<script type="text/javascript">
    <%= store_key %>
</script>

<script id="header" type="text/template">
    <h1>Listing of {{ carName   }}</h1>
</script>

<script id="content" type="text/template">
    <span>{{ pageName }}</span>
</script>

<script id="footer" type="text/template">
    <span> CopyRight &copy; {{ user }} </span> 
</script>


<script type="text/javascript">

    $(document).ready(function() {
        if (window.navigator.onLine) {
                $.getJSON('/project/2.json',function(data) {

                   localStorage.setItem("acura",JSON.stringify(data));

                        var carTemplate = $('#header').html();
                        var pageTemplate = $('#content').html();
                        var footerTemplate = $("#footer").html();
                        $('div.header').html(Mustache.to_html(carTemplate, data));
                    $('div.content').html(Mustache.to_html(pageTemplate, data));
                $('div.footer').html(Mustache.to_html(footerTemplate,data));

                    })

      else {
            var data = JSON.parse(localStorage.getItem("acura"))
            var carTemplate = $('#header').html();
                var pageTemplate = $('#content').html();
                var footerTemplate = $("#footer").html();
            $('div.header').html(Mustache.to_html(carTemplate, data));
                $('div.content').html(Mustache.to_html(pageTemplate, data));
                $('div.footer').html(Mustache.to_html(footerTemplate,data));
      }             
    })
</script>

你可以看到这里的想法是用户是否在线从服务器获取json响应，如果没有，则从localStorage

获取数据

不幸的是，上面的代码因为Reason

而无效

a）缓存清单文件也缓存了ajax请求

现在可以看到我没有要求HTML缓存清单缓存json请求

即/projects/2.json

任何人都可以告诉我为什么会如此

如果GET请求修改为POST请求，即a POST request to / projects / 2.json instead of GET

，则上述代码可以正常工作

但这不是我在任何建议中寻找的东西

FYI Manifest确实正确地遵循清单文件，因为我还注意到我的/projects获取缓存，即使未在manifest中定义

Answer 1

尝试将/project/2.json添加到清单的NETWORK部分。然后，应始终从服务器而不是appcache提供对该URL的请求。

关于缓存的/projects页面：您是否将该页面绑定到此appcache（在页面的manifest="..."元素中具有<html>属性）？如果将页面绑定到appcache，则页面本身总是隐式地成为appcache的一部分（作为所谓的“主条目”）。

Answer 2

这也让我疯狂。我发现的工作是添加到清单“”index.html #content“的NETWORK部分。你工作的方式我认为你还需要添加”index.html＃header“和”index.html＃footer ”

我认为发生了什么是index.html被缓存了。 “内容”“标题”和“页脚”是其中的一部分。因此，加载那些部分（或我的情况下的页面）的调用被捕获，并且因为index.html被缓存而没有运行ajax调用。通过将index.html＃content添加到NETWORK部分，它会强制进行调用。

未在清单中定义的HTML5缓存清单缓存请求

2 个答案: