White page when accessing through an authentifying proxy

[MrTrustor]

I'm running Gramps behind an authentifying proxy (currently Cloudflare Zero Trust, but Pomerium before that), and I'm having an issue where the site doesn't load and only shows a blank page. On Chrome, forcing a refresh (Cmd+Shift+R) temporarily solves the issue, but not on Safari.

Here is what I've been able to gather:

• index.html seems to be cached by a Service Worker, so it's always served from cache.
• It triggers calls to other resources (manifest.json, js scripts, etc.) which are not served from the Service Worker's cache.
• The requests for those resources get a 302 response from the proxy asking for authentification, however the login page is never shown, and we end up with a blank page (the index.html without any of the resources loaded).
• On Chrome, forcing a refresh seems to bust the Service Worker's cache, but not on Safari. This means that on Chrome, the index.html request does go out to the proxy, which triggers the authentifying flow. However, whenever the session with the proxy expires, the problem starts again.

See the following screenshots.

[DavidMStraub]

It would be great if you would find a solution to this issue, but it seems to me it's an issue with your setup, not with Gramps Web itself, right? I'll convert it to a discussion for now, but let me know if you do find something wrong.

[MrTrustor]

I'm running more than a dozen other apps behind the same proxy, so I don't think it's a setup problem. I just think the 2 things are currently incompatible.

I know next to nothing about frontend development, so I'm struggling a bit here. I tried to configure the "index.html" to be registered with a NetworkFirst or NetworkOnly caching policy, adding a runtimCaching section in rollup.config.js (inspired by this), but that didn't solve the issue:

const baseConfig = createSpaConfig({
  developmentMode: process.env.ROLLUP_WATCH === 'true',
  injectServiceWorker: true,
  workbox: {
    navigateFallbackDenylist: [/^\/api.*/],
    skipWaiting: false,
    clientsClaim: false,
    runtimeCaching: [
      {
        urlPattern: 'index.html',
        handler: 'NetworkOnly',
      },
    ],
  }
  html: {
    transform: [
      html => html.replace('<base href="/">', `<base href="${BASE_DIR}/">`),
    ],
  },
})

Then, I tried to completely turn off the service work, by setting injectServiceWorker: false. That did solve my issue, and the app seems to be working normally. Is there a reason it uses a Service Worker in the first place? It seems to be fetching information from the backend to display anything anyway, so I'm not entirely sure why it's needed (but once again, I don't know anything about frontend development).