HTML怎么管理离线缓存图片资源-html教程-PHP中文网

service worker注册失败主因有三：协议非http/https、sw.js 404或禁缓存、同域已有激活sw卡在waiting；install阶段cache.addall()原子性失败致图片全未缓存；fetch事件须用event.request.destination==='image'精准拦截；缓存更新需改url或配合activate中删旧缓存。

html怎么管理离线缓存图片资源

service worker 注册失败，图片根本进不了 cache

浏览器不会自动缓存任何图片——哪怕你写了 <img src="/logo.png">，断网后照样 404。真正起作用的是 service worker 脚本里调用的 caches.open() 和 cache.addAll()。但很多人卡在第一步：navigator.serviceWorker.register('sw.js') 没反应。

常见原因有三个：navigator.serviceWorker 是 undefined（页面没走 http:// 或 https://，比如双击打开 file://）；sw.js 返回 404 或带 Cache-Control: no-store；同域名已有激活中的 SW，新脚本卡在 waiting 状态。验证方式很简单：DevTools → Application → Service Workers，必须看到 “Active” 才算注册成功。

install 阶段 `cache.addAll()` 失败，图片一个都没缓存

cache.addAll() 是原子操作：列表里任意一个 URL fetch 失败（404、跨域、MIME 类型不匹配、响应头禁止缓存），整个缓存就中止，SW 卡在 installing 状态，后续 fetch 事件也不会触发。

路径写相对路径（如 ./images/logo.png），实际解析成 /js/./images/logo.png → 404
清单里写 /images/logo.png，但文件实际叫 logo@2x.png 或大小写不符（Linux 服务器区分大小写）→ 404
服务端对图片返回了 Cache-Control: no-cache 或 no-store → 浏览器拒绝缓存

建议全部用绝对路径（以 / 开头），并在 install 前加 console.log('caching:', urlsToCache)，对关键图片手动 fetch('/images/logo.png').then(r => r.ok ? r : Promise.reject(r)) 校验。

fetch 事件里没拦截图片请求，离线时还是走网络

就算预缓存成功，如果 service worker 的 fetch 事件监听器没写对，浏览器仍会按默认逻辑发网络请求——断网就挂。

关键点在于匹配逻辑：event.request.destination === 'image' 是最稳妥的判断方式，比只看 event.request.url.endsWith('.png') 更可靠（能覆盖 WebP、AVIF、data URL 等）。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

示例代码片段：

self.addEventListener('fetch', event => {
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.match(event.request).then(response => {
        return response || fetch(event.request);
      })
    );
  }
});

注意：这里用了“缓存优先，网络回退”策略。如果图片必须实时（比如用户头像），就得换成“网络优先”，但那就不是离线可用场景了。