Typescript for ServiceWorkers

[rfox12]

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, {});

[rfox12]

Despite his use of Angular, this article by Sebastien Dubois may be relevant:
https://medium.com/@dSebastien/building-a-service-worker-with-workbox-5-typescript-webpack-and-angular-5015ba76340b

I found this StackOverflow interesting, Jake Archibald is a Chrome dev (nice to know we're not the only ones struggling with Typescript...) https://stackoverflow.com/questions/56356655/structuring-a-typescript-project-with-workers/56374158#56374158

But ultimately I struggled to get the parent-child tsconfig working. Moreover, it wasn't clear to me the benefit of that linkage would be (or is). So I actively exlucde src-pwa from parent (project) tsconfig.json.

I did point my eslintrc.js file to the new "project" to get VSCode working. (extracted from my setup):

    project: [
      resolve(__dirname, './tsconfig.json'),
      resolve(__dirname, './src-pwa/tsconfig.json'),
      resolve(__dirname, './server/tsconfig.hosted.json'),
      resolve(__dirname, './server/tsconfig.on-prem.json'),
    ],
    tsconfigRootDir: __dirname,

[IlCallo]

Thank you!
Will add this to my list of things to which add TS support.
If you want to help others further, you can try to create a PR which allow others to get an easy and clean setup out of the box.

Modes still doesn't have TS support, but we can discuss how to add them in a coherent way (adding a --ts flag when adding them, for example)

[pdanpdan]

cross reference:
#8340
#7153

[StazriN]

Hi, I tried this solution but it fails when I run quasar dev -m pwa because .quasar/client-entry.js wants to include register-service-worker.js and custom-service-worker.js but these files don't exist there are only .ts files. How can I compile these .ts files to .js before quasar dev -m pwa?

[sluedecke]

Is it a 'duplicate' of: #8102 ?

[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: #8572

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