Question

上下文

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

问题

当客户端处于脱机状态时，请求最终会超时，并且传输的信息将丢失。

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

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

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

问题

关于这个问题，是否有任何建议或良好做法？
应该在服务工作者或应用程序本身实现吗？
是否有任何库可以解决同样的问题？

Answer 1

您的方法应该是将数据存储在本地存储器中，即cache or IDB，然后在sync event中注册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

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

上下文

问题

问题

1 个答案: