获取缓存数据 Vue CLI Vuex PWA答案

【问题标题】：Fetch cached data Vue CLI Vuex PWA获取缓存数据 Vue CLI Vuex PWA
【发布时间】：2019-05-18 16:14:45
【问题描述】：

如何在离线模式下将我的缓存数据从 service worker 获取到 vuex 存储？

该应用程序在浏览器中以离线模式工作，但是当我将站点添加到包含 manifest.json 文件的主屏幕时，它不会显示缓存的数据，而只会显示一般的 js、css 和 html .

我很难弄清楚如何从 PWA 中获取缓存数据。我已经缓存了数据。问题是将其检索回名为“游戏”的 vuex 商店状态，以便在应用离线时显示。

用于缓存服务工作者的 api 调用的 vue.config.js 代码。

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 商店？

【问题讨论】：

标签： javascript vue.js caching vuex progressive-web-apps

【解决方案1】：

您以错误的方式思考这个问题。您不需要服务人员为您做任何事情。它已经通过为您提供缓存实现来做到这一点。相反，您需要使用navigator.onLine 挂钩来确定他们是否可以访问互联网。如果没有，则从缓存中对存储进行水合，并确保订阅任何突变并将状态推送回缓存，如下所示：

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

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

hydrateFromCache 方法只是从缓存中拉入 store 并混合所有 vuex 模块的状态。

【讨论】：