离线appcache无法正常工作
问题描述:
为什么我的离线应用没有被任何浏览器缓存?离线appcache无法正常工作
我已经在这里创造一个简单的测试:http://design.aqueo.us/test/appcache/
只有两个文件:一个HTML文件加上清单。 (该html文件包含一些JavaScript来显示缓存状态。)检查控制台日志,您会看到它始终显示“缓存状态:未缓存”。另外chrome:// appcache-internals /(在Google Chrome中)不会列出该网站。据我所知,浏览器甚至不会提取清单文件。我已经在多个浏览器中尝试了这一点。
这里的清单:
CACHE MANIFEST
# .
而这里的HTML:
<!doctype html>
<html>
<head manifest="offline.appcache">
<meta charset="utf-8">
<title>Appcache test</title>
<script>
(function() {
var webappCache = window.applicationCache;
function loaded()
{
var h1El = document.querySelector("h1");
var connectionStatus = ((navigator.onLine) ? 'online' : 'offline');
h1El.textContent = h1El.textContent + " - currently: " + connectionStatus;
switch(webappCache.status)
{
case 0:
console.log("Cache status: Uncached");
break;
case 1:
console.log("Cache status: Idle");
break;
case 2:
console.log("Cache status: Checking");
break;
case 3:
console.log("Cache status: Downloading");
break;
case 4:
console.log("Cache status: Updateready");
break;
case 5:
console.log("Cache status: Obsolete");
break;
}
}
function updateCache()
{
webappCache.swapCache();
console.log("Cache has been updated due to a change found in the manifest");
}
function errorCache()
{
console.log("You're either offline or something has gone horribly wrong.");
}
window.addEventListener("load", loaded, false);
webappCache.addEventListener("updateready", updateCache, false);
webappCache.addEventListener("error", errorCache, false);
})();
</script>
</head>
<body>
<h1>Appcache Test</h1>
</body>
</html>
答
难以置信!在完成所有的调试和头发拉出之后,我在HEAD元素上显示了manifest属性,而不是HTML元素!所有的愚蠢的错误!
有问题的链接现在按预期工作。
更新:只是为了让事情很明显,这里是HTML文件的顶部应该是什么样子:
<!doctype html>
<html manifest="offline.appcache">
<head>
哦。我的。 Goooddddd!我觉得自己像个白痴,因为我只是在过去的一个小时里为此工作。 – Sirens 2014-09-04 01:17:05