Angular2 PWA / Safari can't open a link in new window

user_542191 0
Viewed 917

I am working on a web app, which, when added to HomeScreen, will act as a standalone app, meaning there are no browser UI available.

At one point I need to open a file, the URL to which will be generated only when the link has been clicked. Here is the template:

<a class="mobile-target"
   (click)="download($event, doc)"
   [id]="doc.dokumentGuid"
   [title]="doc.name"><span>{{dokumentMime(doc)}}</span></a>

Here is the method which handles the click in the component:

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');

    // see: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn905219(v=vs.85)
    const event =
        typeof (<any>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);
}

Some versions of iOS do open a Safari app and a new window in it. The latest iOS12 on an iPhone 7S (and I have no idea why iPhone 6 is ok with it), will open the link in the same standalone window, thus making it impossible to go back to the page where the link was clicked (as there is no UI in the standalone mode).

Why would Safari sometimes ignore the target=_blank and will not open a new Safari window?

progressive-web-apps angular mobile-safari safari javascript
1 Answers

I can not say why there is a difference between iPhone6 and iPhone7s in the context of browser behaviors. But what has clearly been found in my tests is that all links to the same host, in stand-alone mode, are also opened in the same window. It does not matter if the link was generated with javascript or a hard coded link. What helped me was to introduce a subdomain for downloads ("download.yourDomain ...."). It's the scope of the download link that matters. In your PWA, the base href in the html header defines the scope.

For the topic Scope see here https://developer.mozilla.org/en-US/docs/Web/Manifest

Apple ignores the manifest and scope as far as I could tell.

user_13494370
Related