javascript - 离线时提示客户请求的策略

Question

上下文

向跟踪端点发出 PUT http 请求的移动客户端 Web 应用程序 (html/js)。该应用程序构建在 cordova 之上，使用 vuejs vuex、superagent 和 localforage

问题

当客户端离线时，请求会超时，并且要传输的信息会丢失。

我认为下一步是提示请求，我的问题是这个逻辑属于哪里。

解释同样的问题时，我被告知这应该在服务工作人员上实现，但阅读它后我没有看到使用它有任何好处，因为客户端应用程序不依赖在响应上使用缓存响应之类的东西并不能解决我的问题。

另一方面，我认为这可以通过在设备上存储请求提示并在成功发送到服务器后删除来实现。

问题

1. 对于这个问题有什么建议或良好的做法可以遵循吗？
2. 这应该在服务工作线程上实现还是在应用程序本身中实现？
3. 是否有任何库可以解决同样的问题？

Answer 1

您的方法应该是将数据存储在本地内存中，即缓存或IDB，然后在serviceWorker中注册一个同步事件。这样，当您的应用再次上线时，sync 事件将处理该任务。

这是一个例子:

在您要存储的应用程序内部:

  if ('serviceWorker' in navigator && 'SyncManager' in window) {
    navigator.serviceWorker.ready
      .then(function(sw) {
        var post = {
          data: 'Some Data'
        };
        writeData('sync-posts', post)     //save in local storage
          .then(function() {
            return sw.sync.register('sync-new-posts');
          })
          .then(function() {
            // display that post was saved for background sync (purely optional)
          })
          .catch(function(err) {
            console.log(err);
          });
      });
  } else {
    sendData();     //in-case browser is incompatible
  }                

在serviceWorker内部执行如下操作:

self.addEventListener('sync', function(event) {
  console.log('[Service Worker] Background syncing', event);
  if (event.tag === 'sync-new-posts') {
    console.log('[Service Worker] Syncing new Posts');
    event.waitUntil(
      readAllData('sync-posts')     //reading from local storage
        .then(function(data) {
          // upload the data & free up the storage
        })
    );
  }
});          

管理ServiceWorker的工具:WorkBox