PWA: опрос данных в фоновом режиме - PullRequest
Новая
       110

PWA: опрос данных в фоновом режиме

1 голос
/ 21 апреля 2020

Моему приложению PWA необходимо опросить новые "Уведомления" из API во время использования приложения или в фоновом режиме.

Я использую Nuxt JS с Vuex и уже есть действие (Promise), которое выполняет запрос и добавляет в состояние, а также индексированную БД.

Мне нужно вызывать это действие каждые 5 минут и создавать уведомления для идентификаторов в ответ, который я еще не видел.

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

В Nuxt PWA [nuxt.config.js] вы можете добавлять файлы в массив pwa.workbox.importScripts, включая один из моих store файлы не работают, так как сервисный работник ищет файлы в своем собственном каталоге, а файлы моего хранилища были сжаты, например, 

pwa: {
  workbox: {
    importScripts: [
      'custom_sw.js',
      '~/store/test.js'
    ]
  ...
  }
}

Если у меня нет возможности сделать это, я просто нужно переписать код извлечения и анализа, но это неэффективно.

Буду очень признателен за любой совет!

1 Ответ

2 голосов
/ 21 апреля 2020

Код, который выполняется внутри Service Worker, находится в отдельной области действия от кода, который выполняется на странице. Другими словами: если в вашем «обычном JS коде» (JS работает в области окна) есть некоторые переменные / функции / что угодно, вы не можете получить к ним доступ из области Service Worker и наоборот. Это две совершенно разные области выполнения.

Чтобы «разделить» что-то между этими двумя областями выполнения, нужно использовать API postMessage. С postMessage вы можете отправлять сообщения из области окна работнику сервиса и обратно. Обычно вы регистрируете прослушиватели событий для сообщений и используете API postMessage для отправки чего-либо другой стороне. Затем, на стороне получателя, вы можете делать все, что захотите.

Когда вы говорите о действиях Vuex и Service Worker, скорее всего вам нужно что-то подобное:

  • add прослушиватель событий сообщения на странице (область окна)
  • Service Worker отправляет сообщение на страницу с некоторой информацией (уведомление msg: blaa blaa) с помощью API postMessage
  • прослушиватель событий запускает функцию с сообщением от SW
  • эта функция отправляет действие Vuex с сообщением

Ключом здесь является то, что вы не можете отправлять действия Vuex изнутри вашего Service Worker, так как выполняющийся там код не ' У меня нет доступа к магазину Vuex. Вы решаете это, отправляя сообщение через postMessage. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage

...