api requests are not cached

[prstwo]

hi, Thanks for your great plugin. I have challenge with caching api requests. vite-pwa/nuxt is installed on a nuxt 3 project and data is fetched based on api reqest. I want whenever a user get offline, page data get data from the cached api. Although all static files and components are cached successfully, api requests are not cached. this is url of the website: And here is the config of pwa in nuxt.config.js file:

  pwa: {
    registerType: 'autoUpdate',
    registerWebManifestInRouteRules: true,
    manifest: {
      "name": "Fares bazar",
      "short_name": "Faresbazar",
      "start_url": "/",
      "display": "fullscreen",
      "background_color": "#ffffff",
      "lang": "fa",
      "scope": "https://faresbazar.com",
      "theme_color": "#d71920",
      "icons": [
        {
          "src": "faresbazar-192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "faresbazar-512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "description": "جدیدترین و خوش‌نام‌ترین محصولات دیجیتال را براحتی از طریق نرم‌افزار فارِس بازار خرید نمایید.",
      "dir": "auto",
      "display_override": [
        "fullscreen",
        "standalone"
      ],
      "categories": [
        "shopping"
      ],
      "screenshots": [
        {
          "src": "screenshot.png",
          "sizes": "1280x800",
          "type": "image/png"
        },
        {
          "src": "screenshot.png",
          "sizes": "750x1334",
          "type": "image/png"
        }
      ]
    },
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
      runtimeCaching: [
        {
          urlPattern: 'https://api.faresbazar.com/api-frontend/*',
          handler: 'NetworkFirst',
          options: {
            cacheName: 'my-api-cache',
            expiration: {
              maxEntries: 500,
              maxAgeSeconds: 60 * 60 * 24
            }
          }
        }
      ]
      // additionalManifestEntries: [{ url: '/', revision: new Date().getTime().toString() }]
    },
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 3600,
    },
  },

[userquin]

@prstwo api requests will NOT be cached on first navigation, workbox needs to create the cache and cannot be done when intercepting the requet, so cache will be activated on next navigation, just try reopening the url in a new browser instance.

Beware, if https://api.faresbazar.com/api-frontend/* isn't in the same origin, you will need to handle opaque requests:

• add access-control-allow-origin: * or custom one http header to all app responses (html,js)
• add cacheableResponse: { statuses: [0, 200] } to your api cache options
• read opaque requests and the navigation storage api article: each api request will be stored with a padding of 7MB, you should also add purgeOnQuotaError: true in expiration plugin options

runtimeCaching: [{ 
  urlPattern: 'https://api.faresbazar.com/api-frontend/*',
  handler: 'NetworkFirst',
  options: { 
    cacheName: 'my-api-cache', 
    expiration: { maxEntries: 500, maxAgeSeconds: 60 * 60 * 24, purgeOnQuotaError: true },
    cacheableResponse: { statuses: [0, 200] }
  }
}]

[userquin]

Remember to also include some offline handle logic when using nuxt fetch stuff (check error and use VueUse::useOffline in the logic).

[R0N1n-dev]

Same issue here. Nothing above is working