Кэширование API или сохранение данных в Vue CLI PWA

Question

Обновлено Проблема заключалась в том, чтобы манипулировать рабочим файлом службы регистрации, а не настраивать работника службы в vue.config.js следующим образом:

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

  }
};

Оригинал TL; DR Попытка кэширования данных axios для автономного использования в приложении vue

Я пробую некоторые варианты PWAдля моего приложения Vue CLI, где мне интересно, можно ли кешировать состояния vuex, чтобы по-прежнему отображать данные из моего вызова API на сайте?

В противном случае я попробовал свой способ кешированияAPI вызывает себя, используя следующий код в моем файле registerServiceWorker.js:

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    //Basic service worker content
  })
}

self.addEventListener('install', e => {
  e.waitUntil(caches.open('apiname')
    .then(cache => cache.add(`${'https://cors-anywhere.herokuapp.com/'}APIURL`)))
})

В моем файле store.js у меня есть загруженный API, устанавливающий данные в состояние "игры":

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
Vue.use(axios)

export default new Vuex.Store({
  state: {
    games: [],
  },
  mutations: {
    SET_GAMES(state, payload) {
      function compare(a, b) {
        if (a.name < b.name) return -1
        if (a.name > b.name) return 1
        return 0
      }
      state.games = payload.sort(compare)
    }
  },
  actions: {
    loadGames({
      commit
    }) {
      axios.get(`${'https://cors-anywhere.herokuapp.com/'}API_URL`)
        .then(r => {
          commit('SET_GAMES', r.data)
        })
        .catch(e => {
          console.log('Axios api error: ', e)
        })
    }
  },
  getters: {
    clickedGame(state) {
      return (id) => {
        return state.games.find((game) => {
          return game.id == id
        })
      }
    }
  }
})

URL-адрес «https://cors -anywhere.herokuapp.com / » перед URL-адресом API для исправления CORS, блокирующего вызов API.

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

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