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

Question

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

我正在使用 Web App Manifest 为应用程序命名，以便添加到主屏幕并在没有浏览器的情况下全屏显示 chrome。这么多有效。

<!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 应用程序清单将被忽略，我只会得到第二个示例中的离线行为。

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

Answer 1

这是一个有趣的难题！我想知道你是否会更好地使用 <link rel="manifest" href="/manifest.json"> 如 Google 所述。这是他们对 Web App Manifest.

的建议 link

Web App Capable 元标记主要用于全屏功能。如果您想要专门缓存，我认为使用 http-equiv="cache-control" header 标记及其指令更接近您要实现的目标。特别是因为 Service workers 还没有在全球范围内得到支持。我在堆栈上找到了关于 HTML 缓存的合理解释："How to set HTTP headers for cache-control."

编辑：another user has pointed out 如果在清单文件中设置显示，Chrome 将不会接受此标签

Answer 2

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

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

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

How can I use Web App Manifest and Application Cache at the same time?

html

single-page-application

html5-appcache

web-app-manifest