React Keycloak，PWA 中的离线支持答案

【问题标题】：React Keycloak, Offline Support in PWAReact Keycloak，PWA 中的离线支持
【发布时间】：2022-08-24 03:56:26
【问题描述】：

根据this issue@abraham发现调整配置后更新

我调整了我的 KeycloakProvider，使它现在看起来像这样：

<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
          );
      }}
    >

令牌被正确保存到 localStorage 但是当我在离线状态下重新加载应用程序时，有一个 onAuthRefreshError 后跟一个 onAuthError 将我重定向到 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 这是不可能的，因为我\' m 离线...似乎框架无法正确验证令牌的传递，因此提供者仍未正确初始化？

原始问题

我目前正在开发一个基于反应的 (PWA) 应用程序，该应用程序利用 keycloak 进行身份验证和授权。我正在尝试在工作箱供电的服务工作者的帮助下实现离线功能（配置如下所示）。我也成功地向客户端发出离线令牌，并且成功缓存了对领域 URL 的在线请求。

我将默认创建的（CRA）服务工作者配置为：

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

我还配置了 Keycloak 登录范围以发出离线令牌：

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

当访问在开发服务器上部署的应用程序时，您可以看到服务工作者注册并将请求缓存到auth/realms/{...}/account API。一旦我切换到离线并重新加载页面，一切正常，直到 keycloak 尝试打开似乎由login-status-iframe.html 发布的 URL https://secure-xxxxxxxxxxxxxx.de/auth/realms/xxxxxxxxxxxxxx/protocol/openid-connect/login-status-iframe.html/init?client_id=client&origin=xxxxxxxxxxxxxx。

我猜这个调用会导致 Keycloak 实例未正确启动，这意味着我在 ReactKeycloakProvider 中定义的加载组件没有关闭 ->该应用程序在离线模式下不可用.

以下是我正在使用的相关版本：

\"@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\"

我缺少什么才能离线使用我的 PWA？谢谢你的帮助

Image of the Browser Cache State

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

offline_access 范围与离线 PWA 无关。服务器可以代表未积极使用该服务的用户发出请求。 Ref
感谢您指出@abraham，我认为这意味着发布的cookie可以在离线状态下使用。但是，通过删除offline_access 部分来更改代码不会解决问题，我是对的吗？
看起来有办法disable the iframe feature。
感谢@abraham 引用这个问题！我根据帖子调整了我的代码，还尝试通过调整其他一些参数来解决问题，但不幸的是，这也没有说：/我用新配置更新了问题也许你有另一个想法？
@Max您找到解决方案了吗？我现在面临同样的问题。

标签： reactjs keycloak progressive-web-apps

【解决方案1】：

你找到解决办法了吗？我也面临同样的问题。

【讨论】：