Caching can deliver wrong dark/light mode

Question

Caching can deliver wrong dark/light mode

SamuelmdLow opened this issue 9 months ago · 8 comments

SamuelmdLow commented 9 months ago

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

Answer 1 · 2024-02-02T23:59:32.000Z

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

Answer 2 · 2024-02-05T05:23:25.000Z

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

Answer 3 · 2024-02-06T10:13:06.000Z

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

Answer 4 · 2024-02-08T23:14:28.000Z

I think this might help coderedcorp/wagtail-cache#17

Answer 5 · 2024-02-12T03:00:37.000Z

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

Answer 6 · 2024-02-12T03:51:25.000Z

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

Answer 7 · 2024-02-13T21:20:55.000Z

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.

Answer 8 · 2024-05-23T05:21:47.000Z

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.