获取缓存的数据Vue CLI Vuex PWA

Question

如何以离线模式将来自服务工作者的缓存数据导入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存储中？

Answer 1

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

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

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

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