如何同时使用 Web App Manifest 和 Application Cache？答案

【问题标题】：How can I use Web App Manifest and Application Cache at the same time?如何同时使用 Web App Manifest 和 Application Cache？
【发布时间】：2018-09-28 02:51:57
【问题描述】：

我正在尝试构建一个简单的 HTML 页面，可以在离线时启动（在 Android 上，如果这很重要的话）。

我正在使用Web App Manifest 为应用程序命名，以便添加到主屏幕并显示全屏，而无需浏览器镶边。这很有效。

<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="mf.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>

离线时似乎没有缓存。另外，我可以使用application cache 创建一个离线缓存的页面：

<!DOCTYPE html>
<html manifest="mf.appcache">
<head>
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>

但是，当我尝试将这两者结合起来时（这样我就可以拥有一个可以全屏启动的离线缓存页面），Web App Manifest 将被忽略，并且我只能获得第二个示例中的离线行为。

我最终想要的是一个可以添加到主屏幕的单个页面，它可以在完全没有浏览器/OS chrome 的情况下打开全屏，并且可以缓存以供离线使用。仅适用于使用 Chrome 65 的 Android 的解决方案是可以接受的。

【问题讨论】：

标签： html single-page-application html5-appcache web-app-manifest

【解决方案1】：

这是一个有趣的困境！我想知道你是否会更好地使用 <link rel="manifest" href="/manifest.json"> 如谷歌所述。这是他们对Web App Manifest.的建议的链接

Web App Capable 元标记主要用于全屏功能。如果您特别想要缓存，我认为使用 http-equiv="cache-control" 标头标签及其指令更接近您想要完成的任务。特别是因为服务工作者还没有得到全球支持。我在堆栈上找到了关于 HTML 缓存的一个不错的解释："How to set HTTP headers for cache-control."

编辑：another user has pointed out 如果在清单文件中设置了显示，Chrome 将不会使用此标记

【讨论】：

谢谢，我已经按照您的描述尝试了<link rel="manifest" ...>，这是我的第一个示例，也是我全屏工作的方式。我在 Google 的建议中没有看到与离线使用相关的任何其他内容。缓存控制标头可能有效，但我真的希望将页面永久存储，而不仅仅是在可能被丢弃的缓存中。令人沮丧的是，我想要的功能似乎可以单独工作，但不能一起工作。
没问题，认为真正了解的唯一方法是让您的项目下线。 “.appmanifest”文件应该已经明确列出了您希望离线/缓存可用的页面和资源。试试看，让我们知道！

【解决方案2】：

Service Workers 功能提供与已弃用的应用程序缓存相同的功能。

MDN 有一篇关于 Using Service Workers 的文章，我发现它对实现替换应用程序缓存所需的内容非常有帮助。

【讨论】：