App Shell结构加载后动态内容无法更新怎么办？

东方玉哲提问于 2026-02-19 10:21:38 阅读 61

移动

我在做PWA的App Shell结构时遇到问题，shell骨架加载成功了，但后续通过fetch获取的数据内容始终不更新。我用Cache.match缓存了shell页面，但数据接口返回的是旧数据，明明后端已经改过了。

尝试过在service worker里这样处理数据请求：


self.addEventListener('fetch', function(event) {
  if (event.request.url.includes('/api/data')) {
    event.respondWith(
      caches.match(event.request)
        .then(cacheRes => cacheRes || fetch(event.request))
    );
  }
});

清除浏览器缓存也没用，控制台没报错，就是显示旧数据。是不是缓存策略哪里写错了？怎么让动态数据能正常更新呢？

PWA移动

我来解答赞 2 收藏

反馈

1 条解答

Code°书錦 Lv1

问题出在缓存优先策略上，动态数据接口不能直接用 caches.match，得强制走网络请求。改一下代码逻辑：

self.addEventListener('fetch', function(event) {

  if (event.request.url.includes('/api/data')) {

    event.respondWith(

      fetch(event.request).catch(() => caches.match(event.request))

    );

  }

});

先走网络，失败再回退到缓存，数据就能正常更新了。别忘了在后端给接口加个合适的 Cache-Control 响应头，比如 no-cache 或者短时间过期，避免被强缓存坑了。

2026-02-19 11:02