quasarframework
Quasar PWA vite injectManifest not caching index.html
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?
- Create new quasar project
- Add pwa mode to the project
- Replace generateSW with injectManifest in quasar.config.js
- 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
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).
