Question

我试图了解HTML5离线缓存的工作原理。我已经阅读了各种教程，它们对清单文件的外观都有微小的变化。我设置了一个包含缓存清单的页面：

CACHE MANIFEST
index.html
Icon.jpg

带有此

的.htaccess文件

AddType text/cache-manifest .manifest

和index.html页面如下：

<!DOCTYPE HTML>
<html manifest="cache.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="Icon.jpg"/>

<script>
cache = window.applicationCache;

cache.onchecking = function()
{
statBar.innerHTML="Status: Checking";
}

cache.ondownloading= function() 
{
statBar.innerHTML="Status: Downloading";
}


cache.oncached = function() 
{
statBar.innerHTML="Status: Cached:";
}

cache.onerror =  function() 
{
statBar.innerHTML='Status: An Error ocurred.';
}

cache.onupdateready= function()
{
statBar.innerHTML='Updated';
}

cache.onprogress= function()
{
statBar.innerHTML = statBar.innerHTML + "Progress!";
}

</script>
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project Page</h1>

<div id="statBar">Status:</div>
<script>
statBar = document.getElementById("statBar");
</script>
</body>
</html>

在FireFox上，它将显示“正在检查”，“下载”，“进度”，然后是“缓存”，但是使用firebug附加组件，它会显示“应用程序缓存中的0项”。此外，状态显示为2（UNCACHED）。如果再次加入，它将保持在检查状态并且状态显示为空闲。

在Safari for iOS上，它将执行“检查下载”，“进度”，然后“出现错误”。如果再次加入也会发生同样的情

在这两种情况下，在离线状态下浏览回到网址都会显示“未找到连接”错误消息。这两种浏览器都是最新版本。

更改清单缓存以包括CACHE：，NETWORK：和FALLBACK：部分也没有效果。使用绝对URL也没有做任何不同的事情。

使用名为Packetyzer的数据包嗅探器程序进行监控，我发现清单文件正在以正确的MIME类型传送到浏览器（在本例中为Firefox）。有没有人知道我可能做错了什么？

这些文件目前托管在http://www.factordice.com/html5

HTML5脱机缓存在不同的浏览器中的工作方式不同，但总是失败

0 个答案: