React Keycloak, Offline Support in PWA

Question

Update after adjusting the config according to this issue @abraham found

I adjusted my KeycloakProvider so that it looks now like this:

<ReactKeycloakProvider
      authClient={keycloakInstance}
      LoadingComponent={<LoaderComponent fullscreen />}
      initOptions={{
        onLoad: "login-required",
        checkLoginIframe: false,
        flow: "hybrid",
        enableLogging: true,
        token: localStorage.getItem("XXXX-keycloak-token"),
        idToken: localStorage.getItem("XXXX-keycloak-idtoken"),
        refreshToken: localStorage.getItem("XXXX-keycloak-refreshtoken"),
      }}
      onEvent={(evt, msg) => console.log(evt, msg)}
      onTokens={(evt) => {
        evt.token && localStorage.setItem("XXXX-keycloak-token", evt.token);
        evt.idToken &&
          localStorage.setItem("XXXX-keycloak-idtoken", evt.idToken);
        evt.refreshToken &&
          localStorage.setItem(
            "XXXX-keycloak-refreshtoken",
            evt.refreshToken
          );
      }}
    >

The tokens are getting saved to the localStorage correctly but when I reload the app in an offline state there is an onAuthRefreshError followed by an onAuthError which redirects me to the URL https://secure-XXXX.de/auth/realms/XXX/protocol/openid-connect/auth?client_id=client&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&state=927c90f5-839a-40ff-8910-13fb5870b4d5&response_mode=fragment&response_type=code%20id_token%20token&scope=openid&nonce=2c7ae016-fab8-4fa0-8c02-ef9147f598d0 which isn't possible because I'm offline... it seems that the passing of the tokens can't be correctly validated by the framework so that the provider still doesn't get initialized correctly?

Original question

I'm currently working on a react based (PWA) application which utilizes keycloak for authentication and authorization. I'm trying to implement offline capabilities with the help of a workbox powered service worker (with the configuration as specified below). I'm also succesfully issuing offline tokens to the client and the online request to the realm URL is cached sucesfully.

I configured the default created (CRA) service worker as:

registerRoute(
  ({ url }) => url.hostname.includes("secure-xxxxxxxxxxxxxx.de"),
  new NetworkFirst({
    cacheName: "xxxxxxxxxxxxxxx",
    plugins: [new ExpirationPlugin({ maxAgeSeconds: 3600 })], // TODO adjust duration for prod
  })
);

also I configured the Keycloak login scope to issue offline tokens:

keycloak.login({ scope: "offline_access" })

When visiting the on the dev server deployed app you can see the service worker registering and caching the request to the auth/realms/{...}/account API. As soon as I'm switching to offline and reloading the page everything works fine until keycloak tries to open the URL https://secure-xxxxxxxxxxxxxx.de/auth/realms/xxxxxxxxxxxxxx/protocol/openid-connect/login-status-iframe.html/init?client_id=client&origin=xxxxxxxxxxxxxx which seems to be issued by the login-status-iframe.html.

I guess that this call leads to the Keycloak instance not properly initiated which means that the Loading component which I defined in the ReactKeycloakProvider does not close -> the app is not usable in offline mode.

Here are the relevant versions I'm using:

"@react-keycloak/web": "^3.4.0",
"@types/react": "^16.14.3",
"@types/react-dom": "^16.9.10",
"keycloak-js": "^12.0.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"

What am I missing so that I can use my PWA offline? Thank you for help

Image of the Browser Cache State

Image of the Keycloak UI which shows the issued tokens are offline tokens