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依頼していないことがわかります

すなわち/projects/2.json

なぜそうなのか誰か教えてくれませんか

リクエストが/projects/2.jsonGETに変更された場合、上記のコードは正常に機能しますPOSTa POST request toinstead of GET

しかし、それは私がどんな提案でも探しているものではありません

参考までに、マニフェストはマニフェスト ファイルに正しく従い/projectsます。manifest

4

2 に答える 2

0

これも私を狂わせていました。私が見つけたのは、マニフェストのNETWORKセクションに「index.html#content」を追加することでした。あなたのやり方では、「index.html#header」と「index.html#footer」も追加する必要があると思います"。

index.html がキャッシュされていると思います。「コンテンツ」「ヘッダー」「フッター」もその一部です。したがって、これらのパーツ (または私の場合はページ) をロードする呼び出しはトラップされ、index.html がキャッシュされるため ajax 呼び出しは実行されません。index.html#content を NETWORK セクションに追加すると、呼び出しが強制されます。

于 2013-02-25T22:10:09.693 に答える
0

マニフェストのセクションに追加/project/2.jsonしてみてください。NETWORK次に、その URL へのリクエストは、appcache からではなく、常にサーバーから提供される必要があります。

ページがキャッシュされることについて/projects: そのページをこの appcache にバインドしますか (ページmanifest="..."の要素に属性を設定することによって<html>)? ページを appcache にバインドすると、ページ自体は常に暗黙的に appcache の一部になります (いわゆる「マスター エントリ」として)。

于 2012-11-12T23:04:05.050 に答える