作者:mobiledu2502874965 | 来源:互联网 | 2022-12-06 18:51
我一直在使用React和Next.js开发应用程序,目前正在添加PWA支持.
用户通过Google OAuth流程登录该应用.我最初使用的是JS客户端,它使用弹出窗口,但在PWA中遇到了错误.我现在通过将用户重定向到Google的OAuth网址来使用正常的OAuth流程.
这在浏览器中工作正常.在iOS上的独立PWA中,它会在新的Safari窗口中打开OAuth页面.这意味着OAuth流程在Safari中执行,最后用户在Safari中使用应用程序而不是独立的PWA.
我正在使用这种方法重定向:
export function setHref(newLocation: string) {
window.location.href = newLocation;
}
这甚至看起来是每个人都建议在重定向PWA时避免弹出窗口的方法.这最近改变了吗?或者是否有另一种方法可以在独立的渐进式Web应用程序中执行重定向/ OAuth流程?
1> Jorge Valver..:
我有一个解决方法,解决ios safari独立Web应用程序上的oauth重定向问题.
问题是清单元标记,似乎webkit(safari)用旧规范实现它(Chromium有相同的问题并在最近的版本中修复它).
我通过修改您可以使用的Google的PWACompat Javascript来解决这个问题:
https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js
PWAcompat js可用于生成正确的html元标记,以便拥有一个带有主页图标和启动画面的独立Web应用程序
你需要在PwaCompat脚本和"manifest"元标记中做一个小的"hack",方法是用任何标识符替换元标记的名称,例如,在你的index.html中:
manifest.json包含您的标准manifest.json声明,其中包含您的Web应用程序的名称,图标和样式.
js/pwacompat.js,包含来自谷歌的pwacompat.js的副本,这个小修改(第36行):
变化:
const manifestEl = document.head.querySelector('link[rel="manifest"]');
通过
const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');
其中pwa-setup是您放置在元标记上的名称,就是这样,您可以在同一个独立的上下文中解析manifest.json和oauth重定向
2> Lester..:
现在,一个好的解决方案是通过pwacompat对其进行破解。但是在Android上,将manifest rel属性更改为“ pwa-setup”并不符合webapp的要求,因此不会显示安装到主弹出窗口。
更改第36行
const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');
更好的解决方案是确定Web应用程序是在ios还是android上呈现的,然后在“运行时”中更改rel属性