在PWA中联机(wifi打开)时，后台同步代码无法自动工作

Question

我是PWA的新手，一直在使用firebase控制台数据库测试我的PWA项目。在离线时，当我提交我的帖子数据时，我有代码将帖子数据保存在indexedDB中，以便稍后在有WiFi(在线)时保存。它确实在找不到WiFi时将数据保存在indexedDB中，但当我打开我的WiFi时，它不会实时发布我的数据。当我在wifi (在线)上提交新的post数据时，后台同步代码会实时发布来自indexedDB的新post数据。但我希望我的后台同步代码在WiFi打开(离线后)时自动发布。

下面是我的后台同步服务工作者代码：

self.addEventListener('sync', function(event) {
  console.log('Background syncing...', event);
  if (event.tag === 'sync-new-posts') {
    console.log('Syncing new Posts...');
    event.waitUntil(
      readAllData('sync-posts') // function to read all saved data which had been saved when offline
        .then(function(data) {
          for (var dt of data) {
            fetch('xxx some firebase post url xxx', { // fetching for sending saved data to firebase database
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              },
              body: JSON.stringify({
                id: dt.id,
                title: dt.title,
                content: dt.content
              })
            })
              .then(function(res) {
                console.log('Sent data', res);
                if (res.ok) {
                    res.json()
                        .then(function (resData) {
                            deleteItemFromData('sync-posts', resData .id); // function for deleting saved post data from indexedDB as we donot need after realtime post is saved when online.
                        });
                }
              })
              .catch(function(err) {
                console.log('Error while sending data', err);
              });
          }
        })
    );
  }
});

我不知道哪里出了问题。如果任何人需要更多我的邮寄代码或服务人员代码，以便更清楚，请尽管问。我被困在这里了，请帮帮我。

Answer 1

你能做的就是检查你的应用程序是否再次在线或者没有使用Online and offline events。这是一个文档齐全的JS，也是widely supported。

window.addEventListener('load', function() {
  function updateOnlineStatus(event) {
    if (navigator.onLine) {
      // handle online status
      // re-try api calls
      console.log('device is now online');
    } else {
      // handle offline status
      console.log('device is now offline');
    }
  }

  window.addEventListener('online', updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});                        

注:它只能判断设备是否已连接。但它不能区分工作的互联网连接或仅仅是一个连接(例如，没有实际互联网连接的WiFi热点)。

因此，我建议你在navigator.onLine事件中做一个假的API调用，只是为了检查实际的互联网是否恢复了(也可以是一个简单的握手)，一旦成功，你就可以继续进行常规的API调用。

Answer 2

检查重新加载时更新是否已关闭，以及您是否完全脱机。我也遇到了同样的问题，当重新加载时更新被关闭时，它会随机地开始工作。我认为这是因为它会在您每次刷新页面时重新安装服务工作者，因此您不会处于服务工作者正在侦听同步的状态。不管怎么说，这就是我的理论。希望这能帮到你。