9
votes

ios PWA Comment ouvrir un lien externe sur le safari par défaut mobile (pas dans le navigateur de l'application)

Je crée une PWA sous IOS 13.2.

Je dois lancer une autre PWA depuis mon application en cliquant sur un lien externe.

Le problème est que mon PWA actuel ouvre tous les liens externes dans le navigateur intégré à l'application au lieu du safari normal et qu'il n'y a pas d'option d'ajout à l'écran d'accueil dans le navigateur intégré à l'application.

Comment puis-je forcer la PWA à ouvrir un lien externe dans un safari normal au lieu d'un safari intégré à l'application?

Les choses qui ne fonctionnent pas

  • Changer la portée dans le fichier manifeste
  • Utilisation de rel="noreferrer"
  • Utilisation de target="_blank"

6 commentaires

J'ai le même problème avec safari, je souhaite utiliser cameraAPI dans un autre lien mais en mode autonome, je ne peux pas accéder à la caméra


J'ai trouvé une solution de contournement mais c'est nul. Suppression du "standalone" de mon manifeste pour empêcher mon PWA de s'ouvrir en tant que PWA !!! Avez-vous trouvé des solutions? @ Victor-Belashov


S'agit-il d'un "PWA" qui utilise cordova pour envelopper votre application Web? Comme vous obtenez avec PWABuilder.


Que se passe-t-il si vous utilisez target="_blank sur le href ? Je n'ai pas de périphérique à tester. Je suppose que la fenêtre PWA chromeless ne peut pas gérer cette demande et qu'elle peut déclencher Safari.


@BryceHowitson target="_blank" utilisera toujours le navigateur intégré à l'application au lieu de s'ouvrir dans la vue Safari normale.


Avez-vous trouvé une solution? J'ai exactement le même problème (migration des utilisateurs d'une ancienne application Web ios vers un pwa sur un autre domaine). Je veux ouvrir le nouveau pwa dans safari et laisser les utilisateurs l'ajouter à leur écran d'accueil tout de suite, mais de cette façon, les utilisateurs obtiendront le safari intégré à l'application, puis ils devront cliquer sur la petite icône de safari dans le tiroir du bas, puis l'ajouter à l'écran d'accueil à partir de là.


6 Réponses :


-2
votes

J'essaierais personnellement la target="_blank" au lien href . J'ajouterais également un rel="noreferrer external" pour m'assurer que cela est cohérent entre les différentes implémentations de vues Web. Il devrait également y avoir un moyen de le faire via le fichier manifeste, même si je ne suis pas tout à fait sûr de savoir comment cela fonctionne dans iOS.


2 commentaires

Ce n'est pas vrai depuis iOS12.2


Ni rel ni target rel d'effet là-dessus. La portée du fichier manifeste contrôlera si les liens s'ouvrent avec le navigateur intégré à l'application ou en tant que pages autonomes "sans chrome", mais cela n'a aucun effet sur l'ouverture des liens dans un safari intégré à l'application ou un safari régulier.



-1
votes

La façon dont votre application fonctionnera en fonction de ce que vous avez configuré dans le fichier manifest.json .

Dans le fichier manifest , la clé de scope déterminera quel lien s'ouvrira dans PWA et quel lien s'ouvrira dans le navigateur.

Par exemple, la route sous myapp s'ouvrira à l'intérieur de PWA et d'autres seraient à l'extérieur.

{
  "name": "My App",
  "start_url": "/myapp",
  "scope": "/myapp",
  "display": "standalone"
}


1 commentaires

C'est vrai, mais OP demande d'ouvrir les liens dans un safari régulier ou un safari intégré à l'application et cela n'a aucun effet sur cela



0
votes

Cela fonctionnera parfaitement sur toutes les versions iOS avec le support PWA. (Je le sais parce que je suis un utilisateur iOS de longue date):

Ajoutez target="_blank" à tous les liens que vous avez. Cela les ouvrira dans le safari mobile par défaut.

Par exemple:

<a href="/page" target="_blank">Page</a>


5 commentaires

Cela peut fonctionner dans certains, mais pas récents, où vous êtes toujours bloqué dans leur navigateur d'application dysfonctionnel. Il y a peut-être des avantages à cela (partager le contexte afin de permettre à oauth de fonctionner), mais cela se rompt sur d'autres choses (les liens externes sur des sites externes ne fonctionnent pas) - il serait utile d'avoir le contrôle sur cela à la place, de sorte que vous peut utiliser l'application in pour oauth et fonctionnelle pour les autres.


votre commentaire est incorrect. cela devrait fonctionner correctement sur tous les appareils


Malheureusement non; iOS moderne vous colle à la place dans le navigateur de l'application, ce que vous confondez peut-être avec Safari mais ce n'est pas tout à fait la même chose. Le commentaire de mes liens externes sur les sites externes est cependant incorrect; les liens dans le navigateur de l'application qui utilisent target="_blank" ne fonctionnent pas (le navigateur de l'application semble être limité à une seule fenêtre), mais d'autres liens le font, ce qui signifie que vous pouvez le contourner si vous contrôlez le site externe que vous sont liés à.


je ne me trompe pas. la question concernait les applications Web progressives et non une application


Ouais, mes réponses sont aussi pour une PWA. Cet article peut fournir un certain contexte. Votre réponse a peut-être été correcte à un moment donné et peut toujours l'être pour les anciennes versions d'iOS, mais elle est incorrecte pour les versions plus récentes.



-2
votes
@IBAction func openURL(_ sender: Any) {
// check if website exists
guard let url = URL(string: "https://apple.com") else {
    return
}

let safariVC = SFSafariViewController(url: url)
    present(safariVC, animated: true, completion: nil)
}

0 commentaires

2
votes

Il est un peu difficile de répondre à cette question (et à tous les commentaires) car le cas d'utilisation n'est pas trop clair, mais voilà ...

Sur les appareils mobiles, un «navigateur intégré à l'application» n'est PAS la même chose qu'une application Web progressive fonctionnant en mode plein écran.

Si une application iOS s'exécute puis affiche du contenu HTML à l'intérieur, elle utilise UIWebView ou WKWebView . Cependant, dans le cas d'un PWA, il fonctionne déjà dans Safari en tant qu'expérience «plein écran». Il est extrêmement important de définir les liens dont vous essayez de rompre, car ils fonctionnent différemment.

target="_blank" supprimera généralement un lien d'une page à l'aide de WebView. Je pense que c'est également la fonctionnalité par défaut pour les liens en dehors du domaine actuel.

Une PWA «installée» s'exécute en quelque chose appelé mode «Stand Alone». Cela le rend plein écran et supprime les barres de navigation, etc. Au moment d'écrire ces lignes, Safari ne prend pas en charge l'API plein écran que d'autres navigateurs implémentent. Chrome utilise le fichier manifeste de l'application pour déterminer cette fonctionnalité. Safari ignore fondamentalement le manifeste en faveur des balises meta propriétaires.

Dans ce cas, <meta name="apple-mobile-web-app-capable" content="yes"> dit à Apple de faire de la page une application autonome. Essayez de définir content="no" (Safari met fortement en cache les choses, vous devrez peut-être forcer une actualisation) sur les pages qui devraient sortir du mode autonome. Vous pouvez vérifier dans quel mode la page pense être en utilisant ce javascript booléen window.navigator.standalone .

Ou vous pouvez utiliser javascript pour forcer une "nouvelle fenêtre" dans Safari tant que vous ciblez un sous-domaine différent ou HTTP au lieu de HTTPS .

// if app is hosted from https://example.com
if (("standalone" in window.navigator) || window.navigator.standalone ) {
    window.open('http://example.com/page', '_blank');
}

Enfin, Apple utilise des chaînes d'URL spéciales pour amener les applications natives à gérer certaines actions telles que les e-mails, les numéros de téléphone et les vidéos YouTube. Vous pourrez peut-être «pirater» cette fonctionnalité pour que Safari ouvre votre lien.


6 commentaires

Ce sont de très bonnes suggestions! Malheureusement, window.open et window.location.href ouvrent tous les deux le navigateur intégré à l'application. Je ne comprends pas tout à fait ce que vous entendez en définissant content="no" . Si cela est fait sur la page à partir de laquelle vous créez un lien, cette page cesserait d'être en mode plein écran (du moins si Safari reconnaît que vous avez effectué cette modification). Si vous le définissez sur la page que vous créez un lien vers cette page, cela cessera d'être une application plein écran qui va à l'encontre de l'objectif.


À propos du schéma d'URL, je pensais vraiment que ce serait un moyen de contourner ce problème, mais il semble qu'il n'y ait pas de schéma d'URL pour safari: stackoverflow.com/a/22644889/7446618


@ JensVæverHartfelt Je pense que vous devriez poser une nouvelle question qui décrit pleinement votre cas d'utilisation. Il est difficile de vous aider lorsque vous avez besoin ou non de la même chose que l'OP.


J'apprécie vos commentaires, mais le problème d'OP est exactement le même que le mien, donc une nouvelle question reproduirait simplement le même contenu. J'ai édité la question d'OP pour être un peu plus concis et ajouté certaines des solutions suggérées qui ne résolvent pas le problème. J'ai également ajouté une solution de contournement comme réponse.


@ JensVæverHartfelt La partie déroutante est que vous n'arrêtez pas de dire PWA et "navigateur intégré à l'application" ensemble. Les PWA par définition sont des applications Web qui exécutent INSIDE Safari même si elles sont «installées». Les réponses sont donc déroutantes. Par exemple, target="_blank" coupe vraiment une page HTML d'une vue Web livrée dans une application iOS native. Mais cela ne semble pas être votre scénario.


Eh bien, je ne sais pas comment le clarifier davantage. Peut-être en ajoutant des images à la question originale d'OP? Target = "_ blank" sonne bien pour les applications natives, mais elles ne se comportent pas de la même manière que les PWA sur iOS. Par PWA, je fais référence à une PWA installée ouverte à partir de l'écran d'accueil sur iOS. Par navigateur intégré à l'application, je fais référence au mode de navigation utilisé lors de l'ouverture de TOUT lien vers des domaines externes à partir d'une PWA. Allez dans la rubrique "Ouvrir des liens avec Safari est impossible" dans cet article: medium.com/@firt / ... pour voir ce que je veux dire.



0
votes

Après des enquêtes assez approfondies, je pense que ce n'est pas possible actuellement (entre iOS 13.X et iOS 14.1).

Les API javascript suivantes utiliseront le navigateur intégré à l'application:

  • window.open()
  • window.location.href =

L'utilisation d'une balise d'ancrage utilisera également le navigateur intégré à l'application, quels que soient les attributs qui lui sont attribués. Changer la portée du manifeste n'aide pas non plus.

MAIS j'ai trouvé un moyen de demander au moins à l'utilisateur qu'il se trouve dans un navigateur intégré à l'application pour rendre l'UX un peu moins déroutant.

Il y a deux façons (peut-être plus?) De détecter si le navigateur est autonome: window.matchMedia("(display-mode: standalone)").matches et window.navigator.standalone . Et voici la partie étrange:

function isIOSInAppBrowser() {
  // Check if device is iPad, iPhone or iPod (this bit is naive and should probably check additional stuff)
  if (Boolean(window.navigator.userAgent.match(/iPad|iPhone|iPod/)) === false) return false;

  // Check if navigator is standalone but display-mode isn't
  if (window.navigator.standalone === true && window.matchMedia("(display-mode: standalone)").matches === false) {
    return true;
  } else {
    return false;
  }
}

Je suppose que window.navigator.standalone représente le contexte parent du pwa et window.matchMedia("(display-mode: standalone)").matches représente le contexte du navigateur intégré à l'application.

Donc, une implémentation naïve pour vérifier si votre application s'exécute dans le navigateur intégré à l'application sur iOS:

// regular safari
window.navigator.standalone -> false
window.matchMedia("(display-mode: standalone)").matches -> false

// full screen apps (only pwas, weirdly enough this doesn't apply to pre-pwa web apps on iOS)
window.navigator.standalone -> true
window.matchMedia("(display-mode: standalone)").matches -> true

// in-app browsers launched from within a PWA 
window.navigator.standalone -> true
window.matchMedia("(display-mode: standalone)").matches -> false

notez que cette implémentation n'est pas fiable et peut facilement produire des faux positifs dans la future version d'iOS


0 commentaires