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,对于所有这些东西我都是个新手。所以我想知道是否有遗漏或者下一步该去哪里。我搜索了所有论坛,但似乎找不到答案。谢谢!