Playground won't load in Safari after some website deployments

[adamziel]

The problem

@ellatrix reported this problem:

Playground again doesn't work in Safari for some reason :thinking_face:

It did work for Ella in a private mode.

@zaerl reported it did load for him in regular browsing mode.

---

I experienced a similar issue, but with different console logs:

After poking around for a while (and another website deployment), the error changed to:

And then, a few refreshes later, it started loading again.

Probable cause

This is most likely a caching issue. When you open it in a private mode or in any way that doesn’t involve a cached older version, it works.
It seems like Safari runs partially older playground release and a partially newer playground release which doesn’t work which results in a blank screen or an error. it should invalidate everything that’s stale, but somehow it doesn’t.

Possible solutions

This is notoriously tricky to debug because it doesn't happen in the local dev server and only happens sometimes in production, and only if you have the right (wrong?) cache already.

The only way to reliably debug it seems to be this:

1. Build two local versions of the website. For example, 4fa87aa (a newer version) and 4fa87aa~30 (a slightly older version before some service worker changes). It's critical to actually build the website and not to use a local dev server.
2. Serve the older build at any local domain, say "playground.local".
3. Visit it in Safari, poke around a bit, refresh the page a few times to get a good sample of the cache.
4. Stop the local web server entirely
5. Serve the newer website build on the exact same domain
6. Refresh the page in Safari, observe any problems

That would, hopefully, reproduce the issue. The errors are super unclear so you may want to build the website with unminified scripts.

You'll also likely need to find some hidden Safari features for debugging service workers.