来自 IDB 而不是缓存的工作箱脱机响应

Question

我正在使用 service worker 构建一个 vueJs 应用程序。我决定使用 Workbox 和 InjestManifest 方法来拥有自己的路线。

在线获取时： 1-用网络回答 2- 将正文写入 IDB（通过 localforage） 3- 发回响应

这里一切正常，sw 拦截 fetch 并返回适当的响应，IDB 包含正确的详细信息。 在线时发送回 fecth 的响应： 响应 {type: "cors", url: "http://localhost:3005/api/events", redirected: false, status: 200, ok: true, ...}

问题是当我离线时。 我的意图是连接到 Locaforage 并检索内容并建立响应。 问题是 Fetch 认为此响应不合适，然后拒绝它。 Console.log 确认 sw 中的 .catch 正在工作，但看起来它发送的响应被拒绝了。 这是我在离线时发送回获取的响应的 console.log； 响应 {type: "default", url: "", redirected: false, status: 200, ok: true, ...}

我不知道 fetch 是否不满意，因为响应的 url 与请求上的不同，但工作箱应该允许响应来自缓存或 fetch 的响应之外的其他响应。

这里是代码

importScripts('localforage.min.js')

localforage.config({
  name: 'Asso-corse'
})
workbox.skipWaiting()
workbox.clientsClaim()

workbox.routing.registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  workbox.strategies.cacheFirst({
    cacheName: 'googleapis',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 30
      })
    ]
  })
)
workbox.routing.registerRoute( new RegExp('http://localhost:3005/api/'), function (event) {
  fetch(event.url)
    .then((response) => {
      var cloneRes = response.clone()
      console.log(cloneRes)
      cloneRes.json()
      .then((body) => {
        localforage.setItem(event.url.pathname, body)
      })
      return response
    })
    .catch(function (error) {
      console.warn(`Constructing a fallback response, due to an error while fetching the real response:, ${error}`)
        localforage.getItem(event.url.pathname)
        .then((res) => {
         let payload = new Response(JSON.stringify(res), { "status" : 200 , 
    "statusText" : "MyCustomResponse!" })
         console.log(payload)
        return payload
        })
  })
    })
workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

我真的被困在那里，因为工作箱上的所有文档都与利用缓存有关。我正在利用 localforage，因为它支持使离线功能正常工作所需的 Promise。

谢谢

Answer 1

您的catch() 处理程序需要返回Response 对象或Response 对象的承诺。

稍微调整一下你的示例代码的格式，你正在做：

.catch(function (error) {
  console.warn(`Constructing a fallback response, due to an error while fetching the real response:, ${error}`)
  localforage.getItem(event.url.pathname).then((res) => {
    let payload = new Response(JSON.stringify(res), { "status" : 200 , "statusText" : "MyCustomResponse!" })
    console.log(payload)
    return payload
  })
})

基于这种格式，我认为更清楚的是，您没有从 catch() 处理程序中返回 Response 或对 Response 的承诺 - 您根本没有返回任何内容。

在您的 localforage.getItem(...) 语句之前添加 return 应该可以解决这个问题：

.catch(function (error) {
  console.warn(`Constructing a fallback response, due to an error while fetching the real response:, ${error}`)
  return localforage.getItem(event.url.pathname).then((res) => {
    let payload = new Response(JSON.stringify(res), { "status" : 200 , "statusText" : "MyCustomResponse!" })
    console.log(payload)
    return payload
  })
})

但是，正如您在原始问题的 cmets 中所述，我认为没有必要使用 IndexedDB 存储这种类型的 URL 可寻址数据。在存储和检索从 HTTP API 获得的 JSON 数据时，您可以只依赖 Cache Storage API，Workbox 默认会愉快地使用它。