Open prstwo opened 1 year ago
Also happening to me. Did you find a solution @prstwo ?
When using a meta framework we need to deal with server pages. We need the context where the PWA will run in the client, for example:
nuxi generate
or nuxi build
)?nitro.prerender
)?A simple workaround for Nuxt will be an empty index.vue
page (use it as the fallback for offline: navigateFallback: '/'
), then add a simple middleware (only for client) to redirect/navigate to the home page (if you've protected pages, you can use the auth middleware redirecting to the protected home page when signed-in): check this middleware https://github.com/elk-zone/elk/blob/main/middleware/auth.ts and the index.vue page in the elk.zone repo.
Any api call and server page should be excluded from the sw interception: for server pages, you should add the required logic to avoid accessing those server pages if you're offline (you can also use a simple client middleware with offline logic redirecting to some page or just throw an error and handle it in a custom error page): check https://github.com/elk-zone/elk/blob/main/service-worker/sw.ts#L36-L50 (you can use workbox.navigateFallbackDenylist
if using generateSW
strategy).
Thanks for your response @userquin
In my case I am deploying to Vercel and I have protected pages.
I'm not totally sure if I understand the middleware part. It seems you want to always get the user to a default page, but we wanted them to enter the page they navigated to. So, for example:
User enters /test and he gets redirected to / We want the user to enter /test and stay there
If we don't use PWA it works fine, but with PWA it goes to /
If we don't use PWA it works fine, but with PWA it goes to /
Because any server page is missing from sw precache and the sw will return the content of /, if you exclude /test from sw interception (add that route to workbox.navigateFallbackDenylist
), it should work: beware, when offline browser offline page will be there when requesting /test
.
For example, if you go to https://vitesse-nuxt3.netlify.app/, enter aaa
in the input, click the Go button and then refresh the page once in /hi/aaa
page, you can check the response in the network tab, the request being intercepted by the sw returning the / page content.
In previous example, the hi
route excluded in Nitro prerender, and so the html page will be missing and the entry in the sw precache manifest also missing: https://github.com/antfu/vitesse-nuxt3/blob/main/nuxt.config.ts#L36-L39.
Nuxt by default will exclude any page when using build command. In the example we exclude the hi route.
I confirm this works. Thank you again @userquin, you are very helpful
When I include '@vite-pwa/nuxt' in modules I get data-ssr="false".
Is this related?
hi, I'm using "@vite-pwa/nuxt": "^0.0.4", in my nuxt version 3 project. whenever I refresh the page, I see first the fallback page appeared and then the content of the website, here is the config:
clearing site data didn't solve my problem. the project contains multiple routes and pages. showing fallback page is not specific to one page