如何同时使用Web App Manifest与Application Cache实现Android离线单页应用

没问题，这俩技术完全可以配合使用来实现你的离线单页应用需求，我给你一步步拆解怎么做：

1. 给HTML添加Application Cache引用 #

在你现有HTML的<html>标签上加上manifest属性，指向专门的缓存清单文件（注意别和Web App Manifest的文件名搞混，比如我这里命名为app.appcache）：

<!DOCTYPE html>
<html manifest="app.appcache">
<head>
  <link rel="manifest" href="mf.webmanifest">
  <meta name="mobile-web-app-capable" content="yes">
</head>
<body>
  <!-- 你的页面内容 -->
</body>
</html>

2. 创建Application Cache清单文件（app.appcache） #

这个文件是离线缓存的核心，用来定义哪些资源要缓存、哪些必须联网、离线时的 fallback 逻辑。下面是适配你单页应用的基础模板：

CACHE MANIFEST
# 版本号：v1.0.0（更新缓存时修改这个值，浏览器会自动重新下载所有缓存资源）

# 要缓存的核心资源（务必包含主HTML文件，还有你需要离线访问的CSS、JS、图片等）
CACHE:
index.html
# 示例：如果有其他资源就列在这里
# styles.css
# app.js
# icon.png

# 永远需要联网访问的资源（可选，根据你的需求添加）
NETWORK:
*  # 星号表示除了CACHE列表里的资源，其他都需要联网请求

# 离线时无法访问资源的 fallback 页面（可选，比如离线提示页）
FALLBACK:
# /offline.html

关键注意点： #

• 文件第一行必须是CACHE MANIFEST，不能写错
• 用#开头写注释，修改版本号是触发缓存更新的最简单方式（比如把v1.0.0改成v1.0.1）
• 一定要把主HTML文件index.html加到CACHE列表里，不然离线时连页面都加载不了

3. 服务器配置（不能忽略） #

很多服务器默认不会正确识别.appcache文件的MIME类型，你需要确保服务器返回的Content-Type是text/cache-manifest：

• 如果你用Apache，在.htaccess里添加：AddType text/cache-manifest .appcache
• 如果你用Nginx，在配置里添加：types { text/cache-manifest appcache; }

4. 测试离线功能 #

完成上面的步骤后，按下面的流程验证：

1. 先在线访问你的页面，让浏览器下载并缓存所有指定资源
2. 把设备切换到离线模式（比如开启飞行模式）
3. 从主屏启动你的Web App，应该就能正常加载了

额外小提醒 #

• Application Cache是比较成熟的旧技术，现在更推荐用Service Worker做离线缓存，但如果你的目标Android设备只需要基础WebView支持，它完全够用
• 缓存更新后，用户需要刷新页面或重新打开App才能加载新资源，你可以在JS里监听updateready事件来主动提示用户更新

内容的提问来源于stack exchange，提问作者Greg Hewgill