Angular2 PWA / Safari 无法在新窗口中打开链接答案

【问题标题】：Angular2 PWA / Safari can't open a link in new windowAngular2 PWA / Safari 无法在新窗口中打开链接
【发布时间】：2018-09-19 14:50:52
【问题描述】：

我正在开发一个网络应用程序，当它添加到 HomeScreen 时，它将充当独立应用程序，这意味着没有可用的浏览器 UI。

有一次我需要打开一个文件，只有在单击链接时才会生成该文件的 URL。这是模板：

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

这是处理组件中点击的方法：

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

一些版本的 iOS 会在其中打开一个 Safari 应用程序和一个新窗口。 iPhone 7S 上的最新 iOS12（我不知道为什么 iPhone 6 可以使用它），将在同一个 standalone 窗口中打开链接，因此无法返回到点击链接（因为在独立模式下没有 UI）。

为什么 Safari 有时会忽略 target=_blank 而不会打开新的 Safari 窗口？

【问题讨论】：

标签： javascript angular safari mobile-safari progressive-web-apps

【解决方案1】：

我不能说为什么 iPhone6 和 iPhone7s 在浏览器行为方面存在差异。但在我的测试中明显发现的是，所有指向同一主机的链接，在单机模式下，也是在同一个窗口中打开的。链接是用 javascript 生成的还是硬编码的链接都没有关系。帮助我的是为下载引入一个子域（“download.yourDomain ....”）。重要的是下载链接的范围。在您的 PWA 中，html 标头中的基本 href 定义范围。

有关主题范围，请参见此处https://developer.mozilla.org/en-US/docs/Web/Manifest

据我所知，Apple 忽略了清单和范围。

【讨论】：