后台同步代码在 PWA 中在线(wifi 开启)时不会自动工作 [英] Background Sync codes not working automatically when online(wifi on) in PWA

问题描述

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

I am new to PWA and have been testing my PWA project using firebase console database. When offline, I have code to save my post data in indexedDB when i submit my post data to saved later when there is WiFi(online). It did save the data in indexedDB when no WiFi found, but when i turn on my WiFi, it doesn't post my data in realtime. When i submit new post data when wifi on(online), background sync codes do post saved data from indexedDB with newly post data in real time. But i want my background sync codes to post automatically when WiFi is turned on(after offline).

这是我用于后台同步的 Service Worker 代码:

Here is my service worker code for background sync:

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);
              });
          }
        })
    );
  }
});

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

I don't know what's go wrong. If anyone need more of my codes of my posting codes or serviceworker codes for more clarity, please do ask. Please help me with this as i am stuck in this.

推荐答案

您可以做的是使用 在线和离线事件.这是一个有据可查的 JS API，并且得到广泛支持.

What you can do is check weather the your app is online again or not using Online and offline events. This is a well documented JS API and is widely supported as well.

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 热点).

NOTE: It can only tell if the device is connected. BUT it CANNOT distinguish between a working internet connection or just a connection (Eg. WiFi hotspot without actual Internet connectivity).

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

So, I'd suggest you to do a fake API call in the navigator.onLine event just to check weather the actual internet is back or not (it can be a simple handshake as well) and once the is successful you can go on doing your regular API calls.

这篇关于后台同步代码在 PWA 中在线(wifi 开启)时不会自动工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！