Question

我正在尝试测试 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 *设置，如here所述：

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

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

我记得最近看到有关Appcache现在需要https的内容，因为Serviceworker也需要https。我必须在测试环境中设置这个才能在最新的浏览器中工作吗？我可以更改about：config以在普通的http上使用吗？或者我错过了其他什么？

Answer 1

检查以下步骤，以查看代码为何不起作用，然后您的代码可能会起作用。

您正在使用php文件，但清单文件的建议文件扩展名是：“ .appcache”
如果您使用.appcache，则无需设置标题，浏览器将获得text/cache-manifest扩展名的.appcache标题。
第一行CACHE MANIFEST是必需的。因此请先删除php代码。
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>

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

Answer 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}

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

2 个答案: