windows.openを使用した時に、iOSのSafariにて別タブでファイルを開けない場合の対処法。

• facebook

オフィス狛 技術部のmmm（むー）です。

タイトルの通りですが、windows.open()を使用した際にiOSのSafariにて別タブでファイルを開くことができなかったため、その対処法を書きます。

・フロント（Angular）にて、リンクを押下した後PDFを別タブで開く
　1. リンクを押下後、APIを呼ぶ
　2. API（Express）で、S3にあるPDFデータ（Blob）をレスポンスする
　3. フロントにてAPIからのレスポンスを取得した後、別タブを開きPDFを表示する

・iOS（Safari）だけリンクを押しても何も反応しない
・PCブラウザ（Chrome、 Firefox、 Sarfari）やiOSブラウザ（Chrome）はリンク押下後に別タブでPDFを開くことができる

・Safariでは、非同期処理内でwindows.opon()を実行すると呼び出しをブロックするため

observable.subscribe(downloadData => {
	  const blob = new Blob([downloadData], { type: 'application/pdf' });
	  const fileURL = window.URL.createObjectURL(blob);
    window.open(fileURL, '_blank');
})

・非同期処理が始まる前に、windows.open() を実行するように変更する

this.windowReference = window.open();  // <- 🌟変更

observable.subscribe(downloadData => {
	  const blob = new Blob([downloadData], { type: 'application/pdf' });
	  const fileURL = window.URL.createObjectURL(blob);
    this.windowReference.location = fileURL;  // <- 🌟変更
})

・iOSのSafariはデフォルトの設定で、ポップアップブロックがONになっているので、OFFにすることで開けるようになります。
・ただ、別タブで開くか確認するポップアップが表示されますし、デフォルトはONになっています。

設定変更方法：iPhoneの設定 > Safari > ポップアップブロックをOFF

以上となります。
同じようにはまった方の参考になりましたら、幸いです🍭

Angular , JavaScript