Chrome 如何修复网站被无故缓存?

bq3bfh9z  于 2023-11-14  发布在  Go
关注(0)|答案(1)|浏览(209)

目前我有一个网站,我使用node.js作为后端,React.js作为前端。我使用cloudflare,我目前的cloudflare缓存设置是
缓存级别:标准
浏览器缓存TTL:4小时
爬虫提示:打开
Always Online™:开启
开发模式:关闭
我用的是服务人员

const cacheVersion = 2;
const cacheName = `cache-${cacheVersion}`;

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== cacheName) {
            console.log("deleted cache: " + cache);
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll([
        the url endings 
      ]);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      return fetch(event.request).then((response) => {
        if (response && response.status === 200) {
          const responseClone = response.clone();
          caches.open(cacheName).then((cache) => {
            cache.put(event.request, responseClone);
          });
        }
        return response;
      })
    })
  );
});

字符串
我看不出有什么问题,我不相信这是问题,因为我禁用它和问题仍然存在,但它可能是问题。

注意我知道更改是在服务器上,因为当我通过IP访问网站时,它是100%更新的

更多信息:我在node.js中使用express,对于所有文件,除了一些例外,我使用app.use(“/path”,express.static(path)); IDK,如果这会影响它,但我再次尝试连接到IP版本而不是URL,它工作得很好,所以是的.
我尝试了很多不同的东西,首先是cloudflare I:清除该高速缓存,打开开发模式,
在客户端,我清除了所有的网站数据,摆脱了服务工人
在服务器端我重新安装一切都是新的
我期待着网站的更新版本,但我看到的是旧版本。
非常重要的是,当我在一个从未访问过该网站的新浏览器中尝试时,它工作了。这真的让我感到困惑,因为清除所有网站数据不工作吗?
所以我的主要问题是我如何解决这个问题?但也为以后我如何修复我的服务工人正常工作,特别是当我更新网站更新。
谢谢你,谢谢

laximzn5

laximzn51#

尝试将代码添加到公用文件夹中的index.html。这将阻止缓存您的网站。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

字符串
看起来服务工作进程正在积极缓存资源,这有时会导致提供过时的内容。要确保始终从网络获取最新的内容,您可能需要实现具有网络回退的缓存优先策略,或使用类似于以下内容的stale-while-revalidate策略

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open(cacheName).then((cache) => {
      return cache.match(event.request).then((response) => {
        const fetchPromise = fetch(event.request).then((networkResponse) => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      });
    })
  );
});


此外,尝试更改Cloudfare缓存级别,因为它可能会覆盖浏览器缓存
缓存级别:旁路

相关问题