通过 Service Worker 离线缓存全站 SVG 图标实现秒级加载-js教程-PHP中文网

全站SVG图标离线可用的关键在于精准缓存策略：预缓存核心导航、框架级Sprite及静态路径SVG；URL匹配需忽略查询参数并覆盖document/image请求；fetch必须首行respondWith；更新时同步升级CACHE_NAME并在activate中清理旧缓存。

要让全站 svg 图标真正离线可用、秒级加载，关键不在“缓存多少”，而在于“缓存谁、怎么匹配、怎么交付”。service worker 不是万能胶水，它需要精准的资源识别、一致的 url 管理和无延迟的响应链路。

明确哪些 SVG 图标必须进预缓存

不是所有 SVG 都适合 install 阶段预存。优先缓存以下三类：

核心导航图标：如 logo.svg、menu.svg、close.svg、search.svg —— 页面首次渲染即需，缺一不可
框架级图标资源：若使用 Lucide、Feather 或自建 SVG Sprite 文件（如 icons-sprite.svg），必须整文件预缓存
静态路径图标：存放在 /icons/ 目录下、路径固定且无版本参数的 SVG（例如 /icons/home.svg），避免运行时动态拼接导致匹配失败

跳过带查询参数（?v=1.2.3）、哈希后缀（home-abc123.svg）或由 JS 动态生成路径的图标——它们更适合 runtime caching + ignoreSearch 匹配。

URL 匹配必须零误差，否则缓存形同虚设

caches.match() 默认严格比对完整 URL，包括协议、域名、路径、查询参数和大小写。常见失效原因：

页面请求 /icons/user.svg?v=2，但缓存的是 /icons/user.svg
缓存了 /Icons/user.svg（大写 I），而 HTML 中引用的是 /icons/user.svg
SVG Sprite 被内联到 HTML 中，但 fetch 事件没拦截 document 类型请求（event.request.destination === 'document'）

解决办法：

构建时统一图标路径规范，禁用自动加版本参数；或在 cache.addAll() 列表中显式带上相同参数
运行时匹配用 caches.match(request, { ignoreSearch: true })
在 fetch 事件中加判断：if (request.destination === 'image' || request.destination === 'document')，确保 SVG 和含 SVG 的 HTML 都被覆盖

fetch 响应必须第一时间接管，不能留空档

浏览器对 fetch 事件的响应有超时机制。如果 event.respondWith() 调用太晚，或只在部分分支里调用，未命中的请求会退回到网络，失去离线能力。

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

正确写法是：所有 fetch 监听器第一行就写 event.respondWith(...)，内部再做逻辑分发：

self.addEventListener('fetch', event => {
  event.respondWith(
    (async () => {
      const req = event.request;
      // 仅对 SVG 图标和 HTML 页面启用缓存优先
      if (req.destination === 'image' && req.url.endsWith('.svg') ||
          req.destination === 'document') {
        const cached = await caches.match(req, { ignoreSearch: true });
        if (cached) return cached;
      }
      // 兜底走网络，但记得 clone Response 再缓存（如需）
      return fetch(req);
    })()
  );
});