1

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

“/photoUpload”的工作箱请求已添加到后台同步队列“PhotoQueue”

工作箱使用 NetworkOnly 响应“/photoUpload”

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

工作箱后台同步重播没有后台同步事件

'/photoUpload' 的工作箱请求已在队列 'PhotoQueue' 中重播

工作箱队列'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 请求。

4

1 回答 1

2

Firefox 本身不支持后台同步 API。workbox-background-sync将尝试通过在服务工作者启动时自动重试队列来“填充”这个缺失的 API。

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

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

于 2020-12-04T18:47:21.880 回答