sveltekit: Uncaught non-precached-url: non-precached-url :: [{"url":"/"}]

Hi, checking in. Is the fix for this one on the roadmap or is there some workaround I should be applying in the meantime (wasn’t clear from the comments). Thanks!

@kyllerss pwa plugin is just a wrapper for workbox-build, that is file based, that’s, to generate the sw precache manifest (injection point/self.__WB_MANIFEST) it will traverse a folder, and so kit integration will configure pwa plugin to run after prerender but before adapter processes in kit/vite lifecycle: we need the assets but also the prerendered pages.

Once prerender finish, pwa plugin will call workbox-build to generate the sw precache manifest: we need to configure pwa plugin properly via globDirectory on workbox or injectManifest : workbox-build will use globDirectory to traverse it and generate the sw with the sw precache manifest. We also need to configure properly the output folder, that’s, the sw.js should be generated in the kit output build folder, that adapter will copy to the final build folder.

Once we have configured the pwa plugin, we can add some hooks to workbox-build before sw.js is written to disk: kit integration adds a ManifestTransform (will receive file paths in globDirectory and their revision/hash, a list of ManifestEntry objects) to apply some custom transformations (pretty url and fallback url for adapter). You can check it here, the config module has a few comments about kit output folder: https://github.com/vite-pwa/sveltekit/blob/main/src/config.ts#L60

With latest vite-plugin-pwa version released 0.14.0 (kit integration not updated nor released yet) we can use custom sw without injection point (I also need to update the docs to add this new option).

I ran into the same problem. In my case, I am using the adapter-netlify. I will admit much of this is over my head. I tried some of the initial suggestions, but I feel the conversation moved beyond my understanding of the internals of the frameworks involved.

Should I assume the pwa plugin will remain as is and I should work through the information in this issue, or would that work be nullified by an upcoming release that will address this issue?

Thank you all again for the great work you are doing!

@phil-w You need to prerender that route, workbox requires the html file, check if the index.html is present in your kit output folder, inside prerender folder

I’m still having this issue with the latest with adapter-auto deployed on vercel. Simultaneously I’m also struggling where my default route in development seems to be caching a redirect (but rendering the content from the redirect at the / route). I’m going to keep diving in, but wanted to give a heads up. vite config below.

SvelteKitPWA({ srcDir: './src', mode: process.env.NODE_ENV, // will default to process.env.NODE_ENV scope: '/', base: '/', selfDestroying: process.env.SELF_DESTROYING_SW === 'true', manifest: { short_name: 'XXXX', name: 'XXXX', start_url: '/', scope: '/', display: 'standalone', theme_color: "#ffffff", background_color: "#ffffff", icons: [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" }, { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": 'any maskable', } ], }, workbox: { globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'] }, devOptions: { enabled: true, type: 'module' }, // if you have shared info in svelte config file put in a separate module and use it also here kit: {} })

`

This is also failing for me. I’ll try the SvelteKit suplied service worker, but it would be cool to have a big notice saying vite-pwa doesn’t work in SvelteKit if you’re using adapter-node` so we don’t lose so much time trying to guess what happens.

@Cluster2a I’ll check it tmr, thx

@Cluster2a can you create a minimal repro?

https://github.com/Cluster2a/pwa_examle - same stuff with the wrong URLs.

@userquin I am using the standard service worker.

import {
	cleanupOutdatedCaches,
	createHandlerBoundToURL,
	precacheAndRoute
} from 'workbox-precaching';
import { NavigationRoute, registerRoute } from 'workbox-routing';

declare let self: ServiceWorkerGlobalScope;

self.addEventListener('message', (event) => {
	if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();
});

// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST);

// clean old assets
cleanupOutdatedCaches();

let allowlist: undefined | RegExp[];
if (import.meta.env.DEV) allowlist = [/^\/$/];

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('/'), { allowlist }));

After removing the offline part, the service worker is working fine. But what If I want to use the offline mode?