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应用程序中脱机使用

我正在为我的Vue CLI应用尝试一些PWA选项，我想知道是否有可能缓存vuex状态，以便仍然在网站上显示来自我的API调用的数据？

否则，我尝试通过在registerServiceWorker.js文件中使用以下代码来缓存api调用本身：

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
        })
      }
    }
  }
})

API URL之前的“ https://cors-anywhere.herokuapp.com/” URL旨在解决CORS阻止api调用的问题。

我不确定这是否是插入事件侦听器的正确方法，但一般的想法是缓存api数据，以使该应用程序能够与数据脱机运行。

我认为，如果有新数据要通过API调用显示，我还需要以某种方式更新数据。但是我从控制台中看到的东西也让我感觉到服务工作者可以自行处理。

在Vue CLI PWA中缓存API或存储数据

0 个答案: