Pwa-module: Caching API request

[AleeeKoi]

Hello,
I'm developing a web site with nuxt and a headless cms.
So, my nuxt app in its pages make http requests using the method asyncdata to set information (I'm using SSR mode) from the headless cms.
All works fine but I don't get how to cache requests to make my nuxt PWA working offline.
At now I'm using default configurations for the workbox.
Which is the correct way (if possible) to do that?

Thank you.

[gangsthub]

1. (Confirmed) Assuming you use the generate command, what if you "pre-render" the content of those posts? (Adding the content as static HTML on the server side). With this technique you'd need to make a request to fetch all the posts upfront (ideally in 1 single call, not N calls).

2. (Unconfirmed) If you're using the build command (and have your Nuxt app running with a node server or a lambda), you might want to consider to do something similar, but instead of generating static HTML, to save your content as JSON files. There's a non-official plugin to help you with that: https://www.npmjs.com/package/@luxdamore/nuxt-apis-to-file

Then, to "pre-cache" the pages upfront, I used offlineAssets option:

// nuxt.config.js
{
 // ...
  pwa: {
    workbox: {
      offlineAssets: [...listOfSlugs], // -> your posts "slugs" previously fetched, equivalent to routes in your app
    }
  }
  // ...
}

This is an example of the rest of the configuration for it to work with generate:

// nuxt.config.js
{
  //...
  generate: {
    async routes() {
      const todos = await got(
        'https://jsonplaceholder.typicode.com/todos/'
      ).json()
      return todos.map((res) => ({
        route: `/${res.id}`, // so, there is a dynamic page in the root level...
        payload: res
      }))
    }
  },
  // ...
}

// pages/_todoId.vue
<template>
  <div>
    <h1>{{ todo.title }}</h1>
    <p>{{ todo.completed }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params, payload }) {
    if (payload) return { todo: payload }
    const todo = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${params.todoId}`
    ).then((response) => response.json())
    return { todo }
  }
}
</script>

For a more dynamic use, you can also access the Cache API in your app's code:

https://developers.google.com/web/tools/workbox/guides/common-recipes#access_caches_from_your_web_apps_code

[AleeeKoi]

Hi @gangsthub
My case is the second one, so I will try asap. Thank you for your suggestion!