Runtime caching for APIs, in Vue, Vite PWA plugin seems not working?

Question

I've add PWA plugin in my Vuejs project, with Vite. I made the precaching but when I tried to make runtime caching for API request, it doesn't work. The runtime cache file doesn't appear and no runtime caching happens.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      manifest: {
        icons: [
          {
            src: "./SmallTile.scale-400.png",
            sizes: "284x284",
            type: "image/png",
            purpose: "any maskable",

          }
        ]
      },
      workbox: {        
        runtimeCaching: [{
          urlPattern: "https:\\/\\/openweathermap\\.org\\/api\\/.*",
          handler: "NetworkFirst",
          options: {
            cacheName: "api-cache",
            cacheableResponse: {
              statuses: [0, 200] 
            }
          }
        }]
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

I tried to change the url pattern but i couldn't fine a good solution

Did you suceed ?

Seba99
– Seba99

2023-12-19 13:23:29 +00:00
Commented Dec 19, 2023 at 13:23 — Seba99
– Seba99, Commented Dec 19, 2023 at 13:23

Moshe Quantz · Accepted Answer · 2024-02-21 07:57:07Z

0

That's because the default caching of Workbox takes precedence and overwrites your api runtimeCaching

So you need to tell Workbox to not cache API requests by default

Like so:

workbox: {        
  navigateFallbackDenylist: [/^\/api/], // every route that starts with /api will not use the fallback
  runtimeCaching: [{
    urlPattern: /^https:\/\/openweathermap\.org\/api/,
    handler: 'NetworkFirst',
  }]
}

answered Feb 21, 2024 at 7:57

Moshe Quantz

1,5102 gold badges12 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Runtime caching for APIs, in Vue, Vite PWA plugin seems not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related