Angular2 PWA / Safari ne peut pas ouvrir un lien dans une nouvelle fenêtre

Question

Je travaille sur une application web, qui, une fois ajoutée à l'écran d'accueil, fonctionnera comme une application autonome, ce qui signifie qu'aucune interface de navigateur n'est disponible.

À un moment donné, je dois ouvrir un fichier, dont l'URL ne sera générée que lorsque le lien aura été cliqué. Voici le modèle :

{{dokumentMime(doc)}}

Voici la méthode qui gère le clic dans le composant :

download($event, dokument: Dokument) {
    $event.preventDefault();

    this.downloading = true;
    dokument.isNew = false;

    if (isMobile()) {
        const anchor = this.document.getElementById(dokument.dokumentGuid);
        this.kundeService
            .getDokumentDownloadUrl(dokument.dokumentGuid)
            .pipe(
                tap(url => this.setAndClick(anchor, url)),
                finalize(() => (this.downloading = false))
            )
            .subscribe();
    } else {
        this.kundeService
            .getDokumentData(dokument.dokumentGuid)
            .pipe(
                tap(blob => saveBlobAs(blob, dokument.name)),
                finalize(() => (this.downloading = false))
            )
            .subscribe();
    }
}

setAndClick(anchor, url) {

    anchor.setAttribute('href', url);
    anchor.setAttribute('target', '_blank');

    // voir : https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn905219(v=vs.85)
    const event =
        typeof (window).Event === 'function'
            ? new MouseEvent('click', {
                  view: window,
                  bubbles: true,
                  cancelable: true
              })
            : document
                  .createEvent('MouseEvents')
                  .initMouseEvent(
                      'click',
                      true,
                      true,
                      window,
                      0,
                      0,
                      0,
                      0,
                      0,
                      false,
                      false,
                      false,
                      false,
                      0,
                      null
                  );

    anchor.dispatchEvent(event);
}

Certaines versions d'iOS ouvrent une application Safari et une nouvelle fenêtre dans celle-ci. La dernière version d'iOS12 sur un iPhone 7S (et je n'ai aucune idée pourquoi l'iPhone 6 l'accepte), ouvrira le lien dans la même fenêtre autonome, rendant ainsi impossible le retour à la page où le lien a été cliqué (car il n'y a pas d'interface dans le mode autonome).

Pourquoi Safari ignore-t-il parfois le target=_blank et ne ouvrira pas une nouvelle fenêtre Safari ?

Answer 1

Je ne peux pas dire pourquoi il y a une différence entre l'iPhone6 et l'iPhone7s en ce qui concerne les comportements du navigateur. Mais ce qui a clairement été trouvé dans mes tests, c'est que tous les liens vers le même hôte, en mode autonome, s'ouvrent également dans la même fenêtre. Peu importe si le lien a été généré avec du javascript ou un lien codé en dur. Ce qui m'a aidé a été d'introduire un sous-domaine pour les téléchargements ("download.votreDomaine ...."). C'est la portée du lien de téléchargement qui compte. Dans votre PWA, la balise de base href dans l'en-tête HTML définit la portée.

Pour le sujet Portée, voir ici https://developer.mozilla.org/en-US/docs/Web/Manifest

Apple ignore le manifeste et la portée autant que j'ai pu le voir.