在 iOS Safari(13.5)中使用OpenID Microsoft登录后,PWA在导航点击时会冻结。

3

PWA在OpenID授权用户后冻结 [iOS Safari独立模式]

我为我们的安保人员构建了一个简单的PWA,允许员工点击链接并查看有关各种事项的公司政策内容。该应用程序使用Microsoft的OWIN中间件库通过企业Microsoft登录凭据授权员工进入应用程序。当用户在我们的登录页面上点击“员工登录”提示时,他们将被重定向到Microsoft的域以完成登录过程。完成登录后,他们将被重定向回我们应用程序的主页。

问题

问题似乎出现在iOS用户(v13)将应用程序固定到主屏幕并以独立模式启动后,且用户完全终止应用程序并返回之后。我们已在Chrome、Safari(非独立模式)、Firefox上测试了该应用程序,并未出现这些问题。该应用程序可以无缝运行,直到用户完成其Microsoft登录并被重定向回主页。此时,如果用户点击应用程序内的链接至其他页面,则应用程序将完全锁定,不响应进一步的按钮点击,也不加载用户提示的页面。在控制台中不会抛出任何错误。

我们发现,立即将应用程序切换到另一个应用程序(即使只有一秒钟),然后再切换回我们的PWA,可以立即将所有东西重新启动,并且用户尝试导航到的页面会立即加载,之后应用程序完全无缝运行。只有默认页面的初始版本会冻结。

潜在原因

我目前的工作理论是,问题可能是由以下一些因素的组合引起的:

  • 重定向到Microsoft的登录门户。当用户发送身份验证请求时,会被发送到Microsoft进行身份验证,然后返回到我们的域时,可能会出现会话/cookie连续性问题。
  • iOS的独立模式。与上述情况相结合,使用第三方身份验证并短暂离开PWA的域是否会在后续页面导航中造成问题。这得到了支持,因为没有其他浏览器或设备有此问题,并且我的研究表明,苹果对PWAs的支持仍处于早期阶段。
  • Service Worker失败。我们已经进行了大量测试,确保在用户首次进入站点时正确安装和注册了Service Worker。我们进行了检查以在任何页面导航的任何时候重新注册SW。我们有信心,在用户完成身份验证并被重定向回主页时,存在一个处理页面GET请求的活动Service Worker。我还测试了在服务工作程序的注册期间明确缓存可从我们的主页访问的链接页面,以查看是否从缓存中提供页面会减轻问题。但是没有成功。这是处理fetch请求的sw.js中的代码(取自Google的方便指南):
    // "cache-first" approach for requests from client. Will try to get the file from the cache.
    // If no match found, it will send the request onto the network. If both fail serve fallback page.
    self.addEventListener("fetch", function (event) {
        if (event.request.method !== "GET") return;
        event.respondWith(
            // Try the cache
            caches.match(event.request).then(function (response) {
                console.log("[service worker] attempting to fetch file from cache...");
                return response || fetch(event.request);
            }).catch(function () {
                // If both fail, show a generic fallback:
                return caches.match(offlineFallbackPage);
            })
        );
    });

我已经使用Mac远程调试了独立的PWA, 我验证过当用户点击链接导航到新页面时,触发的点击事件是被正确处理的,因此问题似乎确实在于加载链接页面本身。此外,远程调试确认在尝试导航至网站上其他页面时没有任何HTTP GET错误(或任何其他错误)被触发。
这是我建立的第一个PWA,对于所有这些东西我都是个新手。所以我想知道是否有遗漏或者下一步该去哪里。我搜索了所有论坛,但似乎找不到答案。谢谢!

最近我们遇到了类似的情况,情况是我们重定向到的页面(用于付款网关集成)没有web.manifest,所以无法重新定向回来。 我们通过在我们重定向的页面上添加web.manifest来解决这个问题(它在我们的控制之下)。在你的情况下,由于无法处理Microsoft页面,你是否尝试过使用Iframe来解决问题? - Abdul Muhaymin
我也遇到了我的PWA相同的问题。最终你找到了什么好的解决方案或变通方法吗? - Weihang Jian
当我重定向到Google身份验证时,我也遇到了这个问题。页面似乎在重定向时卡住了。 - patrick_corrigan
1个回答

0

在我的特定情况下,我遇到了非常相似的问题。但是我的PWA(使用PwaBuilder打包)在重定向到应用程序主页URL时,在oidc注销时冻结。 在XCode中,我观察到一个错误声明:

could not signal service com.apple.webkit.webcontent 113 could not find specified service

问题并非出现在我的身份提供者重定向回来时,而是在以下重定向中发生,该重定向启动了我正在使用的OIDC客户端库oidc-client-ts。原来有两种可能的方法来设置窗口的位置/ URL,分配或设置href。而该库默认使用assign。将assign更改为replace href导致我的iOS PWA不再冻结。非常特定的用例,但可能会帮助其他人...
auth.signoutRedirect({
  post_logout_redirect_uri: process.env.BASE_URI,
  redirectMethod: "replace",
});

这听起来与我在这里遇到的问题相似:https://dev59.com/3tH7oIgBc1ULPQZFjrYq 不幸的是,据我所知,这不能在msal库中修改。 - killexe

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接