html manifest离线缓存

2026-04-23 11:00:08 1706阅读 0评论

用 HTML Manifest 让网页离线更省心：一份可落地的缓存方案

在移动端网络不稳、用户常需要“先用后下”的场景里，让网页也能像App那样顺畅，是很多开发者追求的目标。用 HTML Manifest 就能为页面搭建一套轻量级的离线缓存体系，它不依赖额外的服务器改动，能直接提升用户体验与容错率。

从“想缓存”到“会缓存”：核心思路

你可能有这样的经历：打开一个需要登录的页面，网络突然断了，提示“加载失败”，只能反复刷新或等网络恢复。有了 Manifest，核心是预先缓存关键资源，让用户在低网速或无网时，也能正常阅读与操作。

关键资源通常包括：主入口 HTML、CSS 样式、JavaScript、图片与字体等。缓存的策略需要分场景：入口优先、按需补充、过期更新。

实战步骤：从配置到生效

1) 在页面中声明 Manifest

在需要缓存的入口 HTML 文件顶部加入 manifest 指向：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离线可用页面</title>
    <link rel="manifest" href="/manifest.json">
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

2) 编写 manifest.json

{
  "name": "离线可用页面",
  "short_name": "离线页",
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "cache_busting": false,
  "scope": "/",
  "declarative_web_app": true,
  "offline_page": {
    "enabled": true,
    "url": "/offline.html"
  },
  "cache": [
    {
      "matches": ["/*"],
      "cache_matching": "exact"
    }
  ],
  "version": "1.0",
  "runtime": [
    {
      "script": "https://example.com/main.js",
      "minify": false
    },
    {
      "script": "https://example.com/style.css",
      "minify": false
    }
  ]
}

注意：manifest.json 的写法以你所用的解析器为准，关键点是提供入口、资源清单与离线兜底页。