Nuxtで作ったページをIEで見た時に別ページへ飛ばす（IE対応） #Vue.js

思い

TLDR: IE11はレガシーってことをユーザーに気づかせてあげたほうが良いんじゃない？

EdgeもChromium版になり世界平和が近づく中、未だ一般的なサポートはまだまだ継続中のIE11は「モダンではないWebブラウザ」として国内で未だ7%程度の利用率をほこり対応が必要なケースは多いです。

ただJavaScriptの対応状況がいけてなかったりでモダンWeb開発をする上では弊害になるため、思い切って「このブラウザーは対応していないよ！」って表示してあげるケースもあります。個人的にはこういうのどんどん進めてITリテラシーが低いユーザーにも「IEはもう古いんか……」って思ってもらうことも大切な気がします。7%のためにわざわざ対応することのコスト対効果を考えて、プロダクトごとに適切な判断をしていきましょう。

対応方法

1. staticにIE11でも見れる優しいページを作る

static/browser-check.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IE11は対応していません</title>
  </head>
  <body>
    IE11は対応していません。モダンなWebブラウザを使ってください。
    <li>
      <ul>Chrome</ul>
      <ul>Firefox</ul>
      <ul>Safari</ul>
      <ul>Edge</ul>
    </li>
  </body>
</html>

CSSなんかも必要に応じてセットで置いておきましょう

2. pluginsにIEチェック用のプラグインを作成する

plugins/browser-check.js

const userAgent = window.navigator.userAgent

// IEの場合、browser.htmlを開く
if (userAgent.indexOf('Trident') !== -1) {
  window.location.href = 'browser.html'
}

UserAgentによるこの判別方法はエンジンを元に判定しているので、IE11以外のIEに反応するかはわかりません。

3. nuxt.config.jsからpluginsを読み込む

nuxt.config.js

// 前略

  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: ['~/plugins/ie-taiou.js'],

// 後略

プラグインはリストの順番が読み込む順番になるので、必要に応じて順番を変えてあげてください。

以上で対応は完了です。
シンプルですがブラウザごとの個別の対応なんかももしあれば同じような方法でできると思います。
ただ当然画面に影響を与えるような処理は、コンポーネント側でやった方がいいのであまり出番はなさそう。