Fallback file does not exist in injected manifest (for SPA app)

[fkrauthan]

I am currently creating a SPA using Svelte 5, SvelteKit 2 and Vite 6. For the SvelteKitPWA plugin I use the injectManifest strategy and I configured my fallback(for sveltekit adapater static) to be app.html.

When I build my project I see the app.html file correctly in the build folder. However when I inspect the injected data in my service worker the entry for app.html is missing (as a matter of fact not even an app entry is there.

I looked a bit into this plugins code and it seems like you guys are expecting a fallback.html inside the prerender/pages folder (inside .svelte-kit). However that folder does not contain a fallback.html file (nor does it contain an app.html file) the only files it contains are the once from my actual pre-rendered pages.

Not sure if that is some type of recent change in how Vite/SvelteKit works or am I missing some setup?

[userquin]

can you provide a minimal reproduction?

[fkrauthan]

I quickly created a mini prototype that has exactly the same issue here: https://github.com/fkrauthan/sveltekit-pwa-issue

The code for that example was created with a fresh sveltekit creation using npx sv create and then I just added the required dependencies for Vite PWA (SvelteKit).

[userquin]

app.html is not a page, it is just the kit html template to render content, you need to prerender a page to be used as fallback, check the examples in the repo, using the root page (+page.ts)

[fkrauthan]

But based on the documentation that is exactly what I suppose to be using. https://vite-pwa-org.netlify.app/frameworks/sveltekit#sveltekit-and-adapters says I should set adapterFallback to the same value as fallback for the adapter-static. Which in return requires me to specify a filename that is NOT an actual page (otherwise you get a warning during compile time).

[fkrauthan]

Based on the SvelteKit documentation (https://svelte.dev/docs/kit/single-page-apps#Usage) the fallback page generated html is actually special in regards of using absolute paths for all imports. It is also the HTML we should be configuring for our web hosters to serve in case a real file was not found on disk.

[userquin]

To use offline support you need:

• an html page at build time since the sw precache requires that file (sw build will run after kit prerender process), the route/page url must be present in the sw precache.
• the server should return that page when requested (via its logical route name: including traling slash or not): the pwa plugin will transform .html pages into logical names before adding them to the sw precache manifest

So, you need to deal with that, maybe you can use 2 different pages for adapter and sw offline fallback.

[userquin]

Here the logic: https://github.com/vite-pwa/sveltekit/blob/main/src/config.ts#L95-L157

[userquin]

I'm going check what's the build output in your reproduction...

[fkrauthan]

The big issue I see is that the generated app.html (produced by sveltekit as the fallback entry point) uses absolute URLs for all references (to e.g. JS resources etc). While compiled pages (like the index.html or test.html in my erxample) use relative paths. So not sure if creating a empty dedicated fallback.html will solve my issues here as that will also have relative URLs.

[userquin]

Yeah, the app.html is on build folder but not generated by kit, I guess it is the adapter and so the kit pwa plugin cannot do anything since the build folder is missing when the plugin builds the sw.

No idea who is generating the app.html, kit or the adapter.

/cc @benmccann

[fkrauthan]

It looks like the adapter-static is triggering the generation here https://github.com/sveltejs/kit/blob/9a4a41170ab3e17f947eb4a67944958b22da4236/packages/adapter-static/index.js#L69

And this seem to be the way sveltekit internally generates the file: https://github.com/sveltejs/kit/blob/9a4a41170ab3e17f947eb4a67944958b22da4236/packages/kit/src/core/adapt/builder.js#L156

Not sure if it helps. But somehow that generated file need to be embedded into the manifest of your plugin. Otherwise at least with the current sveltekit version I don't think it will be possible to have an fully offline ready app.

[userquin]

If you request that html page, what's the response from the server? requesting /app or /app.html works?

[fkrauthan]

At least based on how I deployed my page to firebase hosting, I can request /app and it returns the fallback HTML .

[userquin]

ok, so the problem is about using kit to generate an SPA (csr: client side rendered): https://svelte.dev/docs/kit/single-page-apps

[fkrauthan]

The problem is that kit generated everything for an spa. But the pwa plugin is not able to see (and include into manifest) one critical file which in return means my app is not fully functional offline.

[userquin]

I'm trying to add the app.html to the sw manifest...

[userquin]

[userquin]

Preparing PR to your reproduction...

[userquin]

PR in the repo: fkrauthan/sveltekit-pwa-issue#1

The problem, Sveltekit SPA adapter running at the end of the process, I need to check why this behavior (maybe we can change it):

[userquin]

We can use the version.json file to use the hash/revision for the app.html in the sw manifest, updating PR (preview + offline + page refresh):

[fkrauthan]

Oh nice. Is the plan to have that workaround be part of this plugin in the near future? Or will this be always a case where users will have to re-implement this workaround?

[fkrauthan]

Btw re using app.html vs app. The way I configured firebase hosting /app.html redirects to /app (which then returns the HTML content). Not sure how service worker caching works with redirects like that (still pretty new to this whole service worker/fully offline apps)?

[userquin]

I'm going to add spa option with a few parameters, in the meantime use the hack.

Replace app.html with /app here https://github.com/fkrauthan/sveltekit-pwa-issue/pull/1/files#diff-6a3b01ba97829c9566ef2d8dc466ffcffb4bdac08706d3d6319e42e0aa6890ddR138 also in the sw here https://github.com/fkrauthan/sveltekit-pwa-issue/blob/master/src/service-worker.ts#L15

[userquin]

@fkrauthan can you check fkrauthan/sveltekit-pwa-issue#2 ? In your case, you can use in your real app:

spa: {
  fallbackMapping: '/app' // or just 'app'
}

Use the kit pwa version from the PR, once tested I can release a new patch version.

[fkrauthan]

I assume you mean setting adapterFallback? But I can confirm using

      kit: {
        adapterFallback: "app",
        spa: true,
      },

seem to work for me with your custom version.

In general I wonder if just setting adapterFallback should be enough to auto turn on spa mode? I guess only spa mode would require an adapter fallback to begin with?

[userquin]

oh, so we can remove the fallbackMapping option from spa... (I'll keep it)

You can also use:

kit: {
  adapterFallback: "app.html",
  spa: {
    fallbackMapping: 'app',
  }
},

[userquin]

@fkrauthan kit pwa v0.6.7 released