I am looking to develop a single-page application that can be accessed offline. To achieve this, I have decided to implement a PWA Service Worker in my Vue webapp using TypeScript and Workbox. I found useful examples and guidance on how to do this at .
However, during the TypeScript build process, I encountered several TS2403 errors such as:
node_modules/typescript/lib/lib.webworker.d.ts:5720:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'onoffline' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.
// ...
Found 21 errors in 2 files.
Errors Files
3 node_modules/typescript/lib/lib.dom.d.ts:25
18 node_modules/typescript/lib/lib.webworker.d.ts:25
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5938c9180c895978a8f808691a5d5cbd5cbd5">[email protected]</a> build: `vue-tsc --noEmit && vite build`
npm ERR! Exit status 2
Below are the steps I followed:
Firstly, I installed the Vite plugin by running the command:
npm i vite-plugin-pwa -D
Then, in the vite.config.ts file, I made the following addition:
import { VitePWA } from "vite-plugin-pwa";
//...
VitePWA({
strategies: 'generateSW', // default
includeAssets: [ "favicon.svg", /* ... */ ],
manifest: {
name: "Name of your app",
// ...
},
}),
// ...
The initial build worked fine, but subsequent steps led to the aforementioned error.
Next, in the same vite.config.ts file, I added configuration for using TypeScript:
VitePWA({
srcDir: 'src',
filename: 'sw.ts',
workbox: {
swDest: "sw.js"
},
strategies: 'injectManifest',
// ...
I then updated the tsconfig.json by including WebWorker in the lib array and adding types:
//"lib": ["esnext", "dom" ], // before
"lib": ["esnext", "dom", "WebWorker"],
"types": ["vite-plugin-pwa/client"]
Finally, I created a new file sw.ts in the src folder with the following content:
/// <reference lib="WebWorker" />
import { skipWaiting, clientsClaim } from "workbox-core"
import { precacheAndRoute } from "workbox-precaching";
declare const self: ServiceWorkerGlobalScope
precacheAndRoute(self.__WB_MANIFEST);
skipWaiting();
clientsClaim();