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

Posted 2023-03-14

技术标签:

【中文标题】我的 HTML5 应用程序缓存清单正在缓存所有内容【英文标题】：My HTML5 Application Cache Manifest is caching everything 【发布时间】：2012-03-06 10:05:32 【问题描述】：

更新：

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

我想我的问题可以归结为：如果使用 HTML 标记的 manifest 属性引用清单的文件属于 MASTER CACHE ENTRIES，您如何让动态页面使用清单。

我的文件如下所示：

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 添加到我的应用程序缓存中，我已经通过访问 url 验证了这一点：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 目录没有显示！？！？

感谢您的宝贵时间！

【问题讨论】：

【参考方案1】：

这是我在玩耍时发现的一个技巧：

我还没有找到最终的答案，但据我所知，清单似乎并不是要在每个页面上设置。我再次不确定，但这是我遇到的一个黑客。我有一个页面，例如 manifest.html 有

<html manifest="manifest.appcache">

我了解到没有此功能的页面不会被添加到缓存中，但是如果它们位于同一域中，它们仍将继续使用应用程序缓存。因此，如果您包含 manifest.html 一个普通的 html 页面，该页面在每个页面的 iframe 中都有它，它不会像 chrome 一样缓存该页面将不再输出：

Adding master entry to Application Cache with manifest

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

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

temporary_manifest_hack.html 的内容：

<!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>

【讨论】：

我明白，我的意思是：你如何在不包括主 html 页面本身的情况下使用应用程序缓存并将其引入浏览器......如果这有意义的话。 @Neo 您可以使用“no-store”缓存指令来提供您不想缓存的主页。你能提供一个工作示例的链接吗？这对我不起作用，我可以看到 appcache 初始化日志消息，但是尽管有缓存，我的 JS 和 CSS 仍在加载。 @Sam 也许对 JS 和 CSS 有一个无缓存标头？初始化时，你看到列表中的 JS 和 CSS 文件了吗？ Chrome 在控制台中显示整个列表。您是否在 appcache.manifest 文件中列出了这些文件？是的，它的实现似乎已经改变，因为在我写这个 Chrome 的时候确实从缓存中加载了文件。【参考方案2】：

appcache 始终包含在 html 标记中包含 manifest 属性的页面。

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

【讨论】：

+1 这是一个更好的方法。当我写这个问题时，应用程序缓存是新的，包括我自己在内的许多人都将它用于快速缓存解决方案，而无需处理 HTTP 标头，我仍然认为如果完全理解它可以用作黑客，你的建议是使用这项技术的正确方法，我的答案是如何将它用作缓存静态内容的黑客，在完全 ajaxified 的动态页面上。 @Joeri 它仍然会将该页面保存在 appcache 中，因此如果您有很多路由（例如 domain.com/userId ），它将无法工作。【参考方案3】：

我猜 Iframe 解决方法不起作用。如果您认为文件是从 appcache 加载的：否。它们来自浏览器缓存。

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

【讨论】：

那你肯定没有在你的appcache清单中指定文件。你看到初始化日志了吗？是的。我给js和css设置no-cache，然后发现都是200 from server, NOT from cache!!

以上是关于我的 HTML5 应用程序缓存清单正在缓存所有内容的主要内容，如果未能解决你的问题，请参考以下文章

如何正确地使在线/离线 Web 应用程序的 HTML5 缓存清单失效？

在 iOS 上使用带有 Phonegap 的 HTML5 缓存清单

如何在 HTML5 缓存清单中指定通配符以加载目录中的所有图像？

HTML5 离线缓存

Android 上带有 Phonegap 的缓存清单的大小限制

移动 Safari 中的 HTML5 离线视频缓存