Javascript 在progressive web app中重定向到Google OAuth流

我一直在使用React和Next.js开发一个应用程序，目前正在添加PWA支持

用户通过Google OAuth流登录应用程序。我最初使用的是JS客户端，它利用了一个弹出窗口，但在PWA中遇到了错误。我现在使用普通的OAuth流，将用户重定向到Google的OAuth URL

这在浏览器中运行良好。在iOS上的独立PWA中，它在新的Safari窗口中打开OAuth页面。这意味着OAuth流在Safari中执行，最终用户将使用Safari中的应用程序，而不是独立的PWA

我正在使用以下方法重定向：

export function setHref(newLocation: string) {
  window.location.href = newLocation;
}

---

这甚至看起来是每个人都推荐的在PWA中重定向时避免弹出窗口的方法。最近有没有变化？或者在独立渐进式web应用程序中是否有其他方法执行重定向/OAuth流？

我有一个解决ios safari独立web应用程序上OAuth重定向问题的解决方法

问题是manifest元标记，似乎webkit（safari）用一个旧规范实现了它（Chromium也有同样的问题，并在最近的版本中修复了它）

我通过修改谷歌的pwacompatjavascript解决方案，您可以使用：

https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js

pwacompatjs有助于生成正确的html元标记，以便 使用带有主页图标和闪屏的独立web应用程序

您需要对PwaCompat脚本和“manifest”元标记进行一次小的“hack”，将元标记的名称替换为任何标识符，例如，在index.html中：

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

借

---

如果pwa setup是您放在meta标记上的名称，那么您可以在同一独立上下文中解释manifest.json和oauth重定向现在最好的解决方案是破解它。但是在Android上，将manifest rel属性更改为“pwa setup”不符合webapp的要求，因此不会出现安装到主页的弹出窗口

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

更好的解决方案是确定webapp是在ios还是android上呈现，然后在“runtime”中更改rel属性

var iOS=！！navigator.platform&/iPhone | iPod/.test（navigator.platform）；
如果（iOS）{
document.querySelector（'link[rel=“manifest”]）.setAttribute（“rel”，“ios上的no”）；
}

我将@Lester answer和其他一些组合在一起，使它在iOS上更容易被PWA替换。由于它丢失了清单，它将使用标题作为默认名称，现在从清单中打开当前路径，而不是

start\u url

<link rel="manifest" href="manifest.webmanifest">
<script>
  if (!!navigator.platform && /iP(?:hone|ad|od)/.test(navigator.platform)) {
    document.querySelector(`link[rel="manifest"]`).setAttribute(`rel`, `no-ios`);
    document.title = `AppName`; // default app name | simulate short_name
    if (`standalone` in window.navigator && window.navigator.standalone && sessionStorage.getItem(`iOS-redirect`) === null) {
      sessionStorage.setItem(`iOS-redirect`, ``);
      window.location = `/`; // simulate start_url
    }
  }
</script>

if（！！navigator.platform&&iP（？：hone | ad | od）/.test（navigator.platform））{
document.querySelector（`link[rel=“manifest”]`）.setAttribute（`rel`，`no ios`）；
document.title=`AppName`；//默认应用程序名称|模拟短名称
if（`standalone`在window.navigator&&window.navigator.standalone&&sessionStorage.getItem（`iOS redirect`）中）==null）{
setItem（`iOS重定向`，``）；
window.location=`/`；//模拟开始\u url
}
}

在我的

manifest.json

中，我应该将什么设置为

显示

standalone

（我所期望的）在Firebase Auth（OAuth）中不起作用-它重定向到Safari，但不重定向回，也不记得Auth Cookie..是的，您必须设置display:standalone。您是否更改了清单元标记？在创建oauth客户端时，是否将oauth方法更改为“重定向”？默认情况下，oauth2客户端处于弹出模式。我根据指令设置了

standalone

I更改了清单和pwa.js脚本。重定向方法。。。我已经检查过了，实际上，你是对的，我没有更改它，它仍然设置为

signInWithPopup

。所以下次我应该尝试重定向，看看它是否改变了什么。但是，即使有了

popup

作为一种方法，它仍然“重定向”，它打开了一个新的safari窗口。因此，我会再试一次……Jakemmarsh，因为这是一个解决方案，旨在修复独立web应用程序上错误的safari行为（Chromium也有同样的问题，但google在几次发布之前就解决了），chrome确实无法解析manifest.json，但不用担心，pwcompat会完成这项工作。在苹果发布bug修复之前，我们必须在这个解决方案中生存下来（我按照苹果的指导方针报告了这个bug，我还在等待发布，包括对这个问题的修复）干得好！我通读了所有的线索，复制并粘贴了这个，效果非常好！谢谢一件小事，我将href改为使用create react apps default-href=“%PUBLIC_URL%/manifest.json”如果有人能快速重复他/她所做的事情，允许在保存到主屏幕的iOS独立web应用程序中使用google/fb登录和重定向，我将不胜感激。无论我尝试什么解决方案，PWA在登录时都会留下，并且不会返回到。

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

<link rel="manifest" href="manifest.json">
<link rel="pwa-setup" href="manifest.json">
<script src="pwacompat.js"></script>
<script>
   var iOS = !!navigator.platform && /iPhone|iPod/.test(navigator.platform);
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }
</script>

<link rel="manifest" href="manifest.webmanifest">
<script>
  if (!!navigator.platform && /iP(?:hone|ad|od)/.test(navigator.platform)) {
    document.querySelector(`link[rel="manifest"]`).setAttribute(`rel`, `no-ios`);
    document.title = `AppName`; // default app name | simulate short_name
    if (`standalone` in window.navigator && window.navigator.standalone && sessionStorage.getItem(`iOS-redirect`) === null) {
      sessionStorage.setItem(`iOS-redirect`, ``);
      window.location = `/`; // simulate start_url
    }
  }
</script>