webentwicklung-frage-antwort-db.com.de

umleitung zu Google OAuth Flow in der progressiven Web-App

Ich habe an einer App mit React und Next.js gearbeitet und derzeit die PWA-Unterstützung hinzugefügt.

Benutzer melden sich bei der App über den Google OAuth-Fluss an. Ich habe ursprünglich den JS-Client verwendet, der ein Popup-Fenster verwendet, was jedoch zu Fehlern in der PWA führte. Ich verwende jetzt den normalen OAuth-Fluss, indem ich den Benutzer zur OAuth-URL von Google umleitet.

Das funktioniert gut im Browser. In der Standalone-PWA unter iOS wird die OAuth-Seite in einem neuen Safari-Fenster geöffnet. Dies bedeutet, dass der OAuth-Fluss in Safari ausgeführt wird und am Ende der Benutzer die App in Safari anstelle der Standalone-PWA verwendet.

Ich leite mit dieser Methode um:

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

Dies scheint sogar die Methode zu sein, die jeder empfiehlt, um Pop-ups zu vermeiden, wenn er in Ihrer PWA umgeleitet wird. Hat sich das in letzter Zeit geändert? Oder gibt es eine andere Methode zum Ausführen von Weiterleitungen/OAuth-Flows innerhalb einer eigenständigen, progressiven Web-App?

8
Jakemmarsh

Ich habe eine Problemumgehung, die das Problem der automatischen Umleitung auf der eigenständigen Web-App von ios safari löst. 

Das Problem ist das Manifest des Meta-Tags. Es scheint, dass Webkit (Safari) es mit einer alten Spezifikation implementiert hat (Chromium hatte das gleiche Problem und behebte es in einer aktuellen Version).

Ich habe die Problemumgehung vorgenommen, indem Sie das PWACompat-Javascript von Google geändert haben, auf das Sie zugreifen können:

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

PWAcompat js ist nützlich, um die richtigen HTML-Meta-Tags in der Reihenfolge .__ zu generieren. eine eigenständige Web-App mit Home-Symbolen und einem Startbildschirm

Sie müssen einen kleinen "Hack" für das PwaCompat-Skript und in Ihrem Metatag "Manifest" ausführen, indem Sie den Namen des Metatags durch einen beliebigen Bezeichner (z. B. in Ihrer index.html) ersetzen:

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

manifest.json enthält Ihre Standard-Erklärung zu manifest.json mit Name, Symbolen und Stil für Ihre Web-App.

js/pwacompat.js enthält eine Kopie von pwacompat.js von Google mit dieser kleinen Modifikation (Zeile 36):

Veränderung : 

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

durch

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

pwa-setup ist der Name, den Sie in Meta-Tags eingeben, und das ist es, Sie haben Ihre manifest.json interpretiert und die Weiterleitung im selben Standalone-Kontext durchgeführt.

13
Jorge Valvert

Die beste Lösung fürs Erste ist, es durch pwacompat zu hacken. Wenn jedoch bei Android das Manifest rel-Attribut in "pwa-setup" geändert wird, entspricht dies nicht den Anforderungen von webapp. Daher wird die Installation im Popup-Fenster nicht angezeigt.

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

Geänderte Zeile # 36

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

Eine bessere Lösung besteht darin, zu ermitteln, ob die Webapp unter ios oder Android gerendert wird, und dann das rel-Attribut in "Runtime" zu ändern.

<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>
4
Lester

Ich habe @Lester answer mit @Roysh und ein paar mehr kombiniert, um es für iOS mit PWA ersetzbarer zu machen. Da es das Manifest verloren hat, verwendet es title als Standardnamen und öffnet jetzt den aktuellen Pfad anstelle von start_url aus dem Manifest.

<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>
1
hisoft