没有后台同步事件的后台同步重播

Question

我是服务人员的新手，正在尝试开发一个来处理背景图片上传。我正在使用 Workbox 和 firefox 进行测试。 Service Worker 已正确加载和注册，每当我尝试离线上传图像时，这些日志都会出现在控制台中：

workbox“/photoUpload”请求已添加到后台同步队列'PhotoQueue'

workbox 使用 NetworkOnly 响应“/photoUpload”

在我上线前的几秒钟后，日志中打印了以下内容，并且照片没有上传到服务器：

workbox 后台同步重播，无后台同步事件

workbox 对“/photoUpload”的请求已在队列中重播 'PhotoQueue'

workbox 队列 'PhotoQueue' 中的所有请求已成功重放；队列现在是空的！

这是我的 serviceWorker.js:

const showNotification = () => {
  self.registration.showNotification('Post Sent', {
    body: 'You are back online and your post was successfully sent!',
  });
};


const bgSyncPlugin = new workbox.backgroundSync.Plugin('PhotoQueue', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours  

  callbacks: {
    queueDidReplay: showNotification
  }
});


workbox.routing.registerRoute(
  new RegExp('/photoUpload'),
  new workbox.strategies.NetworkOnly({
    plugins: [
      bgSyncPlugin
    ]
  }),
  'POST'
);

有什么方法可以触发后台同步事件吗？为什么工作箱在图像上传到服务器之前从队列中删除 POST 请求。

Answer 1

Firefox 不支持 Background Sync API natively. workbox-background-sync will attempt to "polyfill" this missing API 服务工作者启动时自动重试队列。

Chrome 允许您通过其 DevTools 触发后台同步事件，但如前所述，Firefox 不支持。在 Firefox 中使用 DevTools 没有强制服务工作者停止然后重新开始的编程方式（据我所知）。

您确定照片没有上传到服务器吗？您是否在 Firefox 的 DevTools 的网络面板中看到与上传尝试相对应的任何内容？

没有后台同步事件的后台同步重播

Background sync replaying without background sync event

firefox

service-worker

workbox

background-sync