Service Worker Blocking Fetch Requests in PWA
Hi everyone,
I've converted my WASP app into a Progressive Web App (PWA). I've successfully added the manifest and service worker. However, I'm running into a major issue: the service worker seems to be blocking fetch requests.
Because of this, I can't get product analytics on PostHog, nor can I analyze the app in Lighthouse. I'm stuck and suspect it might be a cross-origin (CORS) issue, but I'm not sure.
Does anyone have suggestions on how to resolve this or what might be causing the service worker to block fetch requests?
Thanks in advance for your help!
10 Replies
Hi @utkuarslan5. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, based on the knowledge sources provided, there is an open issue on Github about improving the CORS + API story in Wasp, which might be related to your problem (source (https://github.com/wasp-lang/wasp/issues/1303)).
Also, there is another open issue about adding support for PWA in Wasp, where they discuss the need for a manifest.json and service workers, and the possibility of users writing their own service workers (source (https://github.com/wasp-lang/wasp/issues/1117)).
You might want to follow these issues for updates or contribute to the discussion there.
For more detailed information, you might want to check out the Wasp documentation or ask in their community forum.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @utkuarslan5, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
@kapa.ai
Let me check the knowledge base for you. One moment! :books:
Sorry @utkuarslan5, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
solved (magically) by using Workbox, th,nk it was CORS in the end
Oh great. May I ask how you turned your Wasp app into a PWA?
@utkuarslan5 we plan to make sure that Wasp supports PWA well but didn't have the time yet to focus on it: if you can share the details of how you did it in this issue ours (https://github.com/wasp-lang/wasp/issues/1117), that could help us quite a bit!
As for CORS: Wasp comes with default CORS configuration, but if you want to configure it yourself, you can, check https://wasp-lang.dev/docs/advanced/middleware-config .
yea, it was quite easier than i thought (NB my doesn't require that much offline activity, just wanted as an app users can interact). essentially, added a manifest.json, service worker using basing workbox and registered my sw as useEffect on layout page
turned off my pc now but will post screenshots to GH issue when i open. from there of you guys see as easy win, think it's pretty easy, can add as feature to do automatically (especially with some plugins)
Thanks @utkuarslan5 that would be great!
hi folks, here is live https://github.com/wasp-lang/wasp/issues/1117#issuecomment-2184028614
GitHub
Add support for PWA in Wasp · Issue #1117 · wasp-lang/wasp
PWAs (Progressive Web Apps) give you a faster, more reliable, and more engaging version of your website or eCommerce store. PWAs can do most things that native apps can do, such as operate offline,...
Awesome @utkuarslan5 , thanks a lot of rtaking the time to write this! This will help a lot when we will be working on this issue 🙂