Android の WebView 内で ajax が動かない!4つの対策

ローカル環境(PC環境)だと動いていたAjaxが・・・

  • なぜかWebViewだと動かない
  • Android実機だと通信失敗する
  • 色々試したけど通信できない

こういうトラブルに遭遇したことがありました。

でも解決方法が分かったので、
Androidの WebViewでajaxが動かないときの対処法 を紹介します。

いくつかの要点を押さえれば解決可能

対処法1.適切なパーミッションがあるかどうか

1つめはパーミッション設定の見直し

当たり前ですが、Ajaxは次のようなことをします。

  • サーバーにデータを送る
  • 通信後にレスポンスを行う

仰々しく書いたけど、結局はネットワークを利用してるってこと です。

 

そのため、必ず以下のパーミッション必須ですね。

必ず INTERNET  のパーミッションがないとダメ!

アプリを作ったばかりだと忘れがちなので、まずはココをチェックです。

対処法2.WebSettings から JavaScript有効化

お次は WebSettings の見直しをすること

コレも意外と盲点ですね。

 

まず重要なのはJavaScriptが有効になってるかどうか

▼ 必ず setJavaScriptEnabled  を有効化

まあ Ajax まで使ってて、この書き忘れをするのはレアですね。

でも書き忘れていないか、念のために確認しておとくと安全です。

 

あとそれから・・・

▼ 一応 setDomStorageEnabled  も有効化しておくとベスト

ここまで設定しとけば、恐らく通信成功すると思います。

対処法3.コンソール(console)のエラー内容を確認

これは最初にすべきことかもですが・・・

もし上記2つでも解決しないなら、JS側でのエラーが疑われます。

なのでコンソールのエラー出力確認してみてください。

とはいえ WebView から直接確認なんてできません。

 

なのでコンソール出力確認には、以下コードを書く必要があります。

このように onConsoleMessage  をオーバーライドすればいいだけ。

開発者ツールと同じ感覚でデバッグできて便利ですね。

対処法4.blocked by CORS policy エラーが出てないか確認

今度はAjax側(サーバー側)での話

次みたいな場合だと、CORS policy エラーってのが出ます。

  • 異なるドメイン間で通信を行う時
  • 正しいCORSヘッダーを含んでない時

僕自身も Ajax を使っていて、遭遇したことが何回かありました。

 

実際にCORS policy エラーが起きると、こんなエラー表示されます。

▼ 実際のコンソール表示されたエラー例

まあ WebView でこういうエラーは起きるか分からないです。
だって WebView <=> 外部サイト は異なるドメイン間ではないので

でも何かのはずみで起きることもあるかもしれません。

その場合の対処法は次ページで解説した通りです。

WebViewに限らず、CORSの対処法が知りたい方はお読みください。

ある設定さえしておけば、簡単に解決できます。

ここまでの Ajax が動かないときの対策まとめ

過剰書きすると次の通り

  1. 適切なパーミッションがあるかどうか
  2. WebSettings から JavaScript有効化
  3. コンソール(console)のエラー内容を確認
  4. blocked by CORS policy が出てないか確認

以上、Android開発で WebView から Ajax が動かないときの対処法でした。ではまたバイバイ

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください