platform.jsで特定のブラウザを弾く

普段はClojureScriptでフロントエンドの開発をしているIkuruと申します。
JavaScriptは普段書きません(汗

最初はClojureScriptの宣伝の記事を書かせていただこうと思っていたのですが、
最近生JavaScriptを初め使った出来事があってタイムリーだったので趣旨を変更しました。

問題：reactベースのアプリケーションが動かないブラウザーがあるので、ブラウザを検知して警告を出したい

ClojureScriptで開発していたreactベースのSPAで、FirefoxとChromeでしかテストしていなかった
→リリース直後にユーザーからIE11だと動かないというフィードバック
→UXのためにIEだったらアプリケーションを起動せずに即別のブラウザ使って下さい的メッセージを表示しよう!
→生JSで数行で済む事をClojureScriptでやるのは無駄だよね

という経緯で初めて仕事でJavaScriptを使う事になったのでした。

ソリューション: platform.js で検知→domをゴニョゴニョ

軽くググって一番上に出てきたplatform.jsというライブラリを使いました。

cdnjsに登録されている物をscriptタグから読み込み、プラットフォームのチェックと表示の切り替えのdom操作を以下のように書きました。

[:body
 [:div [:div#app "Hello world"] 
       [:div#warn "Please use a supported browser"]]
 [:script {:type "text/javascript",
           :src "https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.4/platform.min.js"
           :async false}]
 [:script
    ；； valid browsers
    "if (!(platform.name == 'Chrome') &&
         !(platform.name == 'Safari') &&
         !(platform.name == 'Firefox') &&
         !(platform.name == 'Opera') &&
         !(platform.name == 'Microsoft Edge')){
       //hide the loading
       document.getElementById('app').setAttribute('style', 'display: none;');
       //change the id so that reagent loses the target to mount                                                                       
       document.getElementById('app').id = null;
 
       //make the warning element visible
       document.getElementById('warn').setAttribute('style', 'display: block;');
     }"]

解説

[:body... とか [:scrips... ?

ClojureではメジャーなHiccup記法と呼ばれる物でClojureのデータ構造でHTMLのマークアップを表現しています

platform.jsはaync=falseで読み込む

platform.jsが読み込まれる前にアプリケーション本体のjsが動いてしまわないようにする為に指定しています。

scriptタグ内の処理

今回はInternet Exploerer を弾きたかったため

• IE以外の主要ブラウザだった場合は何もしない → アプリが起動する
• IEだった場合は
  • #app のdivにdisplay: noneを設定して非表示
  • #app のidを変更してアプリケーションがマウントされないようにする
  • 注意文が入っている #warn のdivのdisplayを設定して表示されるようにする

上記のようにしました。

その他の宣伝

普段はClojure/ClojureScriptを書いてて、今年のClojureアドベントカレンダーにも記事を書きました。
よろしけばこちらもチェックしていただけると嬉しいです!
https://qiita.com/iku000888/items/2f047d7c5eaa0235b61c