🙁課題
IEの利用者向けに「IEは非対応です。別のブラウザをお使い下さい」という表示をしようと思います。ところがIEの判定ルーチン部分や画面表示に関してはIEで処理できる必要があり、Webpack導入済みの環境で真面目にこれをやろうとすると、IE対応の必要なファイルとそうでないファイルを切り分けて云々……とする必要があります。
IE判定なんて複雑なものでもなし、告知画面そのものは所謂ペライチでJSすら使わないレベルなのに、これは面倒or本末転倒……っていうのが今回解決したい課題となります。
👴結論
そもそもIE判定及び告知画面についてはWebpackで扱わず、手打ちのHTML,CSS,JSファイルを作ってwebpackの出力先フォルダに突っ込んだ方が楽なのでは。 babel関係も不要で、Gitの無視ファイル設定だけちょこっと弄るだけですし。
手順
1. IE判定を行い、非対応の告知画面ページへ遷移するルーチンを書いたJSファイルを作る
const isIe = function (userAgent) {
return (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1)
}
if (isIe(window.navigator.userAgent.toLowerCase())) { location.href = "【警告画面のHTMLファイルのパス】" }
もちろん、ここでDOMを書き換えて告知画面を出してもいいのですが、
- 何かの拍子にwebpackでバンドルしたjsと干渉しそうで不安
- 書き換え処理のJSもIE11対応する必要がある
- 告知画面のHTMLファイルは要件の性質上、直書きできる可能性が高く、この場合エディタの補完が効く
という点を考慮して、告知画面は別ファイルに切り出してます。
それからIE11でもconstは使えます。
2. メインとなるHTMLファイルのheadタグ内にWebpackで生成したファイルより先に記述する
<head>
<script type="text/javascript" src="【IE判定＆遷移ルーチン（要IE11対応）】.js"></script>
<script type="text/javascript" src="【Webpackで作ったファイル】.js"></script>
</head>
3.非対応の告知画面はざっくり手打ちの静的ファイルだけで構成
「IEは非対応です。別のブラウザ使ってください」という旨の表示以外何もしようがないので、手打ちHTMLとCSSだけで何とかなる範疇かと。HTMLファイル内に全部書いてしまってもいいかもしれませんね。
もうちょっとユーザーフレンドリーにするなら、エラー画面を見ているユーザーはWindowsユーザーかつEdgeをインストール済みであることが期待できるので、「Edgeで開く」リンクを置いておくといいと思います。
マイナーなテクニックですが、Windowsの場合、レジストリにパラメータを登録しておくと、ブラウザからURLスキームを使ってインストールしてあるソフトを呼び出すことができるんですね。
そしてedgeに関してはインストールした時に登録済みなので、
<a href="microsoft-edge:【edgeで開かせたいURL】">Edgeで開く</a>
こういうリンクを踏ませるだけでedgeで開かせることができます。
ただまぁメジャーなChromeじゃなくてマイナーなEdgeを薦めるのはどうか、という葛藤もありますが、IE11を使ってるユーザー相手ですとねぇ……。B2BでITとは縁遠い業界相手になるほど刺さるかと。
備考
告知画面の表示ですが手抜きしすぎて、適当な背景＋画面のど真ん中に「Internet Explorerはサポート外です。別のブラウザをお使い下さい」という表示を出すだけだと、怪しげなフィッシングサイトに飛ばされた感が半端ないです😅 背景ぐらいは通常サイトに揃えるなり、一緒に会社ロゴを表示するなり、多少なり公式アピールをした方がいいです。
参考
使用してるブラウザを判定したい - Qiita
Microsoft EdgeでWebページを開くインターネットショートカット 初心者備忘録