Question

我正在与服务工作者一起构建一个vueJs应用程序。我决定使用带有InjestManifest方法的Workbox来拥有自己的路线。

在线时获取： 1-回答网络向IDB转移身体（通过localforage） 3-发送回复

这里的一切工作都很完美，sw拦截了fetch，并以适当的响应回来，IDB包含了rigth详细信息。在线时回复fecth的回复：响应{type：“cors”，url：“http://localhost:3005/api/events”，重定向：false，状态：200，ok：true，...}

问题出在我离线的时候。我的意图是连接到Locaforage并检索内容并构建响应。问题是Fetch不认为这种反应是合适的，然后拒绝它。 Console.log确认sw中的.catch正在运行，但看起来它发送的响应被拒绝了。这是我发送回到离线时获取的响应的console.log; 响应{type：“default”，url：“”，重定向：false，状态：200，ok：true，...}

我不知道fetch是不是很高兴，因为repsonse的url与请求中的url不同，但是workbox应该允许响应来自缓存或fetch的其他resposnes。

这是代码

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，因为它支持使离线功能正常工作所需的承诺。

由于

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
  })
})

根据该格式，我认为您在Response处理程序中未返回Response或catch()的承诺更清楚 - 你根本没有归还任何东西。

在return声明之前添加localforage.getItem(...)应该注意：

.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
  })
})

但是，正如您对原始问题的评论中所提到的，我不认为使用IndexedDB存储此类URL可寻址数据是必要的。在存储和检索从HTTP API获取的JSON数据时，您可以依赖默认情况下Workbox很乐意使用的Cache Storage API。

来自IDB而不是缓存的工作箱离线响应

1 个答案: