Comments (13)
You should prerender at least 1 page, by default workbox will use the entry point (in kit the / or base path). You can try adding the export for prerender in +page.ts
from sveltekit.
Doing this removed the error when registering the service worker but created a new issue.
When I load the page https://my.website.com/ at the root or event https://my.website.com/home, it loads without any issue
When I load a page with a subroute like https://my.website.com/intervention/87776318, svelte tries to load all the .js and .css files from this route url https://my.website.com/intervention
and not https://my.website.com/
.
Because they are not loaded from the root of the site, I get a 404 error for everything and I'm being shown the prerendered page.
Also, the service worker is well registered, but when I try to go in Chrome -> Inspect -> Application -> Service workers and click on "Push", nothing happens. I added logs in my service-worker.js and trie to see them in chrome://serviceworker-internals/
but they don't appear. It works without any issue in development. Do you know what could cause this ?
Thanks
from sveltekit.
@HoekWax you should exclude any dynamic page from sw interception via workbox.navigateFallbackDenyList
, check this entry using Nuxt 3: vite-pwa/docs#58 (comment)
from sveltekit.
This works, thanks
Now I'm setting the strategy as injectManifest so that I can customize the service worker, in order to show push notifications especially.
I have vite.config.ts
at the root and ./static/service-worker.js
Here is what my simplified config looks like
{
registerType: 'autoUpdate',
base: '/',
scope: '/',
srcDir: 'static',
filename: 'service-worker.js',
strategies: 'injectManifest'
}
I get the following error when doing a yarn build
Error: The 'swSrc' file can't be read. ENOENT: no such file or directory, open '/Users/geraudm/Documents/Work/fixee/fixee-web/.svelte-kit/output/client/service-worker.js'
at injectManifest (/Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/workbox-build/build/inject-manifest.js:70:15)
at async Object.handler (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/@vite-pwa/sveltekit/dist/index.mjs:189:31)
at async PluginDriver.hookParallel (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/rollup/dist/es/shared/node-entry.js:24584:17)
at async Object.close (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/rollup/dist/es/shared/node-entry.js:25901:13)
at async build (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46487:13)
at async CAC.<anonymous> (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/vite/dist/node/cli.js:812:9)
I try to change the srcDir or the filename, is doesn't change anything. Same thing when changing the "swSrc" value in the injectManifest option.
from sveltekit.
@HoekWax pwa kit plugin will use kit sw internal build, if you don't configure kit properly (files.serviceWorker
) the sw will be missing, use the defaults or just configure pwa plugin and kit properly (I suggest you to move it to src folder): remember to disable kit sw registration, add register false in the kit.serviceWorker
entry in svelte config file, check this page in the docs https://vite-pwa-org.netlify.app/frameworks/sveltekit.html.
serviceWorker: {
register: false,
},
from sveltekit.
I updated my config but still have the same issue
Here is my config
svelte.config.js
const config = {
compilerOptions: {
sourcemap: true,
enableSourcemap: true
},
preprocess: vitePreprocess(),
kit: {
adapter: adapterNode(),
version: {
name: pkg.version
},
// https://github.com/vite-pwa/sveltekit/issues/63#issuecomment-1710361375
serviceWorker: {
register: false
},
// https://vite-pwa-org.netlify.app/frameworks/sveltekit.html#generate-custom-service-worker
files: {
serviceWorker: 'src/service-worker.js'
}
}
};
vite.config.ts
export default defineConfig({
define: {
'process.env.NODE_ENV':
process.env.NODE_ENV === 'development' ? '"development"' : '"production"'
},
build: {
// We build the sourcemap for sentry debug
sourcemap: true
},
plugins: [
autoImport({
components: [
'./src/lib/components/atoms',
'./src/lib/components/mols',
'./src/lib/components/orgs'
]
}),
sveltekit(),
SvelteKitPWA({
registerType: 'autoUpdate',
base: '/',
scope: '/',
srcDir: 'src',
filename: 'service-worker.js',
mode: 'production',
devOptions: {
enabled: false
},
includeAssets: [
...
],
manifest: {
...
},
workbox: {
navigateFallbackAllowlist: [/^\/$/], // This regex will only match the "/" route
navigateFallbackDenylist: [/^(?!\/$).*/] // This regex will match all routes except "/"
},
strategies: 'injectManifest'
}),
sentryVitePlugin({
...
})
],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
});
from sveltekit.
Can I give you more informations that could help ?
from sveltekit.
@HoekWax can you check if there is some service-worker.js in the output build?
from sveltekit.
There's not, .svelte-kit/output/client is empty
from sveltekit.
no makes sense, that folder is the kit output build for the client:
from sveltekit.
It's empty when I use injectManifest, because of Error: The 'swSrc' file can't be read. ENOENT: no such file or directory
but works and has something when I use generateSW
from sveltekit.
Can you try removing srcDir and filename from pwa options and the service worker name from files in kit config file?
from sveltekit.
Well I found what caused the issue by disabling it, the thing is that it would be nice if they both worked together.
The issue is caused by the sentryVitePlugin() plugin that I added right after SvelteKitPWA().
When I comment it and compile, it works.
If I put it after svelte() but before SvelteKitPWA(), is causes the same problem.
After I wrote this, I tested some other things and came back to the same config as before and now it works.
I guess disabling it and adding it again solved something.
My sentryVitePlugin config wasn't configured well and caused another issue, I fixed it, now everything works !!
Thanks you very much for your time, I really appreciate it !
from sveltekit.
Related Issues (20)
- Example project renders home page on missing routes HOT 5
- Failed to load config v0.2.1 HOT 3
- Add a test
- Can't get @vite-pwa/sveltekit to work out-of-the-box HOT 14
- Having an issue with ssr = false HOT 8
- Issues with SPA HOT 1
- Inject Register script or inline has no effect on output HTML. HOT 6
- [Info] Cloudflare Adapter Routes misses vite-pwa HOT 1
- Cannot find module 'virtual:pwa-info' or its corresponding type declarations HOT 26
- Importing 'virtual:pwa-register' causes bug on build HOT 3
- Make client Javascript work offline HOT 2
- Deprecated packages HOT 2
- Navigating to SvelteKit error page after a new build causes infinite page reload loop HOT 6
- InjectManifest `The 'swSrc' file can't be read. ENOENT: no such file or directory` error on Gitlab CI HOT 5
- Uncaught ReferenceError: process is not defined for injectManifest HOT 1
- Error: [InjectManifest] 'plugins' property is not expected to be here. HOT 1
- Support Node v20 HOT 1
- Uncaught SyntaxError: Unexpected token 'export' HOT 3
- `_app/version.json` should be included in sw precache manifest
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 sveltekit.