如何预缓存未访问的页面并缓存运行时 API GET 请求？（Nuxt PWA 工作箱）答案

【问题标题】：How can I precache non-visited pages and cache on runtime API GET requests? (Nuxt PWA Workbox)如何预缓存未访问的页面并缓存运行时 API GET 请求？（Nuxt PWA 工作箱）
【发布时间】：2021-10-26 17:19:09
【问题描述】：

我刚刚花了一个下午试图找出@nuxtjs/pwa Workbox 模块，但几乎没有结果。我不是这方面的专家，我开始完全迷失了>

唯一有效的是缓存访问页面的 HTML/CSS/JS 结构。我认为这是开箱即用的。即使它似乎是一个错误，它应该缓存所有路由https://github.com/nuxt-community/pwa-module/issues/24？

这是我想做的一件事：至少预先缓存每个页面的结构，但我不知道如何实现这一点。
另一个是我想缓存我在旅途中收到的 GET 请求的 API 响应。因此，如果应用程序处于离线状态，至少用户可以看到带有上次下载数据的预缓存结构。我尝试了类似的方法，但没有结果。

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

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

【问题讨论】：

标签： nuxt.js progressive-web-apps workbox

【解决方案1】：

所以我设法通过创建一个插件来回答我的第二个问题。我正在缓存对 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'],
    },
  },

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

【讨论】：