如何生成URL并实现PWA离线访问？动态URL缓存问题求助

方案1：改用本地存储管理动态状态，固定URL #

把原本基于页面打开时间生成的动态URL部分，转移到localStorage、sessionStorage或者indexedDB里存储。页面的基础URL保持固定，Service Worker就能正常缓存静态资源，动态时间戳在客户端读取本地存储获取，完全不影响PWA的缓存机制。

方案2：修改Service Worker的缓存匹配规则，忽略动态参数 #

如果必须保留动态URL，可以在Service Worker的fetch事件里，剥离URL中的动态参数后再匹配缓存：

self.addEventListener('fetch', (event) => {
  // 移除URL中的时间戳类动态参数（替换成你实际的参数名）
  const targetUrl = new URL(event.request.url);
  targetUrl.searchParams.delete('timestamp');
  const cleanUrl = targetUrl.toString();

  event.respondWith(
    caches.match(cleanUrl)
      .then(cachedRes => {
        // 优先返回缓存，无缓存则请求网络
        return cachedRes || fetch(event.request);
      })
  );
});

这种方式让Service Worker匹配缓存时忽略动态参数，用统一的静态URL匹配已缓存资源，实现离线访问。

方案3：导航预加载+根页面缓存回退 #

启用Service Worker的导航预加载，同时缓存根页面的静态骨架，离线时直接返回缓存页面，动态内容通过本地存储补充：

// 开启导航预加载
self.addEventListener('activate', (event) => {
  event.waitUntil(
    self.registration.navigationPreload.enable()
  );
});

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match('/') // 匹配根路径的缓存页面
        .then(cachedRes => {
          // 有缓存返回缓存，无缓存用预加载请求网络
          return cachedRes || event.preloadResponse;
        })
    );
  }
});

该方案适合单页应用，确保离线时能加载页面基础结构，动态数据在客户端本地处理。

内容的提问来源于stack exchange，提问作者Oz Abramovich