Cached files does not load pages except "/" (base path) in sveltekit #665
Comments
|
try setting |
I tried it, now page loads but it does not load the related page. It loads the main page instead. Current behaviour: I route to Website url is |
|
Any SSR page or api call must be excluded from sw interception, check vite-pwa/sveltekit#65 NOTE: any page not being prerendered will not have the corresponding html page in the dist folder, on page refresh the entry will not be in the sw precache manifest and the sw will redirect/forward to fallback page, you need to exclude SSR pages from sw interception including them in the |
Unfortunately still opens the home page when I try to route dynamic ssr pages. Here are what I added to the config regarding to the issue that you suggested to look at. I defined const navigateFallbackDenyList = [
// prettier-ignore
new RegExp("/^\/[^\/]+\/?$/") /* eslint-disable-line */,
// prettier-ignore
new RegExp("/^\/[^\/]+\/posts\/[^\/]+\/?$/") /* eslint-disable-line */,
// prettier-ignore
new RegExp("/^\/profile\/[^\/]+\/?$/") /* eslint-disable-line */,
// prettier-ignore
new RegExp("/^\/posts\/[^\/]+\/?$/") /* eslint-disable-line */,
// prettier-ignore
new RegExp("/^\/topics\/[^\/]+\/?$/") /* eslint-disable-line */,
];Also defined {
urlPattern: ({ url, sameOrigin }) =>
// prettier-ignore
sameOrigin && url.pathname.match("/^\/[^\/]+\/?$/") /* eslint-disable-line */,
handler: "NetworkFirst",
options: {
cacheName: "ssr-pages-cache",
/* cache only 200 responses */
cacheableResponse: {
statuses: [200],
},
/* check the options in the workbox-build docs*/
matchOptions: {
ignoreVary: true,
ignoreSearch: true,
},
plugins: [
{
/* this callback will be called when the fetch call fails */
handlerDidError: async () =>
Response.redirect("/error?offline", 302),
/* this callback will prevent caching the response */
cacheWillUpdate: async ({ response }) =>
response.status === 200 ? response : null,
},
],
},
},EDIT: Here is the related part in sw.js e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/"),{
denylist: [/\/^\/[^/]+\/?$\//, /\/^\/[^/]+\/posts\/[^/]+\/?$\//, /\/^\/profile\/[^/]+\/?$\//, /\/^\/posts\/[^/]+\/?$\//, /\/^\/topics\/[^/]+\/?$\//]
})),
e.registerRoute((({url: e, sameOrigin: i})=>i && e.pathname.match("/^/[^/]+/?$/")), new e.NetworkFirst({
cacheName: "ssr-pages-cache",
matchOptions: {
ignoreVary: !0,
ignoreSearch: !0
},
plugins: [new e.CacheableResponsePlugin({
statuses: [200]
}), {
handlerDidError: async()=>Response.redirect("/error?offline", 302),
cacheWillUpdate: async({response: e})=>200 === e.status ? e : null
}]
}), "GET"),
e.registerRoute((({url: e, sameOrigin: i})=>i && e.pathname.match("/^/[^/]+/posts/[^/]+/?$/")), new e.NetworkFirst({
cacheName: "ssr-pages-cache",
matchOptions: {
ignoreVary: !0,
ignoreSearch: !0
},
plugins: [new e.CacheableResponsePlugin({
statuses: [200]
}), {
handlerDidError: async()=>Response.redirect("/error?offline", 302),
cacheWillUpdate: async({response: e})=>200 === e.status ? e : null
}]
}), "GET"),
e.registerRoute((({url: e, sameOrigin: i})=>i && e.pathname.match("/^/profile/[^/]+/?$/")), new e.NetworkFirst({
cacheName: "ssr-pages-cache",
matchOptions: {
ignoreVary: !0,
ignoreSearch: !0
},
plugins: [new e.CacheableResponsePlugin({
statuses: [200]
}), {
handlerDidError: async()=>Response.redirect("/error?offline", 302),
cacheWillUpdate: async({response: e})=>200 === e.status ? e : null
}]
}), "GET"),
e.registerRoute((({url: e, sameOrigin: i})=>i && e.pathname.match("/^/posts/[^/]+/?$/")), new e.NetworkFirst({
cacheName: "ssr-pages-cache",
matchOptions: {
ignoreVary: !0,
ignoreSearch: !0
},
plugins: [new e.CacheableResponsePlugin({
statuses: [200]
}), {
handlerDidError: async()=>Response.redirect("/error?offline", 302),
cacheWillUpdate: async({response: e})=>200 === e.status ? e : null
}]
}), "GET"),
e.registerRoute((({url: e, sameOrigin: i})=>i && e.pathname.match("/^/topics/[^/]+/?$/")), new e.NetworkFirst({
cacheName: "ssr-pages-cache",
matchOptions: {
ignoreVary: !0,
ignoreSearch: !0
},
plugins: [new e.CacheableResponsePlugin({
statuses: [200]
}), {
handlerDidError: async()=>Response.redirect("/error?offline", 302),
cacheWillUpdate: async({response: e})=>200 === e.status ? e : null
}]
}), "GET") |
|
can you share the repo? |
Here is minimal reproduction that has the same vite, svelte and pwa config and node modules also here is the deployed version of the repository: https://pwa-reprod.netlify.app/ you can try these urls: https://pwa-reprod.netlify.app/ |
|
hi @userquin is there any update on this issue? |
|
You cannot redirect to error page since it is not being prerendered, the error.html page isn't in the sw precache, so you can prerender it or replace Add Change cache names on each router or use only one with all the logic: move the logic to only 1 If you refresh the page you will see the caches (right button on caches and refresh caches): the cache cannot be created if missing when intercepting the request. |
|
Add |
|
Thank you for your response. I added the
|
|
|
|
you're caching all resources on each cache: navigate between routes in this comment #665 (comment) with a page refresh and refresh |
Cache entries will be there (repeat the process with a few more pages) |
|
You have duplicated cache names:
Move all to only 1 handler, you can use custom logic to return the |
|
what's the purpose of this handler https://github.com/omerharuncetin/pwa-reproduction/blob/main/vite.config.ts#L76? |
|
maybe the problem is previous handler |
That handler should catch the profile url's in production. Such as |
|
You cannot use |
just fixed it 😅 |
|
add pwa icons inside static folder, since you don't have web manifest icons the sw will have weird behavior, use EDIT: once web manifest icons added the sw |
PWA icons are already in the static folder. However, it's not included in precache and does not show up in deployed netlify directory too.
|
|
pwa icons missing in the server ? just try requesting one of them or check the web manifest in dev tools |
|
uhmm, static folder should be on root not inside src folder |
Oh good catch, thank you! Probably there was a mistake when I was moving the folder from my original repo to minimal. Just updated and I guess you are right. The regex that I use to catch profile url doesn't work properly tbh and idk why. Do you have any opinion on that, that would help me a lot tbh. Because that regex works when I try it on different regex test websites. |
|
I'll try using another approach later, using kit sw: we've access to routes there https://kit.svelte.dev/docs/service-workers#inside-the-service-worker |
|
it seems the sw precaching is there but it shouldn't (using kit sw we can warm the ssr cache when installing the sw), I guess it is the redirection since I get the home page (that's fine to avoid browser offline page), but not stored in the ssr-pages cache:
|
|
it seems your pages not working properly, this is an example that's working (just visit the page and then refresh it):
|
Thank you. and I wonder why /slug/posts/postId works but /slug does not work. Probably it would be better if I search for the routing in sveltekit. |
|
I found out that the issue was related to regex as we discussed before. The regex was wrong and I had to use same regex for |
My problem is related to the cached files. If I route to the main page, which is
/everything works fine. However, if I want to route another page, such as/explore/posts/x/users/yThese page assets are loading from the current path not from the base path. Therefore, non of the files be able to uploaded and the page doesn't respond correctly.
Some project information may be helpful for finding solution.
scopeandbaseas/both in manifest and SvelteKitPWA config.generateSWstrategy withautoUpdateregister typeIf you need any further information, please let me know.
Also, here is the a part of error in browser console. If I do hard refresh on page, everything works fine.
The text was updated successfully, but these errors were encountered: