Comments (9)
Will do!
from docs.
@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,
}
from docs.
@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.
from docs.
@Dragomir-Ivanov update vite to 3 or 3.1, check readme docs: https://github.com/vite-pwa/vite-plugin-pwa#-install
from docs.
@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,
},
from docs.
@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' }
)
}
from docs.
@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
from docs.
I guess, a short section in the documentation for
custom SW
is justified, to collect all the knowledge in a single place.
PR welcome
from docs.
@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?
from docs.
Related Issues (20)
- automatic cutting
- Typo HOT 6
- Doc around caching strategy is confusing. HOT 4
- How to set ignoreVary for matching cache in ? HOT 2
- self.skipWaiting is not a function HOT 6
- `devTools.enabled` in strategy `generateSW` breaks due to wrong `globDirectory` HOT 1
- No workbox debug logs in with `devtools.enabled` and strategy `injectedManifest` HOT 1
- Where to put the manifest generated data? HOT 4
- [BUG]: custom envPrefix doesn't work when building
- Cleaning local storage on automatic reload
- Add an example to implement Push Notifications? HOT 6
- Is it possible to change the index.html file name?
- Warnings on setting up a new workspace HOT 1
- Server keeps reloading in dev-mode on GET requests
- Create manifest.webmanifest in a sub directory of public HOT 3
- Ability to track download progress?
- Any way to know if you're in a PWA? HOT 1
- Change background color of maskable icons HOT 4
- "@vite-pwa/nuxt": "^0.1.1" - manifest.webmanifest is 404 HOT 1
- Generate PWA icons using favicon.inbrowser.app HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docs.