javascript - 连接恢复时如何使用服务工作者（Workbox）处理 AJAX 响应

Question

我正在使用 Vue CLI 3 PWA 插件构建 PWA，但我不确定如何处理离线时进行的 AJAX 调用的响应。

我所拥有的基本上是来自 Workbox 文档的示例代码......

// service-worker.js
const queue = new workbox.backgroundSync.Queue('CR_OfflineQueue')
self.addEventListener('fetch', (event) => {
  const promiseChain = fetch(event.request.clone())
    .catch((err) => {
      console.log('Queued Event:', event.request)
      return queue.addRequest(event.request)
    })
  event.waitUntil(promiseChain)
})

AJAX 只是一个基本get()的 Axios，在加载存储和测试突变时调用

// store.js
getUsername () {
    return axios.get(
        'http://localhost:8005/username/',
        {
            responseType: 'json',
            withCredentials: true
        })
}

const store = new Vuex.Store({
    state: {
        username: null
    },
    mutations: {
        test_api (state) {
            getUsername()
            .then((res) => {
                state.username = res.username
            })
            .catch((err) => {
                console.error('getUsername:', err)
            })
        }
    }
})

该请求已成功重播，但我不知道如何处理它，而且我无法找到使用workbox.backgroundSync.Queue.

就getUsername()目前而言，请求失败了，但是我如何让调用函数从中断的地方继续？

我认为不需要定期检查队列中的请求以“手动”重新触发（而不是通过自动重播）。我将如何使用队列类从重播请求中获取结果并设置用户名属性？

标签： javascriptvue.jsservice-workerworkboxbackground-sync