search

ubyssey / ubyssey.ca

The code that powers www.ubyssey.ca
GNU General Public License v2.0
36 stars 41 forks source link

Caching can deliver wrong dark/light mode #1405

Closed SamuelmdLow closed 4 months ago

SamuelmdLow commented 8 months ago

I'm not yet sure how to fix it. Is it http headers? Maybe!

SamuelmdLow commented 8 months ago

cause I think the site may be cached as light mode everytime and then change to darkmode when a darkmode user loads it

Nishim12 commented 8 months ago

I definitely see the issue on different web browsers on my mobile. I tried on Google and Bing to be specific.

SamuelmdLow commented 8 months ago

Inline advertisements do not show correctly as mobile or desktop because caching just returns whatever format was cached. This means ads can show as way to wide for a mobile device

SamuelmdLow commented 7 months ago

I think this might help https://github.com/coderedcorp/wagtail-cache/issues/17

SamuelmdLow commented 7 months ago

I think we have to add WAGTAIL_CACHE_IGNORE_COOKIES=False into base.py but I can't seem to run the site with DEBUG=False to test the caching

https://docs.coderedcorp.com/wagtail-cache/getting_started/django_settings.html#wagtail-cache-ignore-cookies

SamuelmdLow commented 7 months ago

I've moved the ad problem into this issue because I think the solution should be to change it so that the template does not differ from mobile to desktop - rather than to change how caching works between mobile and desktop

psiemens commented 7 months ago

I've confirmed that the site does not "flash" to dark mode when WAGTAIL_CACHE_IGNORE_COOKIES is set to False.

Wagtail Cache is stripping cookies to stop 3rd-party tracking cookies from making pages un-cacheable. Django never sees the lightMode cookie because we set it with JavaScript on the client and therefore Wagtail Cache can't distinguish it from a 3rd-party cookie.

While disabling cookie stripping does fix the dark mode issue, unfortunately it makes the cache pretty useless. A common alternative solution is to disable caching on pages that have personalization features like this, but unfortunately that approach would disable caching for the entire site, since dark mode is a setting on every page.

This is a tricky one! I'll let you know if I think of any fixes. That last issue you linked to looks promising.

SamuelmdLow commented 4 months ago

Turns out you can just decide it client side before the page renders. Our script was just waiting till the whole page rendered before running. Changed that and also made it go back to using local storage since everything is client side now.