I have a non-ejected CRA application that uses the PWA template. I'm registering the service worker to enable offline use. It works fine in all browsers and environments that I've tested, and it used to work on my iPad as well - until this week, when I updated to iOS 16.4.
Now, on the iPad, the page loads the first time it is accessed (after I clear all web data in Safari, for example). Once I refresh the app, I get a blank screen on that load and all subsequent loads. The only way to recover is to reset web data again.
I hooked my iPad up to my Macbook and used the Safari developer tools. I can access both the main app and the service-worker developer consoles. Neither shows any errors, but I can see that the index.html page returned by the service worker is empty:
<html>
<head></head>
<body></body>
</html>
In other environments/browsers (including Safari 16.4 on my Macbook) everything continues to work fine.
I'm at a loss for how to even troubleshoot this. I was hoping to enable logging in workbox (following this), but I don't know how to create a development build using CRA. I tried various things like this, but as far as I can tell, workbox uses NODE_ENV to determine whether it should log, and I don't know of any way to change NODE_ENV to something other than production in a build.
What could be causing the service-worker behavior in Safari on iPad and MacOS, and how can I troubleshoot it?
This seems to be caused by an iOS bug (observed in 16.4 and 16.4.1) when Web Content Restrictions are enabled: https://stackoverflow.com/a/75961991/546561.
This can arise due to Screen Time settings, as in the linked answer, or, as in my case, MDM settings. The only workaround I know of is to disable Web Content Restrictions, which is not always practical. Hopefully Apple fixes this soon.