4

我目前正在学习如何使用后台同步来允许用户在离线使用 Web 应用程序时进行 PUT/POST 更改。

我按照 Jake Archibald 在 Introducing Background Sync中给出的说明进行操作，一切都很好......只要我在在线加载网络应用程序时注册了 Background Sync 。我的意思是：

有效的步骤：

  1. 在线时我打开网络应用程序
  2. 我在网络选项卡中打开离线模式
  3. 我单击了一些注册后台同步的按钮。
  4. 我关闭了离线模式，所以应用程序重新上线。
  5. 触发后台同步。

导致它停止工作的步骤：

即使在上述情况下，如果我执行以下操作，它也会完全停止工作：

  1. 在另一个站点上时，我在网络选项卡中打开了离线模式。
  2. 我导航到我的网络应用程序，感谢服务人员，该应用程序可以离线使用。
  3. 我单击了一些应该注册后台同步的按钮。
  4. 我在网络选项卡中关闭了离线模式。
  5. 什么都没发生。
  6. 在我转到“应用程序”选项卡并取消注册服务工作者并从全新安装重试后，第一步有效，但第二组步骤不断破坏后台同步

代码：

在页面中：

//requesting a one-off sync:
navigator.serviceWorker.ready.then(function (reg) {
  return reg.sync.register('sync-tag');
}).catch(function (e) {
  console.error(e, "System was unable to register for a sync");
});

在服务工作者

self.addEventListener('sync', event => {
  if (event.tag == 'sync-tag') {
    event.waitUntil( doStuff() )
  }
});

更新

当代码工作时，我使用以下代码来跟踪发送到注册的标签：

navigator.serviceWorker.ready.then(function (reg) {
  console.log('before', reg.sync.getTags());
  reg.sync.register('sync-tag');
  console.log('after', reg.sync.getTags());
}).catch(function (e) {
  console.error(e, "System was unable to register for a sync");
});

当使用有效的步骤时，我得到

before: resolved to an empty array
after: resolved to an array with one tag ['sync-tag']

使用导致其停止工作的步骤时：

before: resolved to an array with one tag ['sync-tag']
after: resolved to the same array above

这让我相信同步注册发生了，但服务工作者listening不再存在。而且无论我做什么，比如关闭浏览器选项卡，在线刷新页面，等待一段时间，服务工作者都不会listen再同步事件了。

我知道这取决于浏览器来决定何时进行后台同步，但我只是不明白为什么这不起作用。除非预期的行为是期望用户在线时访问网络应用程序，否则我认为我做错了。

感谢您的耐心等待，我们将不胜感激任何理解如何使后台同步工作的帮助。

4

1 回答 1

2

好吧，我觉得我很愚蠢。浏览器确实是决定何时进行后台同步的浏览器。

我预期的行为是错误的：

  1. 离线时访问应用程序。
  2. 使用后台同步进行 POST/PUT 更改
  3. 重新上线，刷新页面马上看到变化

浏览器实际实现的行为：

在线访问应用程序：

  1. 在线访问应用程序。
  2. 应用程序离线（手动或非手动）
  3. 使用后台同步进行 POST/PUT 更改
  4. 应用上线，刷新
  5. 更改是即时的，因为只要应用上线，同步就会发生。浏览器是否能够检测到从在线到离线再到在线的变化？

离线访问应用程序

  1. 离线时访问应用程序。
  2. POST/PUT 通过后台同步更改。
  3. 应用上线，刷新
  4. 变化不是一蹴而就的。不知何故，浏览器决定不进行同步。
  5. 完全关闭浏览器，返回页面
  6. 浏览器同步。

因此很难知道浏览器何时会执行同步，并且只有在在线访问应用程序时，如果浏览器检测到从离线到在同一会话中在线（不刷新？）

于 2018-08-23T08:42:57.563 回答