如何在运行时API GET请求中预先缓存未访问的页面和缓存？(Nuxt PWA工作组) [英] How can I precache non-visited pages and cache on runtime API GET requests? (Nuxt PWA Workbox)

问题描述

我花了一个下午的时间试图找出@nuxtjs/pwa工作箱模块，但几乎没有结果。我不是这方面的专家，我开始完全迷惑了>；<；如果有任何帮助，我将不胜感激！

唯一有效的是缓存已访问页面的HTML/CSS/JS结构。我估计这是开箱即用的。即使它看起来是一个错误并且应该缓存所有路由https://github.com/nuxt-community/pwa-module/issues/24？

1. 这是我想做的事情之一：至少预先缓存每个页面的结构，但我不知道如何实现这一点。

2. 另一个原因是我想缓存在GET请求时收到的API响应。因此，如果APP离线，至少用户可以看到带有上次下载数据的预缓存结构。 我尝试了这样的方法，但没有结果。

    runtimeCaching: [
      {
        urlPattern: `${WEBSITE.URL}/api/.*`,
        strategyOptions: { cacheableResponse: { statuses: [0, 200] } },
      },
    ],

我的脑子里有一千个问题，但我会从这些部分开始，希望有一个善良的灵魂准备好帮助我。^^谢谢！

推荐答案

所以我设法通过创建插件来回答我的第二个问题。我正在缓存对API的GET请求的所有成功响应。

// workbox-cache.js (You can call it whatever you want.)

/**
 * Workbox register route
 * @Regex define route: every route with /foo/bar/ in it
 * @Strategy define Workbox strategy: ask network, then cache
 * @HttpVerb GET requests
 */
workbox.routing.registerRoute(
  /^(.*?)/foo/bar/(.*?)/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'apiCache',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
  'GET'
)

并在nuxt.config.js中声明

workbox: {
      cachingExtensions: ['@/plugins/workbox-cache.js'],
    },
  },

我仍然在寻找第一个问题：所有页面的预缓存结构。对于第二个，我仍然需要想办法警告访问者数据来自缓存，因为他/她离线了。

这篇关于如何在运行时API GET请求中预先缓存未访问的页面和缓存？(Nuxt PWA工作组)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！