Struggling with 'non-precached-url' and 'bad-precaching-response' errors despite following documentation"

[DidoMarchet]

Hi,
I'm struggling because I cannot figure out how to solve these errors:

I installed: @vite-pwa/nuxt": "^0.10.5"
I add it in modules:

export default {
  modules: [
    '@nuxtjs/i18n',
    '@nuxtjs/sitemap',
    '@nuxtjs/apollo',
    '@pinia/nuxt',
    '@vite-pwa/nuxt', // HERE
    '@formkit/nuxt',
    'nuxt-delay-hydration',
    '@zadigetvoltaire/nuxt-gtm',
  ],
}

I configure it in a minimal way and add it in my nuxt.config.ts:

  pwa: {
    registerWebManifestInRouteRules: true,
  },

and after, as doc says I add the component in app.vue:

<template>
  <div>
    <NuxtLayout>
      <NuxtLoadingIndicator />
      <VitePwaManifest /> <!-- HERE -->
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
import { useStore } from '@/store/index.js'
const { locale } = useI18n()
await useAsyncData(() => useStore().fetchState())

watch(
  () => locale.value,
  async () => {
    await useAsyncData(() => useStore().fetchState())
  }
)

const { lenis } = useLenis()
provide('lenis', lenis)
</script>

So I think I follow step by step the instructions but the errors still there.
You can check here: https://zavaluce.it/

Any advice woul be appreciated!

Really thanks and kind regards,

Davide

[userquin]

Since you're using ssr, you need to prerender the navigate fallback page, sw precaching (offline support requires an inital html page).
Check the sveltekit issue, the nuxt repos and the discussion in this comment: vite-pwa/sveltekit#65 (comment)

[DidoMarchet]

Ok thanks I solved in this way:

Pwa module configuration:

// https://github.com/vite-pwa/nuxt
// https://github.com/vite-pwa/nuxt/issues/53 
export default {
  pwa: {
    registerWebManifestInRouteRules: true,
    scope: '/',
    base: '/',
    manifest: {
      name: process.env.SITE_NAME_FRONTEND,
      useWebmanifestExtension: false,
    },
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
      runtimeCaching: [
        {
          urlPattern: '/',
          handler: 'NetworkFirst',
        },
      ],
      navigateFallback: undefined,
    },
  },
}

App.vue confifguration:

  <div>
    <NuxtPwaManifest />
    <NuxtLayout>
      <NuxtLoadingIndicator :color="'#000'" />
      <NuxtPage />
    </NuxtLayout>
  </div>

It helps another your discussion: #53

Thanks and kidn regards,
Davide