Closed Dragomir-Ivanov closed 1 year ago
@Dragomir-Ivanov you can try with this configuration, register your sw with your code in main.tsx
(IIRC there is a pending PR here to be included about configuring no injection point):
srcDir: 'src',
filename: 'service-worker.js`,
strategies: 'injectManifest',
injectRegister: false,
manifest: false,
injectManifest: {
injectionPoint: null,
}
@userquin Thank you for your fast response.
Unfortunately it didn't work. Details:
vite.config.ts
plugins: [
react(),
tsconfigPaths(),
VitePWA({
srcDir: "src",
filename: "service-worker.js",
strategies: "injectManifest",
injectRegister: false,
manifest: false,
injectManifest: {
// eslint-disable-next-line no-null/no-null
injectionPoint: null,
},
devOptions: {
enabled: true,
},
}),
],
My registering code stays the same.
For yarn dev
it gives:
Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:3000/service-worker.js for scope http://localhost:3000/ encountered an error during installation.
For yarn build
it gives:
error during build:
Error: Error running plugin hook closeBundle for vite-plugin-pwa:build, expected a function hook.
at error (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:198:30)
at throwInvalidHookError (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:22682:12)
at /home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:22823:24
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Promise.all (index 0)
at async Object.close (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:23700:13)
at async Promise.all (index 0)
at async build (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/dist/node/chunks/dep-9c153816.js:38964:13)
at async CAC.<anonymous> (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/dist/node/cli.js:738:9)
error Command failed with exit code 1.
@Dragomir-Ivanov update vite to 3 or 3.1, check readme docs: https://github.com/vite-pwa/vite-plugin-pwa#-install
@userquin Ah, I am sorry. Didn't saw the version 3.1 requirement. After the update:
yarn build
adds service-worker.js
to dist/
. OK!
yarn dev
doesn't allow the browser to register the SW:
Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:5173/service-worker.js for scope http://localhost:5173/ encountered an error during installation.
I do have
devOptions: {
enabled: true,
},
@Dragomir-Ivanov check https://vite-pwa-org.netlify.app/guide/development.html#injectmanifest-strategy, you need to use custom sw registration via:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(
import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw'
)
}
If you're using import statements inside your sw (will work only on chromium based browsers):
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(
import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw',
{ type: import.meta.env.MODE === 'production' ? 'classic' : 'module' }
)
}
@userquin Thanks a ton! It worked!
Not using import
s, nor Chromium based browser. This setup seems to work with FF.
I guess, a short section in the documentation for custom SW
is justified, to collect all the knowledge in a single place.
Again Thank You Joaquín, Best
I guess, a short section in the documentation for
custom SW
is justified, to collect all the knowledge in a single place.
PR welcome
Will do!
@userquin just curious, would it be feasible to extract the SW logic into a separate plugin (which this would depend on)? Or is it all too intertwined?
Greetings, I understand what
vite-pwa
is made to support full fledged PWAs, however I don't want PWA support(caching), but only to install SW forfetch
interception, in order to make transparent refresh for auth token.Can you add such simple support to
vite-pwa
, or guide how to do it manually. My project structure is:I do in my
main.tsx
:However
service-worker
is not copied todist/
and can't be loaded indevelopment
.Thank you and best, Dragomir