时间戳

首页 > 解决方案 > 获取缓存数据 Vue CLI Vuex PWA

javascript - 获取缓存数据 Vue CLI Vuex PWA

问题描述

如何在离线模式下将我的缓存数据从服务工作者获取到 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 商店？

标签： javascriptvue.jscachingvuexprogressive-web-apps

解决方案

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

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

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

该hydrateFromCache方法只是从缓存中提取存储并混合所有 vuex 模块的状态。

推荐阅读