2

我正在尝试了解 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 上，它会显示 Checking、Downloading、progress，然后是 Cached，但使用 firebug 插件时，它会显示“应用程序缓存中有 0 个项目”。此外，状态显示为 2 (UNCACHED)。如果再次访问，它将保持在 Checking 状态并且状态显示为 Idle。

在 iOS 版 Safari 上，它会检查下载、进度，然后是“发生错误”。如果再次访问，也会发生同样的情况。

在这两种情况下，脱机时浏览回 URL 都会显示“找不到连接”错误消息。两种浏览器都是可用的最新版本。

将清单缓存更改为包括 CACHE:、NETWORK: 和 FALLBACK: 部分也没有效果。使用绝对 URLS 也没有什么不同。

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

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

4

0 回答 0