はじめに
この記事では、Angularを使って開発したWebアプリをIEにて開いた際にIE非対応の旨を表示するアラートを、設定の変更を行わずに表示する実装について記載しています。
Angularアプリじゃなくても同じようなことで困ってたら使えるかも。
困っていたこと
Angularにて開発していたアプリをIEで開いた際、画面が真っ白でなにも表示されないためアラートを出そうということになりました。
調べたところAngularはデフォルトだとIEには対応しておらず、完全に対応をしようとするとtsconfig等の設定等を変えなければならないとのことで、影響が大きそうな変更は避けたい…ということからなんとかアラートだけ出す方法はないものかと試行錯誤した、という経緯です。
環境
Angular CLI: 11.2.4
Node: 14.16.0
Angular: 11.2.5
ブラウザ: Internet Explorer 11
実装方法
src/index.htmlのbodyに以下のアラート表示メソッドを埋め込みます。それだけ。
<body>
<script type="text/javascript">
"use strict";
var userAgent = window.navigator.userAgent.toUpperCase();
if (userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('TRIDENT') !== -1){
alert("こちらのアプリはIEに対応していません。ブラウザを変更の上ご利用ください。");
}
</script>
<app-root></app-root>
</body>
上の変更を保存して再度buildすれば、画像のようにIEを開いた際にアラートが表示されるようになるはずです。
解説
こちらのコードは開いたブラウザのUserAgentからIEかそうでないかを判別し、判別の結果IEであった場合にのみアラートを出す、といった内容になっています。
まず、下記にてアプリを開いているブラウザのUserAgentを大文字に変換した上で変数userAgentに入れています。
var userAgent = window.navigator.userAgent.toUpperCase();
続いて、以下の部分で利用ブラウザがIEかそうでないかを判別しています。
IE10以前と以後でUserAgentが変更されているらしく、どちらにも対応できるよう二つの文字列にマッチすればアラートを出すようになっています。
もしIE以外のブラウザにも対応させたい場合は、対象のブラウザを判別できる文字列をuserAgent.indexOf('xxx')に入れればOKです。
こちらの記事で各ブラウザのUserAgentについてまとめてくださっています。
if (userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('TRIDENT') !== -1){
...
}
最後にアラートを出すコードをif文の中に入れます。
alert("こちらのアプリはIEに対応していません。ブラウザを変更の上ご利用ください。");
もちろんアラート表示以外のメソッドも入れられますが、IE非対応のメソッド・記法でないかは注意が必要です。
こちらの記事でIE非対応のメソッド・記法をまとめてくださっています。
さいごに
今回自分は試行錯誤の上index.htmlにjavascriptを埋め込む手段に出ましたが、この書き方は正直あまりきれいではないかな～と思うところもあります（動くことが最優先ではありますが...）。
あくまで一例ということで、もしきれいに書ける他の方法がある場合は教えていただけると嬉しいです。
ところで、IEはいつサービス終了するんでしょうね。
参考
AngularのIE対応について
https://mslgt.hatenablog.com/entry/2019/12/01/000625
JavaScriptでInternet Explorer（IE）のブラウザ判定をする方法
https://www.terakoya.work/javascript-ie-browser-check/