Typescript for ServiceWorkers

Opening for reference and discussion per @IlCallo

In my app I had a need for a customized ServiceWorker (beyond a few Workbox calls–I’m using sockets, indexeddb, etc.). So I’m using the InjectManifest option and I’m off to the races. When the code gets over a hundred lines it’s nice to have Typescript coverage.

TL;DR: I made the src-pwa folder into it’s own mini Typescript project, then Quasar picks up the *.js files as normal.

This is my tsconfig.json inside src-pwa;

{
  "compilerOptions": {
    "newLine": "LF",
    "allowJs": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "target": "es6",
    "typeRoots": [
      ".",
      "../node_modules/@types"
    ],
    "lib": [
      "es6",
      "webworker",
    ],
  },
  "files": [
    "custom-service-worker.ts",
    "register-service-worker.ts"
  ]
}

Then register-service-worker can be made into a .ts file with just a few changes (for example):

...
declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace NodeJS {
    interface ProcessEnv {
      SERVICE_WORKER_FILE: string;
    }
  }
}
...
  registered(registration: ServiceWorkerRegistration) {
...

and my custom-service-worker has this at the top:

declare const self: ServiceWorkerGlobalScope & { __precacheManifest: string[] }; // Not necessarily a string[]; included just to make TS happy

// NOTE: For this typing to work, the version of @types/workbox-sw must match the CDN version of Workbox that Quasar pulls in
interface CdnWorkbox {
  core: typeof import('workbox-core');
  precaching: typeof import('workbox-precaching');
}
declare const workbox: CdnWorkbox;

export {}; // Allow declarations above to kick into effect

and now we get the benefit of Typescript below in the service worker code… e.g.:

self.addEventListener('install', (ev: ExtendableEvent) => {
  console.log('Installing!');
});
...
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

[IlCallo]

@StazriN creating a script like "dev:pwa:ts": "tsc <your TS compiling options> <the files you want to compile> && quasar dev -m pwa" I guess

Otherwise you’ll need to search how Quasar does this and PR it’s support into the core

@sluedecke doesn’t seem so, what do you mean?

[IlCallo]

@rfox12 PWA, Electron and SSR folders now supports TS files now in Qv2! We’ll try to backport the feature to Qv1 too after Qv2 stable release, if time permits.

We also plan to automatically generate TS files when adding a mode to TS codebase, you can keep track of that effort here: https://github.com/quasarframework/quasar/issues/8572

Closing as it’s already into official roadmap: https://roadmap.quasar.dev/