Save web creators with Chrome link popup for IE.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src/app
.gitignore
.prettierrc.json
LICENSE
README.md
gulpfile.js
package.json
project.json
yarn.lock

README.md

IE Buster

IE Buster Logo Illustration

Site

https://ie-buster.qranoko.jp

Quick Test

https://codepen.io/qrac/full/gdPNXN/

Change ViewOpen on CrossBrowserTesting から IE 表示をテストできます。

About

IE Buster Image

IE Buster(アイイーバスター)は、IE ユーザーに Chrome を促す軽量なポップアップ JS です。Web 制作者みんなを救うために開発しました。

多くの場合、IE ユーザーはブラウザの種類を認識していません。IE を強烈に否定しても「IE?なんのこっちゃ?」と暖簾に腕押し状態となってしまうので、もっと自然な移行シーンを増やそうと考えました。そこで、開発したのが IE Buster です。

ie-buster.js を読み込んだページに IE8〜11 でアクセスすると、自動的に Chrome ダウンロードを促すポップアップが表示されます(オプションで文言やリンクの調整が可能)。UI は Microsoft の Fabric 風でオフィシャル感を意識。

閉じるボタンはありません。推奨環境でないブラウザで閲覧を続けられては困るからです。真っ当な提案を、できるだけ礼儀正しく IE ユーザーに届けます。

ネーミング程の破壊力はないかもしれませんが、IE Buster が Web 制作者を救う一手になれば幸いです。

How To Use

CDN

<script src="https://cdn.jsdelivr.net/npm/ie-buster@1.1.0/dist/ie-buster.min.js"></script>

HTML 内に CDN のリンクを貼るだけで、ポップアップを表示できます。

npm

$ npm i -D ie-buster

npm install も利用可能です。

Vue.js

npm でインストール後、 App.vue に下記を追記します。

import 'ie-buster/dist/ie-buster.min.js'

Nuxt.js

npm でインストール後、Vue ファイルで呼び出して利用できます。IE Buster は JavaScript 内でwindowを使用しているので、Nuxt.js では SSR を迂回する記述で呼び出します。重複しないよう、nuxt.config.jsbuild > vendor にも加えます。

<script>
if (process.browser) {
  require('ie-buster');
}
</script>
module.exports = {
  build: {
    vendor: ['ie-buster']
  }
}

nuxt.config.js に CDN のスクリプトタグを記述する方法でも使用可能です。

module.exports = {
  head: {
    script: [
      {
        src:
          'https://cdn.jsdelivr.net/npm/ie-buster@1.1.0/dist/ie-buster.min.js'
      }
    ]
  }
}

Netlify

Netlify にサイトをデプロイしている場合は、Snippet injection で CDN リンク挿入 → 再デプロイするだけで IE Buster が導入できます。

Netlify Snippet Injection Image

WordPress Plugin

WP IE Buster としてWordPress 公式プラグインディレクトリに追加されました。ie buster などで検索・インストール後、有効化するだけで WordPress サイトにポップアップを表示できます。

※WordPress Plugin 版には、まだカスタマイズ用のオプションが実装されていません

WP IE Buster Install Image

Options

ie-buster.js を読み込んだ後に、オプションを使ってテキストやリンクを差し替えられます。デフォルトでは以下の内容が設定されています。差し替える場合は、文言とリンク内容に齟齬がでないよう気をつけてください。

<script src="js/ie-buster.js"></script>
<script>
  ieBuster({
    mainText: "ご利用のインターネットブラウザは推奨環境ではありません。Webサイトの動作が保証できませんので、最新の Google Chrome をご利用ください。",
    linkText: "ダウンロードページへ",
    linkUrl: "https://www.google.com/chrome/"
  })
</script>

Support

  • IE 8
  • IE 9
  • IE 10
  • IE 11

Develop

  • MacBook Pro: 13-inch 2016 No-touchbar
  • OS: macOS High Sierra 10.13.6
  • Node.js: v10.9.0

License

  • MIT

Credit