应用程序缓存清单-内容在服务器上更新，但客户端不显示更新的内容

Application cache manifest - Content gets updated on server but client does not show updated content

本文关键字：更新 客户端 显示 服务器 缓存 应用程序      更新时间：2023-09-26

首先，我很抱歉我的英语，我不擅长英语。

  • 如果服务器更新了页面(html)的内容，那么我点击f5按钮在客户端重新加载此页，此页将显示更新后的内容。怎么做呢?
  • 我有一个json文件，这个页面有一个按钮。当我点击按钮时，json文件的内容将显示。如果我编辑了这个json文件，那么我重新加载页面并单击此按钮，将显示编辑后的json文件。怎么做呢?
    • 当我在服务器上更改页面内容时，我使用了缓存清单在客户端重新加载页面，客户端内容没有改变。

我在firefox30上执行它，失败了。但是在Google chrome上很好用。

cache_test.html: 

<!DOCTYPE html>
<html lang="ja" manifest="test.appache">
<!--<html lang="ja" manifest="test.manifest">-->
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <script src="jquery-2.1.1.min.js"></script>
  <script src="test.js"></script>
  <script>
  $(function() {
    updateAppCache();
  });
  </script>
  <title>cache test</title>
</head>
<body>
  Cache Test v15<br>
  <button onClick="loadJSON('msg')">Load Json</button>
  <div id="msg"></div>
  <br>
  <a href="test.html">test.html</a>
  <!--<img src="1.jpg" >--> //content I want to edit, it will show at client
  <!--<img src="2.jpg" >--> //content I want to edit, it will show at client
  <img src="3.jpg" >
  <img src="4.jpg" >
</body>
</html>

. js: 

function loadJSON(idMsg) {
   jQuery.ajax({
       url: 'test.json',
       type: 'GET',
       success: function(data, textStatus, xhr) {
           $('#' + idMsg).text('success to load: ' + JSON.stringify(data));
       },
       error: function(xhr, textStatus, errorThrown) {
           $('#' + idMsg).text('error to load: ' + textStatus);
       }
   });
}
function updateAppCache() {
    // see: http://www.html5rocks.com/ja/tutorials/appcache/beginner/
    console.log('updateAppCache - in');
    var appCache = window.applicationCache;
    // Update AppCache
    appCache.update();
    // After ready to update cache, call swap
    appCache.addEventListener('updateready', function(e) {
        // manifest changed
        if (appCache.status === appCache.UPDATEREADY) {
            appCache.swapCache();
            console.info('Swap cache. AppCache status =' + appCache.status);
            // reload page
            window.location.reload(true);
        } else {
            console.warn('Do not swap cache. AppCache status =' + appCache.status);
        }
    }, false);
}

test.appcache: 

CACHE MANIFEST
# 2014-07-13:v15
# AddType text/cache-manifest .appcache
# Explicitly cached 'master entries'.
CACHE:
cache_test.html
jquery-2.1.1.min.js
test.json
test.js
test.html
#1.jpg    //content i want to save at the application cache at client.      
#2.jpg    //content i want to save at the application cache at client. 
3.jpg
4.jpg
# Resources that require the user to be online.
NETWORK:
FALLBACK:

test.json: 

{ "test":"What's up man!?", "foo":"---------" }

我要编辑的json文件的内容:

{ "test":"What's up man!?", "foo":"I will always love you" }

当服务器上使用缓存的东西(html, image, css, javascript)改变时，你只需要修改请求url来强制它重新加载。例如:

源url为:http://www.some.com/test.html
在修改test.html内容之后，
客户端浏览器中的HTML肯定会完全重新加载。您可以在firebug中查看更改。

相关文章：