Summary

The web content discusses the resolution of an issue where Single Sign-On (SSO) redirects in Progressive Web Applications (PWAs) would open in a new browser window instead of within the application shell, particularly addressing the problem on Chrome for Windows, Safari for iOS, and suggesting a temporary fix for iOS.

Abstract

The article addresses a challenge encountered in PWAs where SSO redirects would open outside the application shell, undermining the native app-like experience that PWAs aim to provide. The author notes that this behavior is inconsistent across browsers and platforms, with Chrome for Windows and Safari for iOS being specifically problematic. The root cause is identified as a limitation in the web.manifest standard, which has since been updated to no longer require out-of-scope navigations to open in a new window. Chrome version 71 implements this change, resolving the issue for Windows users. However, on iOS, the problem persists due to the reliance on Apple-specific meta tags and the inability to update Safari independently of the iOS version. The author's temporary fix involves conditionally removing the manifest and using Apple-specific meta tags when the PWA is loaded on an iOS device, ensuring SSO redirects occur within the application shell. The author remains optimistic that Apple will soon update Safari to align with the updated standard, eliminating the need for platform-specific workarounds.

Opinions

The author considers the SSO redirect behavior that opens a new browser window as counterproductive to the purpose of PWAs, which is to provide a native app experience.
The author views the change in the W3C web.manifest standard positively, as it no longer enforces out-of-scope navigations to open in a new window, which previously broke many sites.
There is an expressed frustration with the inconsistency of SSO behavior across different browsers and platforms, particularly highlighting the issues with Chrome for Windows and Safari for iOS.
The author is hopeful that Apple will update Safari to support the latest web.manifest standard changes, which would simplify the development process and improve the user experience for PWAs on iOS.
The author's approach to resolving the iOS-specific issue by conditionally removing the manifest and using Apple-specific meta tags indicates a pragmatic and adaptive problem-solving mindset.

Preventing Single Sign On (SSO) Redirects From Opening a New Window Inside a Progressive Web Application (PWA)

I was recently working on a PWA application that utilizes SSO and one odd behavior that I noticed right off the bat was the fact that the SSO redirects forces the application to open a new window inside the browser instead of carrying the redirect inside the application shell. This is problematic as it defies the whole purpose of a PWA which attempts to make a web application feel native. Furthermore, the behavior varied depending on the browser/platform where the application was being loaded. Specifically, the issue was present under Chrome for Windows and Safari for IOS.

It turns out that SSO under PWA is broken on Chrome for Desktop as of Chrome version 70. The good news is that the W3C web.manifest standard has changed and no longer requires out of scope navigation to be opened in a new window. Here is what the spec states:

Unlike previous versions of this specification, user agents are no longer required or allowed to block off-scope navigations, or open them in a new top-level browsing context. This practice broke a lot of sites that navigate to a URL on another origin…

Fortunately, Chrome version 71 fixes this issue as it implements the updated standard. At the time of writing this post version 71 was still in Beta so you would have to install the Beta version to test the behavior.

As you can see below the user is forced to open a window under the browser when redirected to the log in page under Chrome version 70 whereas Chrome version 71 remains under the application shell. The following videos demonstrate the experience under chrome version 70 and 71 respectively:

Whereas I was able to resolve the issue on Windows by utilizing Chrome version 71, I still had to fix the redirect issue under IOS which has been discussed on the Apple forum in the past. Here, it wasn’t as easy as switching to latest version of Safari as it is updated with IOS. Whereas I am hopeful that in the near future Apple will update their browser to implement the latest standard changes mentioned above, I had to implement a temporary fix in the meantime. The solution involved removing the manifest when loading the application on an IOS device as discussed here. Since the manifest won’t be loaded under IOS, apple specific meta tags had to be used instead as shown here:

...

<link rel="manifest" href="manifest.json">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-Title" content="TDIPoc">

<meta name="apple-mobile-web-app-status-bar-style" content="pink">

<link rel="apple-touch-icon" href="assets/icons/icon-72x72.png" sizes="72x72">

<link rel="apple-touch- icon" href="assets/icons/icon-96x96.png" sizes="96x96">

<link rel="apple-touch-icon" href="assets/icons/icon-128x128.png" sizes="128x128">

<link rel="apple-touch-icon" href="assets/icons/icon-144x144.png" sizes="144x144">

<link rel="apple-touch-icon" href="assets/icons/icon-152x152.png" sizes="152x152">

<link rel="apple-touch-icon" href="assets/icons/icon-384x384.png" sizes="384x384">

<link rel="apple-touch-icon" href="assets/icons/icon-512x512.png" sizes="512x512">

...

</head>

<body>

<script>
...

var iOS = !!navigator.platform && /iPhone/.test(navigator.platform);

if (iOS) {

 document.querySelector('link[rel="manifest"]').setAttribute("rel",      "no-on-ios");

console.log("ios detected")

else{

console.log("not an ios device")

}
...

</script>

The following video shows the SSO redirect working inside the PWA shell on IOS:

As you saw above, SSO redirects won’t force your PWA application to leave the shell when running your application on Windows and IOS. I am hopeful that Apple will update their browser in the near future to avoid loading apple specific metadata and instead utilize the same manifest that is being consumed by both Windows and Android.