まあ、こんなことをしたいやつなんぞいないと思うのですが私はやりたかったのでやり方。

環境


下記の環境でやってます。

  • Nuxt.js: 2.8.1

なぜ?


Nuxt.jsで特に何も設定せずに古いブラウザでアクセスすると下記のようなローディング画面が表示されて、ここから進まないです。

polyfillすれば古いブラウザもカバーできてみんなハッピーなのですが、私はやりたくなくて、理由はだいたいこんなかんじ。

  • サイト構築するときに絶対に古いブラウザは対応しないと心に誓ったこと
  • MSも使うのやめてくれといってるような古いブラウザをわざわざ使ってる側に配慮してまで対応するのがなんか癪
  • 全体に影響のでる可能性のあるような対応(やライブラリ依存)はなるべく避けたい

要するに「仕事じゃなくて趣味なのでオレのやりたいようにやる。オレのサイトだし、以上!!」という感じです。

しかし、いざ実際にIEでアクセスしてみるとローディングインジケーターがぐるぐる回ったまま、なにか表示されそうな雰囲気を醸し出しつつも永久に何も表示されないのは流石にどうかと思った。どうかと思ったので警告だけ出すことにしました。

やり方


全ページでブラウザをJSで判定して対象とするブラウザであればalertを出せばいいという単純な話なんですが、問題はどこでそれを実装するかです。

パッと思いつくのがmiddlewareですがmiddlewareだと動きません。ですので、App Template(app.html)に実装することにしました。App Templateについては公式のドキュメント見てください。

App Template

app.htmlscriptタグを書いてそこで判定と表示を行います。こんな感じです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
<script>
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
alert("モダンなブラウザつかってください");
}
</script>
</body>
</html>

おそらく非対応のブラウザでアクセスがあるとすればそれらのうち大半はIEだと思うので表示対象はIEのみにしました。IEのみ検知するコードは下記のStackOverflowを参考にしました。

Check if user is using IE

後はこれでIEで表示してみると下記のような感じでalertが表示されます。

おわり。