Quasar PWA vite injectManifest not caching index.html

[lukadriel7]

What happened?

The default implementation of custom-service-worker uses a fallback code to index.html . However the service worker doesn't cache the index.html file causing the installation to fail. I currently use the following code in quasar.config.js file to fix the issue:

extendInjectManifestOptions(cfg) {
    cfg.additionalManifestEntries = ['index.html'];
},

What did you expect to happen?

The index.html file should be included in the cached asset of self.__WB_MANIFEST

Reproduction URL

https://stackblitz.com/edit/quasarframework-xotzmd

How to reproduce?

1. Create new quasar project
2. Add pwa mode to the project
3. Replace generateSW with injectManifest in quasar.config.js
4. Run quasar dev -m pwa

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

PWA Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 18.12.0

Global packages
  NPM - 9.1.2
  yarn - 1.22.19
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.4
  cordova - You have been opted out of telemetry. To change this, run: cordova telemetry on.
11.0.0

Important local packages
  quasar - 2.10.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.6 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.27 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.28.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - Adriel-PC
  vEthernet (Default Switch) - 172.17.32.1
  WiFi - 192.168.1.3

Relevant log output

Uncaught non-precached-url: createHandlerBoundToURL('index.html') was called, but that URL is not precached. Please pass in a URL that is precached instead.
    at PrecacheController.createHandlerBoundToURL (http://localhost:9200/sw.js:1175:15)
    at createHandlerBoundToURL (http://localhost:9200/sw.js:1655:32)
    at http://localhost:9200/sw.js:1725:9
    at http://localhost:9200/sw.js:1730:3

Additional context

No response

[rstoenescu]

Hi,

While in development mode, almost nothing is precached by the service worker (other than the public folder) because otherwise that will interfere with the source files and will make development very hard, especially when HMR is involved. However, a service worker is still needed and being used (albeit a dumb version of it) so that you the developers can still develop and test the interaction with it through src-pwa/register-service-worker.[js|ts]. It's better to explain this with code rather than words, since there are two ways to configure a PWA (InjectManifest and GenerateSW), so looking at the following file will shed some light on what's going on: https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/modes/pwa/pwa-config.js

For production mode, the index.html is cached and you can see this on Quasar's documentation as well (although docs use SSR+PWA, not just PWA alone, but the same principle applies).

[kevinmelo]

Having the same problem in dev mode. The workaround worked for me

[Phero49]

@kevinmelo have you solved this am having the same issue

[kevinmelo]

@kevinmelo have you solved this am having the same issue

At the end i had to ignore the error in localhost. The pwa still work. The "workaround" i made was broking in production.

[Phero49]

Thanks I will try your way to see if I have any luck

On Tue, Sep 3, 2024, 12:16 Kevin de Melo @.***> wrote:

@kevinmelo https://github.com/kevinmelo have you solved this am having the same issue

At the end i had to ignore the error in localhost. The pwa still work. The "workaround" i made was broking in production.

— Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar/issues/15030#issuecomment-2326142760, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYFT4WTVHRLGKKI4CYLMWBLZUWD6ZAVCNFSM6AAAAAASRJAKISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRWGE2DENZWGA . You are receiving this because you commented.Message ID: @.***>