PWA 服务工作者使用内容类型 application/json 获取图像

如何解决PWA 服务工作者使用内容类型 application/json 获取图像

从服务器获取图像时我有一些非常奇怪的行为

<img src="item.urlPath" />

当我将新图像从 PWA 上传到服务器时会发生这种情况。我正在使用 graphql 订阅（websocket），因此当图像上传完成后，记录将使用新的 urlPath 进行更新，并且属于该记录的 img 标记将被刷新。

/public/123.png gets overwritten by 
/public/345.png

其他客户端总是在正确下载新图像的同时获得路径更新。然而，上传新图片的客户端最终会得到一个新的空图片。

这是 service-worker 缓存的屏幕截图。在最后一行 (135) 上，您可以看到图像缓存时没有二进制数据：

response-type: cors
content-type: application/json (instead of image/jpeg)

我不明白为什么 service-worker 想要使用内容类型 application/json 获取新图像。

当我从应用程序中删除 service-worker 时，一切都按预期工作。

service-worker.js

const VERSION = "0.0.026"
const filesToCache = ["/"]

const staticCacheName = "cache-v" + VERSION
self.addEventListener("install",(event) => {
  console.log("service-worker.js INSTALL (create cache)")
  // insert new cache
  event.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      return cache.addAll(filesToCache)
    })
  )

  console.log("waiting to update")
})

addEventListener("message",(messageEvent) => {
  if (messageEvent.data === "skipwaiting") {
    return skipwaiting()
  }
})

// triggered when service-worker has changed (replace old with new one)
self.addEventListener("activate",(event) => {
  console.log("serviceworker.js ACTIVATE (remove old cache")

  const cacheKeepList = [staticCacheName]

  // remove old cache
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheKeepList.indexOf(cacheName) === -1) {
            return caches.delete(cacheName)
          }
        })
      )
    })
  )
})

self.addEventListener("fetch",(event) => {
  console.log("service-worker.js FETCH event for ",event.request.url)
  // check if the request already exists in the cache
  event.respondWith(
    caches
      .match(event.request) // if exist in cache
      .then((response) => {
        // CACHED
        if (response) {
          console.log("Found ",event.request.url," in cache")
          return response //cached
        }
        // else start network request
        console.log("Network request for ",event.request.url)
        return fetch(event.request).then((response) => {
          // 404
          if (response.status === 404) {
            return caches.match("pages/404.html")
          }
          // else,add response to the cache
          return caches.open(staticCacheName).then((cache) => {
            cache.put(event.request.url,response.clone())
            return response // from network and just cached
          })
        })
      })

      .catch((error) => {
        // Respond with custom offline page
        console.log("Error,",error)
        return caches.match("pages/offline.html")
      })
  )
})