Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]

Question

Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]

meliceanu opened this issue 4 months ago · 19 comments

Is there a way to get rid of this error?

I tried to use the config https://vite-pwa-org.netlify.app/guide/service-worker-precache.html but nothing seems to work, i use Nuxt 3.12.3 and @vite-pwa/nuxt 0.9.1

Thank you

Answer 1 · 2024-07-18T11:28:11.000Z

You need to prerender / route, workbox requires the html to be there to allow work offline (precaching): don't use vite plugin pwa, use the nuxt integration

Answer 2 · 2024-07-18T12:13:58.000Z

how can i do that? do i need to add a index.html file in the root even tho i don't need it?

Answer 3 · 2024-07-18T12:20:22.000Z

https://github.com/vite-pwa/nuxt/blob/main/playground/nuxt.config.ts#L22-L24

Answer 4 · 2024-07-18T12:22:45.000Z

somehow the error still appears, only in production. it's hosted on netlify

Answer 5 · 2024-07-18T12:26:57.000Z

open devtools and remove sw, then page refresh

Answer 6 · 2024-07-18T12:35:44.000Z

it just automatically reregisters the sw, with the same error

Answer 7 · 2024-07-18T12:41:51.000Z

can you check if working in your local with build/generate? (follow nuxt instructions once build/generate command finish)

EDIT: remove the edge preset

Answer 8 · 2024-07-18T12:52:57.000Z

ok i removed the edge preset and kept the prerendering of the / page in the route. but the error is still there

Answer 9 · 2024-07-18T12:58:19.000Z

only in chrome i get that error, in safari i get this

Answer 10 · 2024-07-18T13:03:13.000Z

check dist or output folder, you should have the html file there, some questions:

ssr enabled?
how do you build the app (build or generate command)?

The index.html should be in the sw.js file, check the sw.js file at the end, there should be something like:

{ url: "/", revision: "xxxxxx" }

Answer 11 · 2024-07-18T13:09:36.000Z

ssr is enabled i build the app using pnpm run build. in my sw.js file i dont see any url: "/"

this is what i think is the / page:

{ url: '_payload.json', revision: 'fc92125330b4f4ac06b2d1f6acfaff6d' },

all my other pages are:

{ url: 'example-route/_payload.json', revision: 'fc92125330b4f4ac06b2d1f6acfaff6d' },

Answer 12 · 2024-07-18T13:10:47.000Z

this is the end of the file

Answer 13 · 2024-07-18T13:47:02.000Z

did you add nitro.prerender.routes with / in the array?

Answer 14 · 2024-07-18T13:55:35.000Z

i did, the error keeps appearing

Answer 15 · 2024-07-18T14:02:19.000Z

is the prerendering a must? it seems it's not working

Answer 16 · 2024-07-18T14:16:36.000Z

why are you removing html files from glob patterns? remove that entry https://vite-pwa-org.netlify.app/guide/static-assets.html#globpatterns

Answer 17 · 2024-07-18T14:19:31.000Z

you're removing sw precaching, your app will not work when offline

Answer 18 · 2024-07-18T14:22:28.000Z

remove workbox entry, check if the html pages being generated in the output folder

Answer 19 · 2024-07-19T10:18:45.000Z

So i had to remove nay reference to the manifest or manifest.webmanifest, deleted the file as well. The pwa options handel the manifest. Note the scope and the theme-color options.

I had to change the app.vue configuration cause i use the assets generator:

Corrected Nitro configuration, you don't really need the preset, it's just personal choice. Need to prerender the '/' route

If you then have the bad-precaching-response, with a 404 status, you have to exclude that file/url from the pwa build:

All of this thanks to @userquin