refresh dosen`t work when I setup vite-pwa into my nuxt app

[fairySusan]

The app work normally before I setup viet-pwa. The refresh() doesn't work after I config vite-pwa. The Chrome' network panel have any request when call the onNextPage().

code:

const queryData = reactive<QueryParams>({
  pageNum: 1,
})
const {data, refresh} = await useFetch<BaseResponse<CategoryItemI>>('/xxxxx',{
  body: queryData,
  method: 'post',
  baseURL:runtimeConfig.public.BASE_URL,
  headers: {
    Authorization: `Bearer ${tokenCookie.value}`,
    ...CommonHeaders,
  },
})

const onNextPage = () => {
    queryData.pageNum++;
    refresh();
}

the nuxt.config.ts:

export default defineNuxtConfig({
app:{
    head:{
      link:[{
        rel:'manifest',
        href:'/manifest.webmanifest'
      }]
    }
  },
 pwa: {
    manifest: {
      "background_color": "#fff",
      "theme_color":"#fff",
      "orientation":"any",
      "description": "xxxx",
      "display": "standalone",
      "icons": [
        {
          "src": "/icon.webp",
          "sizes": "120x120",
          "type": "image/webp"
        }
      ],
      "name": "xxx",
      "short_name": "xxx",
    },
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    devOptions: {
      enabled: true
    }
  },
})

version:
"@vite-pwa/nuxt": "^0.3.3",
"nuxt": "^3.7.3",

How can I fix this problem？

[userquin]

Include any api call in the workbox.navigateFallbackDenylist, you will need to handle offline, check this issue vite-pwa/sveltekit#65 (for SSR pages)