Updating Sveltekit/Vite now throws: request in handle has been replaced with event. See https://github.com/sveltejs/kit/pull/3384 for details

[inspiredlabs]

I am trying to use SveltekitPWA with the Vite/Svelte inspector, which is available using an entry to svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
const config = {
  experimental: { inspector: true },
...

However, merging SveltekitPWA with the latest Sveltekit, highlights breaking changes – notably: hooks.ts throws: sveltejs/kit#3384.

Have you had a chance to look at the new interface?

Repo: https://github.com/inspiredlabs/inspector
demo: https://offline-phi.vercel.app

[FunMiles]

@inspiredlabs Yes there are some incompatibilities with the new sveltekit. I have done fixes on a local copy so far but have been a bit too busy to complete a clean work to push back. Hopefully, I'll find time this weekend. I'll try to give more info on here in a few hours if you want to put them in by hand yourself in your project.

[FunMiles]

I have a working local fixed version. I need to check it works correctly as a PWA and then I will push it.

PS: I pushed it but cannot deploy it to Vercel for testing. It builds correctly locally but not on Vercel.

[inspiredlabs]

PS: I pushed it but cannot deploy it to Vercel for testing. It builds correctly locally but not on Vercel.

I got the deployment working on Vercel following a Sveltekit installation and merge – see: app.html now has %sveltekit.things% as opposed to %svelte.things%.

Although now dev tools Lighthouse throws:

__layout.svelte-06035f0d.js:2 cannot register service worker DOMException: Failed to register a ServiceWorker for scope ('https://inspectort.vercel.app/') with script ('https://inspectort.vercel.app/service-worker.js'): Operation has been aborted

(anonymous) @ __layout.svelte-06035f0d.js:2
inspectort.vercel.app/:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://inspectort.vercel.app/') with script ('https://inspectort.vercel.app/service-worker.js'): Operation has been aborted

It works!

NB: there are two requirements here:

• import { build, files, timestamp } from '$service-worker'; has been deprecated.
• package.json req. "svelte": "^3.48.0" and "@types/cookie": "^0.5.1", see: https://github.com/inspiredlabs/inspector/commit/1102018472b0e1edacf96be6027ad7ab5467e9f0#diff-0aba05b7e68a2bb0e8cebbd6297fafc218eaeff08345a12bd379181c4a88e454
• Lighthouse demo: https://inspectort.vercel.app/

[FunMiles]

Two things:

• Can you create a pull request with the fixes you list?
• My inability to test it seems to be a known issue. I emailed vercel's support asking how to create a fresh or clean deployment but have not yet heard from them Your deployment works because it is a fresh deployment, I presume. Mine, trying to update the existing one, fails. See this post in a thread on the subject about it: Automated deployments of the kit example app (i.e. vercel, netlify, cloudflare) fail with 50x sveltejs/kit#4135 (comment)

PS: Third thing, I am not seeing %svelte.things% in the code. Is that something purely of yours? I did change a few svelte into sveltekit, but not with things.

[inspiredlabs]

PS: Third thing, I am not seeing %svelte.things% in the code. Is that something purely of yours? I did change a few svelte into sveltekit, but not with things.

Mea culpa, for the shorthand, what I meant was: %sveltekit.head% and %sveltekit.body% from this working version of SveltekitPWA which has %svelte.head% and %svelte.body%, obv. this no longer works as it did. Which you changed.

[inspiredlabs]

A PR won't work as there are many changes to Sveltekit.

Here's how to get it working:

• start a new project, which will deploy to Vercel OOTB.
• open the contents of your zip: ~/SveltekitPWA-main, and merge the following:
  • your up-to-date project files (hooks.js, ReloadPrompt/index.svelte, etc).
  • svelte.config.js and comment out target: '#svelte',
  • OPTIONAL: I also added: const config = { experimental: { inspector: true }, ... }, to svelte.config.js, although this doesn't affect the offline capabilities.
  • open app.html and ensure %sveltekit.head% and %sveltekit.body% are there.
  • replace instances of timestamp with version in service-worker.ts
  • update your package.json, as per this: package.json.
  • npm install
    • you might need to update: npm install --save core-js@^3 separately.
  • npm build && npm run preview
  • deploy to Vercel with a temporary name, and test it works.
  • delete your old "nice-name" deploy and redeploy with the nice-name.

Feel free to clone this public repo, if I have missed something in the instructions.

[FunMiles]

I have done some changes to the config.json and it seems it does address my deployment issues. I will push the changes after a bit of clean up.

[FunMiles]

The changes have been pushed. Unless you see anything else, I will close this issue tomorrow.

[FunMiles]

Closing this issue.