Comments (19)
@GaryB432 I Will check it tmr
from sveltekit.
@GaryB432 I cannot reproduce your warning, SvelteKit do 2 builds, your warning can be shown when building the client, since SvelteKit prerender process has not yet run, and so, prerendered folder missing: check this response #27 (comment)
from sveltekit.
@GaryB432 can you check the version of SvelteKit? We're trying to fix this plugin, latest SvelteKit changes breaks pwa plugin
from sveltekit.
+-- @sveltejs/[email protected]
| `-- @sveltejs/[email protected] deduped
+-- @sveltejs/[email protected]
`-- @vite-pwa/[email protected]
`-- @sveltejs/[email protected] deduped
from sveltekit.
Thanks for looking! That makes sense for the warning for the server build phase. My bigger issue is the uncaught non-precached-url
error in the browser dev tools that is keeping the example from running. Is that one reproducible?
from sveltekit.
@GaryB432 I sent a new PR, maybe it is related with your problem #30, with that patch it is working, not tested with current version:
from sveltekit.
That is a beautiful screenshot. I will monitor the PR and try again when merged. thanks!
from sveltekit.
monkey-patching and observing createManifestTransform
, I see that all the entries
have urls that start with client/
and none of them end with .html
. Not event index.html
is in entries
. No prerendered
or anything else in the sample. So the if
block is set up for other adapters (?? over my head!) Maybe that's related to the createHandlerBoundToURL('/')
not finding /
.
from sveltekit.
yes, you can provide your own manifestTransform, copy the one in the PR and add it on workbox: { manifestTransform: [] }
array, it should work
from sveltekit.
It is the one from the PR that does not include index.html
in entries
so line 88 is not hit. I don't know enough about the output
folder or sveltekit internals yet to know how to add it. Moreover, I am unsure the sample is more than a suggestion and should work out of the box (my assumption) is correct.
from sveltekit.
@GaryB432
Try this, add it to your pwa options, if workbox present just copy the manifestTransform array (ignoring sveltekit options, I just review the options and update the values: suffix: '', adapterFallback: false
):
workbox: {
manifestTransform: [async (entries) => {
const defaultAdapterFallback = 'prerendered/fallback.html'
const suffix = '' // options?.trailingSlash === 'always' ? '/' : ''
let adapterFallback = false // options?.adapterFallback
let excludeFallback = false
// the fallback will be always generated by SvelteKit.
// The adapter will copy the fallback only if it is provided in its options: we need to exclude it
if (!adapterFallback) {
adapterFallback = defaultAdapterFallback
excludeFallback = true
}
// the fallback will be always in .svelte-kit/output/prerendered/fallback.html
const manifest = entries.filter(({ url }) => !(excludeFallback && url === defaultAdapterFallback)).map((e) => {
let url = e.url
// client assets in `.svelte-kit/output/client` folder.
// SSG pages in `.svelte-kit/output/prerendered/pages` folder.
// fallback page in `.svelte-kit/output/prerendered` folder (fallback.html is the default).
if (url.startsWith('client/'))
url = url.slice(7)
else if (url.startsWith('prerendered/pages/'))
url = url.slice(18)
else if (url === defaultAdapterFallback)
url = adapterFallback!
if (url.endsWith('.html')) {
if (url.startsWith('/'))
url = url.slice(1)
if (url === 'index.html') {
url = base
}
else {
const idx = url.lastIndexOf('/')
if (idx > -1) {
// abc/index.html -> abc/?
if (url.endsWith('/index.html'))
url = `${url.slice(0, idx)}${suffix}`
// abc/def.html -> abc/def/?
else
url = `${url.substring(0, url.lastIndexOf('.'))}${suffix}`
}
else {
// xxx.html -> xxx/?
url = `${url.substring(0, url.lastIndexOf('.'))}${suffix}`
}
}
}
e.url = url
return e
})
return { manifest }
}],
}
from sveltekit.
hmmm.. Cannot find name "base"
and Type 'string' is not assignable to type 'boolean'.
for adapterFallback
in a couple places. (clarifying I am trying to build examples/sveltekit-ts
on a fresh clone.)
from sveltekit.
Change url = base
with base = '/'
from sveltekit.
hmmm..
Cannot find name "base"
andType 'string' is not assignable to type 'boolean'.
foradapterFallback
in a couple places. (clarifying I am trying to buildexamples/sveltekit-ts
on a fresh clone.)
Yes, I configure previous manifestTransform using the example, no fallback and no suffix, I forgot to replace base
with '/'
...
from sveltekit.
I added const base = '/'
and also, because adapterFallback
is now a boolean and not assignable to url
, I replaced else if (url === defaultAdapterFallback) url = adapterFallback!
with else if (url === defaultAdapterFallback) throw new Error("defaultAdapterFallback is not supported")
.
Still getting Uncaught non-precached-url: createHandlerBoundToURL('/') was called, but that URL is not precached.
as in the OP
from sveltekit.
configure navigateFallback: null
from sveltekit.
I am not sure what that means. I wound up using the built-in service worker and making my own webmanifest per their documentation. I'll try vite-pwa
again some day if I see this issue closed, i.e., the example runs.
from sveltekit.
As I continued testing, I found out that the problem was caused by missing index.html.
I forcibly added processing for index.html as follows.
As a result, it worked normally.
demo
https://my-dashboard-r96qwqiv0-chooco13.vercel.app/
// vite.config.ts
injectManifest: {
globPatterns: ["client/**/*.{js,css,ico,png,svg,webp,woff,woff2}"],
manifestTransforms: [
async (entries) => {
entries.push({
url: "/index.html",
revision: null,
size: 0,
});
// the fallback will be always in .svelte-kit/output/prerendered/fallback.html
const manifest = entries
.map((e) => {
let url = e.url;
console.log(url);
if (url.startsWith("client/")) {
url = url.slice(7);
} else if (url.startsWith("prerendered/pages/")) {
url = url.slice(18);
}
if (url.endsWith(".html")) {
if (url.startsWith("/")) {
url = url.slice(1);
}
if (url === "index.html") {
url = "/";
} else {
const idx = url.lastIndexOf("/");
if (idx > -1) {
// abc/index.html -> abc/?
if (url.endsWith("/index.html")) {
url = `${url.slice(0, idx)}`;
} // abc/def.html -> abc/def/?
else {
url = `${url.substring(0, url.lastIndexOf("."))}`;
}
} else {
// xxx.html -> xxx/?
url = `${url.substring(0, url.lastIndexOf("."))}`;
}
}
}
e.url = url;
return e;
});
return { manifest };
},
],
},
from sveltekit.
closed via #32
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
- Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}] HOT 13
- 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.