1

在我的服务人员中，我正在像这样实现与工作箱的后台同步

workbox.routing.registerRoute(
    options => options.url.pathname.startsWith('/api/'),
    new workbox.strategies.NetworkOnly({
        plugins: [
            new workbox.backgroundSync.Plugin('myQueueName', {
                maxRetentionTime: 14 * 24 * 60,
                onSync() {
                    showNotification('background sync ran.');
                }
            })]
    }),
    'POST'
);

当我通过禁用网络访问、执行请求然后重新打开网络访问来测试行为时，我看到了在 中触发的通知showNotification，但我没有看到实际的请求。

奇怪的是，当我删除onSync回调时，我现在看到了请求，但显然，我没有创建任何通知。如何获得回调并重播实际请求？

4

1 回答 1

2

我查看了 workbox 的实现，发现了以下代码：

class Queue {
  ...

  constructor(name, {onSync, maxRetentionTime} = {}) {
    ...
    this._onSync = onSync || this.replayRequests;
...

再往下

_addSyncListener() {
    if ('sync' in registration) {
      self.addEventListener('sync', (event) => {
          ...

          const syncComplete = async () => {
            this._syncInProgress = true;

            let syncError;
            try {
              await this._onSync({queue: this});

事实证明，当您不传递onSync回调时，默认将调用replayRequests. 如果你通过了一个，你必须自己做，例如像这样

workbox.routing.registerRoute(
    options => options.url.pathname.startsWith('/api/'),
    new workbox.strategies.NetworkOnly({
        plugins: [
            new workbox.backgroundSync.Plugin('myQueueName', {
                maxRetentionTime: 14 * 24 * 60,
                onSync({ queue }) {
                    // !!! important call here !!!
                    queue.replayRequests(); 
                    showNotification('background sync ran.');
                }
            })]
    }),
    'POST'
);
于 2020-02-07T16:59:53.387 回答