I have been trying to create ServiceWorker for my website using SvelteKit, but am running into an issue here. I created a file /src/service-worker.ts and in there, I put the following code

import { build, files, prerendered, version } from '$service-worker';

const applicationCache = `applicationCache-v${version}`;
const staticCache = `staticCache-v${version}`;

const returnSSRpage = (path) =>
  caches.open("ssrCache").then((cache) => cache.match(path));

// Caches the svelte app (not the data)
self.addEventListener("install", (event) => {
  event.waitUntil(
    Promise.all([
      caches
        .open("ssrCache")
        .then((cache) => cache.addAll(["/"])),
      caches
        .open(applicationCache)
        .then((cache) => cache.addAll(build)),
      caches
        .open(staticCache)
        .then((cache) => cache.addAll(files))
    ])
      .then(self.skipWaiting()),
  )
})
... reduced code

When running npm run build this code piles perfectly fine and the code runs in the browser. However, my VSCode intellisense gets some stuff wrong. Most notably, it says that the waitUntil property of event does not exist. Property 'waitUntil' does not exist on type 'Event'.ts(2339) among other things, such as Property 'skipWaiting' does not exist on type 'Window & typeof globalThis'.ts(2339) and Cannot find name 'clients'.ts(2304).

Now, I am quite new to Javascript and Typescript, but from my experience, the Intellisense should not output an error that doesn't also appear during pilation. Why does this happen?

I am unsure of what information to provide. My TS version is 4.7.4 which is also the version VSCode is using for Intellisense. I have installed the ESLint extension for JS and TS.

What could be the problem here? Thanks!

I have been trying to create ServiceWorker for my website using SvelteKit, but am running into an issue here. I created a file /src/service-worker.ts and in there, I put the following code

import { build, files, prerendered, version } from '$service-worker';

const applicationCache = `applicationCache-v${version}`;
const staticCache = `staticCache-v${version}`;

const returnSSRpage = (path) =>
  caches.open("ssrCache").then((cache) => cache.match(path));

// Caches the svelte app (not the data)
self.addEventListener("install", (event) => {
  event.waitUntil(
    Promise.all([
      caches
        .open("ssrCache")
        .then((cache) => cache.addAll(["/"])),
      caches
        .open(applicationCache)
        .then((cache) => cache.addAll(build)),
      caches
        .open(staticCache)
        .then((cache) => cache.addAll(files))
    ])
      .then(self.skipWaiting()),
  )
})
... reduced code

When running npm run build this code piles perfectly fine and the code runs in the browser. However, my VSCode intellisense gets some stuff wrong. Most notably, it says that the waitUntil property of event does not exist. Property 'waitUntil' does not exist on type 'Event'.ts(2339) among other things, such as Property 'skipWaiting' does not exist on type 'Window & typeof globalThis'.ts(2339) and Cannot find name 'clients'.ts(2304).

Now, I am quite new to Javascript and Typescript, but from my experience, the Intellisense should not output an error that doesn't also appear during pilation. Why does this happen?

I am unsure of what information to provide. My TS version is 4.7.4 which is also the version VSCode is using for Intellisense. I have installed the ESLint extension for JS and TS.

What could be the problem here? Thanks!

• javascript
• typescript
• visual-studio-code
• svelte

2 Answers 2

You can add "WebWorker" to the pilerOptions.lib in tsconfig.json and declare the type of self in the service worker file:

declare var self: ServiceWorkerGlobalScope;

This will lead to the event types automatically being inferred without further annotations via the event name.

You may need to restart the TS server (there is a mand for that: TypeScript: Restart TS Server).

Still, odd that it would build as is...

This worked very well for me:

const sw: ServiceWorkerGlobalScope = self as unknown as ServiceWorkerGlobalScope;

Now you replace self with sw, which kinda makes more sense, and also you get correct types.