我的 appcache 清单测试出了什么问题？

php html https html5-appcache

2022-08-30 21:23:14

我正在尝试测试 Appcache 清单：

<?php

// reference: http://diveintohtml5.info/offline.html

header( "Content-Type: text/cache-manifest" );
header( "Cache-Control: max-age=0, private, must-revalidate" );

?>CACHE MANIFEST

# todo

/cachetest/tryme/vid/missouristate

现在，这似乎在网络检查器中具有正确的标题，并且链接到html文件的顶部：

<!DOCTYPE html>
<html manifest="/cachetest/cache.manifest/index.php" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

但是，没有证据表明这实际上是有效的。如果它正在工作，它不应该显示任何其他项目，除非它在该文件中有一个NETWORK *设置，如下所述：

最后，让我们检查网络部分。此缓存清单中的网络部分也只有一行，即一行仅包含一个字符（*）。此字符在网络部分中具有特殊含义。它被称为“在线白名单通配符标志”。这是一种奇特的说法，只要您有互联网连接，任何不在appcache中的东西仍然可以从原始网址下载。这对于“开放式”脱机 Web 应用程序非常重要。这意味着，当您在线浏览这个假设的离线维基百科时，您的浏览器将正常获取图像和视频以及其他嵌入式资源，即使它们位于不同的域中。（这在大型网站中很常见，即使它们不是脱机 Web 应用程序的一部分。HTML页面在本地生成和提供，而图像和视频则从另一个域的CDN提供。如果没有这个通配符标志，我们假设的离线启用维基百科在你在线时会表现得很奇怪 - 具体来说，它不会加载任何外部托管的图像或视频！

这看起来像离线工作的类似Web应用程序，尽管我不得不怀疑我是否必须在localhost或local-ip上设置https才能让浏览器识别它。

我记得最近看到一些关于Appcache现在需要https的东西，因为Serviceworker也需要https。我必须在测试环境中进行设置才能在最新的浏览器中使用它吗？我可以更改 about：config 以在纯 http 上使用吗？还是我错过了别的东西？

答案 1

检查以下步骤，看看为什么你的代码不起作用，然后也许你的代码会工作。

您正在使用文件，但清单文件的建议文件扩展名是：“.appcache”php
如果你使用，那么不需要设置标题，浏览器将获得扩展的标题。.appcachetext/cache-manifest.appcache
在 manifest 中第一行，是必需的。所以从第一个中删除php代码。CACHE MANIFEST
CACHE MANIFEST部分仅获取JS，CSS，图像等资源。我认为您输入的页面名称不正确。

检查上述步骤后，清单可能会按如下方式准备就绪。

名称将是：index.appcache

CACHE MANIFEST
# todo
/cachetest/images/1.jpg
/cachetest/css/style.css

NETWORK:
/login.php

FALLBACK:
/html/ /cachetest/offline.html

<!DOCTYPE html>
<html manifest="/cachetest/cache.manifest/index.appcache" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

例如，给出了文件列表的名称。

答案 2

你没有做错任何事。

Appcache 在 Firefox 中不起作用。（至少对于我在Firefox 42.0中）

但它确实可以在Chrome中工作（我在46.0.2490.86（最新）上尝试过）。

部分测试页面：
http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/

http://appcache-demo.s3-website-us-east-1.amazonaws.com/with-network/

http://appcache-demo.s3-website-us-east-1.amazonaws.com/offline-iframe/

当然，您可以制作自己的空缓存清单文件并亲自查看。

祝你好运

_{测试页面的来源：http://alistapart.com/article/application-cache-is-a-douchebag}