WorkboxError non-precached-url index.html

[jonian]

Hi, thank you for this plugin.

I'm getting the error below when running the app with vite preview and in production. The app source code is available at https://github.com/jonian/awmonitor and the production link is https://awmonitor.netlify.app.

WorkboxError.js:28 Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"index.html"}]
    at x.createHandlerBoundToURL (http://localhost:5000/workbox-a59a8da5.js:1:12967)
    at Object.createHandlerBoundToURL (http://localhost:5000/workbox-a59a8da5.js:1:14597)
    at http://localhost:5000/sw.js:1:10085
    at http://localhost:5000/sw.js:1:695
s @ WorkboxError.js:28
createHandlerBoundToURL @ PrecacheController.js:276
(anonymous) @ createHandlerBoundToURL.js:29
(anonymous) @ sw.js:486
(anonymous) @ sw.js:1

[userquin]

@jonian can you try removing ?standalone=true from the start_url with vite preview?.

[userquin]

The problem is that routes are not added to the sw precache, you need to add them manually, I'll push changes to my fork and make a PR to your repo.

You can see this comment antfu-collective/vitesse#159 for an explanation.

[userquin]

Well, the problem is on your workbox.globPatterns entry: you need to include all, it is exclusive, that is, if you include this entry, you MUST add all your patterns, not only font assets: in your case, you are not including js and css assets and index.html page.

Since you are using vite, all entries under assets directory will be included, you don't need to add them again.

Just remove the workbox entry from your configuration:

You also need to add all red entries shown bellow to make it work offline, it is working, but some images missing:

[jonian]

Thanks for the quick response and the help @userquin

[userquin]

@jonian I will add some entry on docs when using globaPatterns and some other similar entries from workbox and injectManifest to avoid this type of problems...

[jonian]

Thank you again @userquin, that will be really helpful.

[jonian]

You also need to add all red entries shown bellow to make it work offline, it is working, but some images missing

@userquin there are no images missing, they are the fonts the app uses from @iconscout/unicons. If I remove the font entries from the workbox config, the fonts are not available in offline mode. If I use the config below, everything works as expected in offline mode.

workbox: {
  globPatterns: [
    '*/*.*',
    '*.*'
  ]
}

Without the workbox option in offline mode:

With the workbox option above in offline mode:

[userquin]

@jonian read this entry to configure properly your external fonts: https://vite-plugin-pwa.netlify.app/workbox/generate-ws.html#cache-external-resources

Basically you need to add crossorigin and then add runtimeCaching for fonts urls. I suggest you to add also dns-prefetch links.

[userquin]

@jonian I have included a warning on Static Assets Handling entry: just go to https://vite-plugin-pwa.netlify.app/guide/static-assets.html and wait for prompt for update and then click reload button.

[Ehesp]

Sorry to pickup an old thread here, however this is causing some confusion for me.

I'm using Vite to SSR a page, however the index.html file gets added to the client bundle even though it's not served by users. My server returns the HTML, however with the index.html file being cached, it's returning the version of my html which is missing things (e.g. I replace <!-- app-head --> on the server to add metadata). The SW kicks in and serves the cached file instead of the server.

If I add the html file to the ignore glob, I get the non-precached-url: non-precached-url error described here.

[Charles-1999]

Sorry to pickup an old thread here, however this is causing some confusion for me.

I'm using Vite to SSR a page, however the index.html file gets added to the client bundle even though it's not served by users. My server returns the HTML, however with the index.html file being cached, it's returning the version of my html which is missing things (e.g. I replace <!-- app-head --> on the server to add metadata). The SW kicks in and serves the cached file instead of the server.

If I add the html file to the ignore glob, I get the non-precached-url: non-precached-url error described here.

@userquin I have got a similar problem, how can i exclude the html file.

[Ehesp]

I use this config now - not sure if it's fully correct but seems to be working:

{
  strategies: 'generateSW',
  workbox: {
    // Only precache these files - html should be excluded
    globPatterns: ['**/*.{js,css}'],

    // Don't fallback on document based (e.g. `/some-page`) requests
    // Even though this says `null` by default, I had to set this specifically to `null` to make it work
    navigateFallback: null,
}

This seems to remove the generated config containing the index.html, which is then just handled by the server.

[userquin]

@Ehesp you're right, the default value when undefined is configured by the options module with index.html, so you need to set it to null.

[Ehesp]

I made a quick PR to update the type docs: GoogleChrome/workbox#3106

[jwandekoken]

I use this config now - not sure if it's fully correct but seems to be working:

{
  strategies: 'generateSW',
  workbox: {
    // Only precache these files - html should be excluded
    globPatterns: ['**/*.{js,css}'],

    // Don't fallback on document based (e.g. `/some-page`) requests
    // Even though this says `null` by default, I had to set this specifically to `null` to make it work
    navigateFallback: null,
}

This seems to remove the generated config containing the index.html, which is then just handled by the server.

Thanks. I was having the same issue here, this config. helped out.