Deployed Gatsby Site Doesn't Represent Development Mode Site

[abdulsohu]

Hello there!

My website is preceptorials.com and I am auto-deploying it from Github (for the most part). Currently, I am running into two major issues.

Well, one which is something I have struggled with for a while now, is the fact that every now and then, my users have to refresh the site to retrieve new content. I tried to look into this, and follow the instructions [here] (https://www.reddit.com/r/gatsbyjs/comments/dp6tpn/how_to_force_browser_to_clear_cache_after_a/) by removing gatsby-plugin-offline, but issue seems to still persist?

Second issue I actually have no idea whatsoever how to tackle:

Here is what I see on the landing page with the actual online site:

As you can see, the colors for one of the “Pre-recorded” tags doesn’t match the rest. There’s no error with the code that could make it look like this, because in my gatsby development mode, the colors are all matching and the way they are supposed to be. One of my users let me know that they had to hard refresh for things to look like they were supposed to. Now what I’m wondering is if there is a way for all users to see a hard refreshed page every time they load one, or something similar?

Thanks!

[perry]

hey there,

one thing i am noticing is that your live site has an error when trying to load some fonts:

I am going to guess that this is part of the problem with how your page is displaying?

[abdulsohu]

Hello again, thanks for responding!

I fixed the issue with fonts so it won’t show that error anymore. However it shows a different issue with sw.js, which according to research has something to with service workers, but not sure how I would resolve this.

Let me know if you can please, thank you!

[perry]

this might help!

[Support Guide] Understanding & unregistering service workers

Last reviewed by Netlify Support - August, 2023 A service worker is a script that your browser runs in the background to accomplish a variety of tasks. Browsers cache service workers for 24 hours by default, and don’t update them when you reload your page. Therefore, you may have a service worker on your site which could prevent you from seeing the latest and greatest changes that you’ve made. If you suspect a service worker is causing this issue, I recommend disabling/removing the service wor…

[abdulsohu]

Thank you for sharing!

I found that the solution to my problem was the fact that while that reddit post informs the reader that uninstalling gatsby-plugin-offline is key, it stops there, but the complete solution doesn’t. The complete solution, apparently, is the fact that gatsby-plugin-offline installs a service worker which can be removed only by following the steps in their README.md, instead of the usual npm uninstall [module name].

But thank you again, service workers are where the problems were!