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

【问题标题】：HTML5 Cache Manifest caching request that is not define in manifest清单中未定义的 HTML5 缓存清单缓存请求
【发布时间】：2012-10-23 22:54:54
【问题描述】：

我正在开发需要缓存某些请求的应用程序

所以我在 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 获取数据

很遗憾，上述代码自原因以来无法正常工作

a) 缓存清单文件也在缓存ajax 请求

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

即/projects/2.json

谁能告诉我为什么会这样

如果将GET 请求修改为POST 请求，即a POST request to/projects/2.jsoninstead of GET，则上述代码可以正常工作

但这不是我想要的任何建议

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

【问题讨论】：

我也面临这个问题不知道是否可以通过post解决谢谢

标签： ruby-on-rails html local-storage html5-appcache

【解决方案1】：

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

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

【讨论】：

我认为这可能是一种选择，但我相信从长远来看它不会起作用，因为问题还必须在 rails 中标记ruby-on-rails /projects/2.json 2 可以替换为任何数字，例如 @ 987654328@ 或/projects/1111.json 尝试设置每个条目都很难且不可能实现
NETWORK 部分中的条目使用前缀匹配，因此如果添加 /projects/，您将匹配所有这些 json URL。

【解决方案2】：

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

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

【讨论】：