Как запустить функцию в фоновом режиме с работником службы - PullRequest
0 голосов
/ 01 июля 2019

Я создаю веб-приложение на javascript. Там я хочу загрузить фотографии и другие данные на сервер. Это все работает, но я хочу использовать приложение в автономном режиме. Поэтому я реализовал indexedDB, чтобы хранить данные в автономном режиме. Кроме того, я сделал функцию синхронизации, которая будет выполняться каждые 5 секунд (setIntervall () ...), чтобы синхронизировать данные с сервером, если снова будет интернет-соединение.

Проблема в том, что эта функция синхронизации работает только при открытом приложении. Итак, я исследовал метод решения своей проблемы, и у меня появилась идея «работника службы» с фоновой синхронизацией.

Проблема в том, что я не знаю, как это реализовать.

Это то, что у меня сейчас есть (все приложение запрограммировано в MVC-концепции):

  • У меня есть sw.js со следующим кодом:
  if (event.tag == 'myFirstSync') {
    event.waitUntil(sync());
  }
});
  • В контроллере есть функция sync () для синхронизации данных

1 Ответ

0 голосов
/ 02 июля 2019

Вы можете реализовать фоновую синхронизацию внутри вашего sw.js файла в обработчике для события 'sync':

self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(() => {
      // Put your sync code here.
    });
  }
});

В какой-то момент после регистрации вашего сервисного работника вам нужно запуститьсинхронизация:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});

После однократного запуска синхронизации, если она не удалась, синхронизация должна продолжаться самостоятельно (даже если приложение не открыто в браузере).

Если произойдет сбой, повторная синхронизация будет запланирована для повторной попытки.Повторные синхронизации также ожидают подключения и используют экспоненциальное отключение.

См. https://developers.google.com/web/updates/2015/12/background-sync для получения дополнительной информации.

...