コネヒト開発者ブログ

コネヒト開発者ブログ

WebViewをES2015+Reactで実装した時のTips

f:id:dachi023:20171204020041p:plain

こんにちは!ちょうど1ヶ月前に子供が生まれ、忙しくも楽しく日々を過ごしている安達(@ry0_adachi)です🍼🍼🍼

今回は「コネヒト Advent Calendar 2017」の7日目の記事として、WebViewで使われる機能をReact+Fluxの構成で実装してリリースした時の辛かったことと、それをどうやって解決したか?について書いていきます。

qiita.com

やりたいこと

この3つをクリアすればOKです。

  • Android/iOS両方のWebView上で動作すること
  • アプリの対応OSバージョン(iOS9〜/Android4.1〜)で動作すること
  • アプリの中でも違和感を与えないような動作を実装すること

Polyfillがいろいろ必要になる

これはAndroid4系のWebViewがまだChromeベースでないバージョンまでがほとんどの原因かな?という気もしますが結構な頻度でクラスや関数がありません。なので、エラーが出た箇所に対して有効なPolyfillを読み込む必要があります。

何も対応していないと古いAndroid端末で大量のエラーが出るのでbabel-polyfillを入れ、あとは動かないものを個別対応していきます。

今回実装した中ではPromiseが使えない端末が結構あったりしたのでe6-promiseを入れたのと、URLのパースなどのためにurl-polyfillを入れました。この辺は複数の端末でエラーになってしまったので使うのであればほぼ必須かなという印象です。

使い方はnpmやyarnでインストール後にエントリファイルなどでimportしておしまいです。これで使えるようになります。

$ yarn add babel-polyfill es6-promise url-polyfill
import 'babel-polyfill'
import 'es6-promise/auto'
import 'url-polyfill'

スクロール発火のコンテンツ読み込み

react-virtualizedを使っているのですが、提供されている機能だと「スクロール可能な領域が残り◯pxになったら次のページをajaxで読み込んでリストに追加する」みたいなことがうまくできず、結局その部分だけは実装しました。
とはいってもスクロールイベントの発火やアイテムごとのheightの算出などには対応してくれていて、基本的にはスクロールイベントに食い込んで残heightの計算をしたり、重複してリクエストが投げられたりしないように制御するなどの対応をしたのみで済みました。
また、スクロール自体の挙動はとてもスムーズで、ListView的に使う分にもとても優れたライブラリだなと感じました。

heightの計算周り、綺麗に書けている自信がないので「もっとこうするといいよ!」「ってかコードおかしくない??」などあればコメント等で教えてください🙏

JavaScriptからFirebase Analyticsに直接送信できない

これはWebViewの話なのですが、JavaScriptのFirebase SDKにはAnalyticsの機能はなく、iOS/Android側に中継する形で送信する必要があります。これはAnalyticsがアプリ向け機能として提供されているからなのですが、webでも需要あると思うので対応してほしいなぁ〜と...。

公式ドキュメント

まとめ

WebViewでJavaScript、というテーマで書きましたがwebブラウザでも同様の事象は起こります。ただ、アプリ内での動作なのでアプリ側の対応OSを網羅しないといけないのが辛かったなと感じたのでここら辺はOSの使用率などを見て相談しつつ、対応バージョンから切っていくのも重要ですね。

8日目の記事は

アプリエンジニアの@kichikuchiです!お楽しみに!