我的HTML5应用程序缓存清单正在缓存所有内容。

Question

我的HTML5应用程序缓存清单正在缓存所有内容。

manifestcache-manifesthtml5-appcachemanifest.cache

23

更新:

我发布这个问题时，这个特性还很新，现在我意识到除非通过JavaScript使用，否则不应该这样使用这个特性。但是似乎这种hack对于大多数犯同样错误和误用此功能的初学者来说是一个好的解决方案。如果你想缓存除HTML以外的所有内容，应该使用JS来完成，或者你可以使用下面的解决方案。

我想我的问题归结为：如果引用使用HTML标记的manifest属性引用清单的文件属于主缓存条目，那么如何让动态页面使用该清单。

我的文件看起来像这样：

CACHE MANIFEST

CACHE:
# IMAGES:
/stylesheets/bg.jpg
/stylesheets/cont_bg.png
#and so forth.. 

#EXTERNAL
http://chat.mydomain.com/themes/images/panel_bg.png
http://chat.mydomain.com/themes/images/images_core.png

####################################
#STYLE SHEETS:
/stylesheets/min.css
/stylesheets/css_night.aspx

#####################################
#JAVASCRIPT:
/JAVASCRIPT/header_javascript.js

#EXTERNAL:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

FALLBACK:
/ /offline.php

NETWORK:
*

现在的问题是，一旦我浏览一个不在清单中的页面，我的实际动态php文件（如index.php），当我第一次看到该页面并且没有缓存时，Chrome会执行以下操作：

Adding master entry to Application Cache with manifest http://208.109.248.197/manifest.appcache

Application Cache Downloading event
Application Cache Progress event (0 of 28) 
...
Application Cache Progress event (28 of 28) 
Application Cache NoUpdate event

我一直顺利进行，直到我加载一个页面时，Chrome 崩溃了：

Application Cache UpdateReady event
Adding master entry to Application Cache with manifest http://mydomain.com/manifest.appcache

现在，正如您可以在最后一行中看到的那样，它将index.php添加到我的应用程序缓存中，并且我已通过访问网址：chrome://appcache-internals/ 来验证这一点。

它显示：

Flags   URL Size (headers and data)
Explicit,   http://mydomain/JAVASCRIPT/header_javascript.js 57.5 kB
Master, http://mydomain/home.php 51.2 kB
Master, http://mydomain/index.php   53.5 kB
Master, Fallback,   http://mydomain/offline.php 49.4 kB

在这里，像index.php和home.php这样的文件不应被缓存。如果可能的话，我想告诉它不要缓存任何html扩展名。但是从我所了解的各种RFC中，以下是我学到的：

一个在线的白名单通配符标志，它可以是开放的或阻止的。

The open state indicates that any URL not listed as cached is to be implicitly treated as being in the online whitelist namespaces; the blocking state indicates that URLs not listed explicitly in the manifest are to be treated as unavailable.

我想使用在线白名单通配符中的一个，并将其设置为阻止，但我找不到任何说明或示例。此外，我还阅读了：

zero or more URLs that form the online whitelist namespaces.

These are used as prefix match patterns, and declare URLs for which the user agent will ignore the application cache, instead fetching them normally (i.e. from the network or locale HTTP cache as appropriate).

我也想使用这样的一些模式，但是我发现没有任何文档。为什么没有appcache清单文档，并且我去过的其他网站都没有使用它，因为我的Chrome appcache目录中没有显示？！？

感谢您的时间！

- Neo

3个回答

10

应用缓存（appcache）始终包含在HTML标记中具有manifest属性的页面。

如果您希望页面本身是动态的，您必须通过向NETWORK部分中的服务发出ajax调用来将内容加载到其中。

- Joeri Sebrechts

1

+1 这是一种更好的方法。当我写这个问题时，应用程序缓存是新的，包括我在内的许多人都使用它作为快速缓存解决方案，而不必处理HTTP头文件，我仍然认为如果完全理解，它可以被用作hack的方式，您建议的是使用此技术的正确方式，我的答案是如何在未完全ajax化的动态页面上使用它作为静态内容缓存的hack。 - Neo

@Joeri，如果您有许多路由（例如domain.com/userId），它仍会将该页面保存在appcache中，因此无法正常工作。 - themihai

3

我猜Iframe解决方案行不通。如果你认为文件是从应用程序缓存加载的，请注意，它们来自浏览器缓存。

在开发工具设置中禁用浏览器缓存并查看“网络”。您可以看到，所有元素都将通过网络加载，而不是来自（app）缓存。

- EscapeNetscape

那么你可能没有在你的应用程序缓存清单中指定文件。你看到初始化日志了吗？ - Neo

是的。我将“no-cache”设置为js和css，然后发现它们全部都是从服务器返回的“200”，而不是从缓存中获取的！ - ch271828n

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neo · Accepted Answer

以下是我通过尝试得出的一个技巧:

虽然我还没有找到最终的答案，但从我的经验来看，似乎不应该在每个页面上设置清单(manifest)。我并不确定，但这是我偶然发现的一个技巧。我有一个名为manifest.html的页面，其中包含了清单(manifest)

<html manifest="manifest.appcache">

我了解到，没有这个标签的网页将不会被添加到缓存中，但是如果它们在同一域名下，则仍将继续使用应用程序缓存。因此，如果您在每个页面上包含一个具有此标签的 iframe 的 plain html 页面（即 manifest.html），那么像 Chrome 那样不再输出将不会缓存该页面：

Adding master entry to Application Cache with manifest

但是如果你进入网络选项卡，你会看到它正在使用缓存。

<iframe id='manifest_iframe_hack' 
  style='display: none;' 
  src='temporary_manifest_hack.html'>
</iframe>

临时清单黑客文件的内容：

<!DOCTYPE HTML>
<html lang="en" class="no-js" manifest="manifest.appcache">
    <head>
        <meta charset="utf-8">
        <title>Hack 4 Manifest</title>
    </head>
    <body></body>
</html>