2

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

所以我在 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请求

IE/projects/2.json

谁能告诉我为什么会这样

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

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

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

4

2 回答 2

0

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

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

于 2013-02-25T22:10:09.693 回答
0

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

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

于 2012-11-12T23:04:05.050 回答