Автономное хранилище Angular PWA

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

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

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

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

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

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

Спасибо


angular8 progressive-web-apps angular-service-worker
person Mathew Rimmington    schedule 21.06.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

У меня есть проект, в котором мои пользователи могут редактировать локальные данные, когда они не в сети, и я использую Cloud Firestore, чтобы кэшировать локальную базу данных. Если бы я вас правильно понял, это было бы именно ваше требование.

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

firebase.firestore().enablePersistence() 
  .catch(function(err) {
      // log the error
  });

// Subsequent queries will use persistence, if it was enabled successfully

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

person Francesco    schedule 24.06.2019