如何简单使用manifest？如何配置manifest实现离线重载仍加载图片？
2026-5-15
如何使用Manifest实现离线图片加载
一、Manifest的基础使用步骤
Manifest是实现PWA离线功能的核心工具之一，快速上手只需要这几步：
创建Manifest配置文件
新建一个名为site.webmanifest的文件（也可以用.appcache后缀，但目前更推荐标准的.webmanifest格式），先填入基础配置内容：{ "name": "我的离线图片站点", "short_name": "离线图片", "start_url": "/", "display": "standalone", "version": "1.0" }在HTML中关联Manifest
在页面的<head>标签里添加一行代码，把Manifest文件和页面绑定：<link rel="manifest" href="/site.webmanifest">注意：本地测试时，尽量用
localhost启动服务，直接打开本地HTML文件可能无法触发离线缓存机制。
二、配置Manifest让离线时图片正常加载
要实现离线后图片仍能显示，核心是把需要缓存的图片资源加入Manifest的缓存清单。针对你的示例场景，具体操作如下：
更新Manifest的缓存清单
在site.webmanifest里添加resources字段，把页面本身和目标图片的URL都加入缓存列表：{ "name": "我的离线图片站点", "short_name": "离线图片", "start_url": "/", "display": "standalone", "version": "1.0", "resources": { "files": [ "/", "https://pbs.twimg.com/profile_images/1811310904/logo100x100_SM_twitter_400x400.jpg" ] } }这里把页面根路径（确保离线能打开页面）和图片URL都纳入缓存，浏览器在线时会预先下载这些资源，离线时直接从本地缓存读取。
处理跨域图片的缓存注意事项
你的图片来自跨域域名，部分浏览器对跨域资源的缓存有额外限制，如果遇到缓存失败，可以尝试：- 将图片下载到自己的服务器，使用同域路径引用（最稳妥的方案）
- 确认图片服务器返回的响应头包含
Cache-Control等允许缓存的字段
触发浏览器更新缓存
当你修改Manifest内容后，想要让浏览器重新下载缓存资源，最简单的方法是修改version字段的值（比如从1.0改成1.1），浏览器检测到Manifest版本变化后，会自动重新缓存所有指定资源。
修改后的示例代码
更新后的HTML需包含Manifest引用，完整代码如下：
<!DOCTYPE html> <html> <head> <link rel="manifest" href="/site.webmanifest"> <style> img { height: 100px; width:100px; } </style> </head> <body> <img src="https://pbs.twimg.com/profile_images/1811310904/logo100x100_SM_twitter_400x400.jpg"> <img src="https://pbs.twimg.com/profile_images/1811310904/logo100x100_SM_twitter_400x400.jpg"> <img src="https://pbs.twimg.com/profile_images/1811310904/logo100x100_SM_twitter_400x400.jpg"> <img src="https://pbs.twimg.com/profile_images/1811310904/logo100x100_SM_twitter_400x400.jpg"> </body> </html>
内容的提问来源于stack exchange，提问作者user5057268
