Расширение Chrome: синхронизировать локальное хранилище с сервером API

Question

Я имею дело с концептуальной проблемой, которая заключается в том, что моему расширению браузера Chrome необходимо синхронизироваться с сервером, чтобы сохранить данные в базе данных.
Для моего расширения я хочу сохранить очищенные данные вкладок на сервере.

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

У меня нет опыта работы с этим сценарием, но я имею в виду следующее:

• Сохранение данных в localstorage / chrome.storage.local до успешного выполнения сервером, а затемclean
• Повторные проверки на клиенте (однако я бы предпочел не делать этого через setInterval).

Есть ли альтернативный способ периодически проверять локальное хранилище для синхронизации данных с сервером в случае, если удаленный сервер недоступен в течение определенного периода времени?

Если есть лучший (общий) способ достижения желаемого результата, я бы хотел его услышать.

Answer 1

В зависимости от структуры хранимых данных, вы можете обойтись с помощью localStorage. Каждый раз, когда вы вносите изменения в ключ локально (или добавляете новый), пометьте этот ключ как «грязный» (то есть несинхронизированный). При следующей синхронизации вы узнаете, какие ключи / значения нужно синхронизировать.

Например, если ваши данные:

localStorage['tab1'] = '{...}'
localStorage['tab2'] = '{...}'
delete localStorage['tab3']

Сохраните дополнительный мета-ключ для вашего механизма синхронизации:

localStorage['$syncinfo$'] = JSON.stringify({
  dirty: ['tab1', 'tab2', 'tab3']
})

Затем, когда вы перейдете к синхронизации (примерно):

for(const key of JSON.parse(localStorage['$syncinfo$']).dirty) {
  if(localStorage[key] !== undefined) {
    // sync updated (or new) value to server
    // remove key from dirty array
  } else {
    // remove deleted value from server
    // remove key from dirty array
  }
}

Конечно, вы захотите обрабатывать ошибки и обновлять грязный массив только после успешной синхронизации сервера. , но это простой способ выполнить то, что вы хотите, я надеюсь:)

Если вы ищете решение, которое делает это, вы можете попробовать localForage , который является localStorage- совместимый API, в сочетании с драйвером localForage, который синхронизирует данные в удаленном хранилище данных, таком как KVdb.io , или другом с совместимым драйвером. (Отказ от ответственности KVdb.io построен мной.)

Answer 2

После некоторого исследования я решил, что setTimeInterval / setTimeout сделает эту работу.

• Сохранить очищенные вкладки в хранилище chrome
• Сделать сетевой запрос
• Очистить при успехе
• Пометить как сбой при ошибке
• Периодически проверять наличие неисправных состояний
• Отметить для очистки при успехе
• Очистить

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