PWA offline-first, стратегии обнаружения соединений

Question

Я хочу превратить мое реагирующее приложение в PWA с автономным первым подходом, где:

1. Статические ресурсы кэшируются с использованием CacheAPI
2. Данные хранятся в IndexedDB

Я хочу охватить конкретный случай, когда пользователь создает / обновляет / удаляет данные в автономном режиме.

Сценарий, который я имею в виду:

1. Пользователь открывает приложение
2. Данные загружаются из IndexedDB
3. Пользователь теряет соединение
4. Пользователь создает новый объект
5. Соединение возвращается
6. Данные должны отправляться на сервер

Я знаю, что есть API-интерфейс Background Sync, но его поддержка браузера все еще очень ограничена, поэтому я задаюсь вопросом о двух вещах:

1. Каков наилучший механизм для обнаружения соединения?вкл / выкл?
2. Означает ли этот подход генерируемые клиентом ориентиры для сущностей и локальное отслеживание того, что синхронизировано, а что нет?

Если кто-то может пролить немного света на то, чтообычный архитекторОбзор рала, было бы здорово.

Answer 1

//ON PAGELOAD  
  window.addEventListener('online', function (e) {
    this.IsOnline = true;
     this.employees = fetchFromLocalIndexDB();
     this.employees.forEach(function (item) {          
      if (item.FlagStatus == Status.Insert) {
         //CALL WEB API AND SEND TO REMOTE DATABASE
         myAPI.Post(url + item);
       });
      //GET ALL EMPLOYEES FROM THE REMOTE SQL DATABASE
        this.employees = myAPI.Get();

      //LOAD LOCAL DATABASE WITH EMPLOYEEES FROM THE REMOTE SQL DATABASE
        loadLocalDatabaseArray(this.employees);
      } 
    }, false);