Question

我正在构建一个应用程序，当角度为8的应用程序离线时，我将在其中保存数据。我创建了事件侦听器来检测应用程序状态（离线/在线），但是很难通过单独的服务获取模型数据。我应该使用什么？有什么建议吗？

Answer 1

我将检查浏览器是否支持SyncManager，如果支持，我将注册服务工作者。

然后，我将监听提交按钮的单击事件，然后将事件名称contact-email添加到队列中

if ('serviceWorker' in navigator && 'SyncManager' in window) {
    navigator.serviceWorker.register('./sw.js')
    .then(registration => navigator.serviceWorker.ready)
    .then(registration => {
      document.getElementById('submit').addEventListener('click', () => {
        registration.sync.register('contact-email').then(() => {            // The sync for the contact-email
            queueMessage();                                                 // Queue the body of the message
            displayMessageNotification('Message queued');
        });
      });
    });
  }

这是我将所有内容存储到索引数据库的方式

function queueMessage(){
  console.log('Message queued');

  var payload = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    subject: document.getElementById('subject').value,
    message: document.getElementById('message').value,
  };

  // Save to indexdb
  idbKeyval.set('sendMessage', payload);
}

然后我将监听同步事件（如果浏览器再次联机），我会将数据发送到服务器

self.addEventListener('sync', function (event) {
  if (event.tag === 'contact-email') {
    event.waitUntil(
      idbKeyval.get('sendMessage').then(value =>
        fetch('/sendMessage/', {
          method: 'POST',
          headers: new Headers({ 'content-type': 'application/json' }),
          body: JSON.stringify(value)
        })));

        // Remove the value from the DB
        idbKeyval.delete('sendMessage');
    }
});

当应用程序在角度8中脱机时如何自动保存数据

1 个答案: