PWA with Typescript | Quasar Framework

How to contribute

Options & Helpers

Style & Identity

Layout and Grid

Vue Directives

Quasar Plugins

Vue Composables

Security

Quasar CLI (with Vite)

Quasar CLI (with Webpack)

The quasar.config file

Convert to CLI with Webpack

Browser Compatibility

Supporting TypeScript

Directory Structure

CSS Preprocessors

Lazy Loading - Code Splitting

Handling Assets

Prefetch Feature

Handling Webpack

Handling process.env

State Management with Pinia

Testing & Auditing

SPA mode

SSR mode

PWA mode

Configuring PWA

App Icons for PWA

Handling Service Worker

PWA with Typescript

Developing Mobile Apps

Capacitor mode

Cordova mode

Electron mode

Browser Extensions mode

Opening Dev Server To Public

Icon Genie CLI

App Extensions

Quasar Utils

Quasar CLI with Webpack - @quasar/app-webpack

PWA with Typescript

In order to support PWA with Typescript, you will need to rename the extension for your files in /src-pwa from .js to .ts and make the necessary TS code changes.

Also create these files:

/* eslint-disable */

declare namespace NodeJS {
  interface ProcessEnv {
    SERVICE_WORKER_FILE: string;
    PWA_FALLBACK_HTML: string;
    PWA_SERVICE_WORKER_REGEX: string;
    // ...and your own
  }
}

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "lib": ["WebWorker", "ESNext"]
  },
  "include": ["*.ts", "*.d.ts"]
}

Caught a mistake?Edit this page in browser