0

我是 PWA 新手，一直在使用 firebase 控制台数据库测试我的 PWA 项目。离线时，indexedDB当我提交我的帖子数据时，我有代码保存我的帖子数据，以便稍后在有 WiFi（在线）时保存。它确实在找不到 WiFi 时保存了数据indexedDB，但是当我打开 WiFi 时，它不会实时发布我的数据。当我在wifi开启（在线）时提交新的帖子数据时，后台同步代码会indexedDB实时发布保存的数据和新的帖子数据。但我希望我的后台同步代码在打开 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);
              });
          }
        })
    );
  }
});

我不知道出了什么问题。如果有人需要我的发布代码或服务人员代码的更多代码以更清楚，请询问。请帮我解决这个问题，因为我陷入了困境。

4

2 回答 2

1

您可以做的是使用在线和离线事件检查您的应用再次在线或未在线的天气。这是一个有据可查的 JS API，也得到了广泛的支持。 

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来电。

于 2018-05-18T14:52:27.410 回答
0

检查重新加载时的更新是否已关闭以及您是否完全离线。我遇到了同样的问题，然后当重新加载更新关闭时它随机开始工作。我认为这是因为每次刷新页面时它都会重新安装服务工作人员，因此您不处于服务工作人员正在侦听同步的状态。无论如何，这就是我的理论。希望这可以帮助...

于 2019-03-03T15:24:06.957 回答