автономный ответ рабочего стола от IDB вместо кеша - PullRequest
Новая
       8

автономный ответ рабочего стола от IDB вместо кеша

0 голосов
/ 06 июня 2018

Я создаю приложение vueJs с работником сервиса.Я решил использовать Workbox с методом InjestManifest, чтобы иметь свои собственные маршруты.

при извлечении при подключении к Интернету: 1 - ответ с сетью 2 - тело сообщения в IDB (через localforage) 3 - отправить ответ

здесь все работает отлично, sw перехватывает выборку и возвращается с подходящим ответом, IDB содержит подробности.ответ отправляется обратно в fecth, когда он-лайн: Response {тип: "cors", URL: "http://localhost:3005/api/events", перенаправлен: false, статус: 200, ok: true,…}

проблема возникает, когда яперейти в автономный режим. Идентификатор моего намерения подключиться к Locaforage, получить содержимое и создать ответ. Проблема заключается в том, что этот ответ не считается подходящим для Fetch, который затем отклоняет его. Console.log подтверждает, что .catch в sw работает, нопохоже, что ответ, который он отправляет, отклонен. Вот console.log ответа, который я отправляю обратно для извлечения в автономном режиме; Response {type: "default", url: "", redirected: false, status: 200, ok: true,…}

Я не знаю, является ли выборка неудовлетворительной, поскольку URL-адрес ответа не совпадает с URL-адресом запроса, но предполагается, что рабочий ящик позволяет отвечать с другими ответами, отличными от поступающих из кэшаили получите.

вот код 

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, поскольку он поддерживает обещания, и это то, что требуется для работы автономных возможностей.

Спасибо

1 Ответ

0 голосов
/ 06 июня 2018

Ваш обработчик 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-адресуемых данных необходимо.Вы можете просто положиться на Cache Storage API, который Workbox с радостью будет использовать по умолчанию при хранении и получении данных JSON, полученных из HTTP API.

...