Получить кэшированные данные Vue CLI Vuex PWA - PullRequest
Новая
       12

Получить кэшированные данные Vue CLI Vuex PWA

0 голосов
/ 18 мая 2019

Как передать кэшированные данные из сервисного работника в хранилище vuex в автономном режиме?

Приложение работает в автономном режиме в браузере, но когда ядобавить сайт на домашний экран с включенным файлом manifest.json, он не будет отображать кэшированные данные и только общие js, css и html.

Мне трудно разобратьсяКак я могу получить мои кэшированные данные из моего PWA.У меня уже есть данные в кеше.Проблема заключается в получении его обратно в состояние хранилища vuex, называемое «игры», для отображения, когда приложение находится в автономном режиме.

enter image description here

vue.config.js код для кэширования вызова API для сервисного работника. 

module.exports = {
  pwa: {
    workboxPluginMode: "GenerateSW",
    workboxOptions: {
      navigateFallback: "/index.html",
      runtimeCaching: [{
        urlPattern: new RegExp('API_URL'),
        handler: 'networkFirst',
        options: {
          networkTimeoutSeconds: 20,
          cacheName: 'api-cache',
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      }]
    }

  }
};

Как вы можете видеть на картинке выше кода, он хранит кеш "api-cache" с объектами из API.

Теперь я хочу использовать эти данные в кеше из api-cache на моем сайте, когда сайт отключен.

Итак, мой вопрос: как я могу получить свои кэшированные данные из сервисаРаботник в магазине Vuex в автономном режиме, когда пользователь добавил приложение на главный экран?

1 Ответ

0 голосов
/ 18 мая 2019

Вы думаете об этом неправильно.Вам не нужен работник службы, чтобы сделать что-нибудь для вас.Он уже делает это, предоставляя вам реализацию кеша.Вместо этого вам нужно использовать хук navigator.onLine, чтобы определить, есть ли у них доступ в Интернет.Если нет, то увлажните ваш магазин из кеша и убедитесь, что подписались на любые мутации, и отправьте состояние обратно в кеш, например: 

if (!navigator.onLine) {
    const state = hydrateFromCache()

    store.subscribe((mutation, state) => cache.setItems(state)
}

, где метод hydrateFromCache просто вытягивает хранилище виз кеша и гидратирует состояние всех модулей vuex.

...