AndroidのWebView(ガワ)アプリの開発をした話

こんにちは、新卒1年目のゆうきです。

この度は早速AndroidのWebView(ガワ)アプリを開発する機会があったため、そこで得た知見をまとめてブログにしたいと思います。

『目次』

  • PWAではなくガワアプリとして開発することになった経緯
  • アプリに求められた要件
  • 開発に苦戦した理由
  • 解決策その1(失敗)
  • 解決策その2(失敗)
  • 解決策その3(成功)

PWAではなくガワアプリとして開発することになった経緯

まず、なぜPWAではなくガワアプリを作ることになったのか、その理由を説明します。

  • WEB版のサービスがあった
  • アプリからのお問い合わせ時には調査のためにOS、アプリverなどを送りたかった
  • 自社サービスのサーバからプッシュ通知を送りたかった
  • 初回起動時にはウォークスルーで使い方の説明を表示したかった
  • アプリインストール時に自動でアカウントを作り、登録なしで使えるようにしたかった
  • 特定のURLの場合はIntentで別のアプリ(ストアなど)を開くようにしたかった

今回調べた限りでは赤文字部分がPWAではできないため、ガワアプリとして開発することになりました。
ちなみに「Trusted Web Activity」という仕組みを使用すればGoogle Play Storeにも登録できますし、一応プッシュ通知も送れるようです。
気になる方は「TWA GooglePlay」などで調べてみてください。

アプリに求められた要件

  • インストール時に、ユーザ登録用APIを叩いて自動的にユーザを作成できる
  • 自社サービスのサーバからプッシュを送れる
  • ウォークスルーを表示することができる
  • WebViewを使用してWEB版の内容を表示/操作することができる
  • WebViewでの表示/操作時にアプリのユーザ情報と紐付けられる
  • 特定のURLの場合はIntentで別のアプリを開く

赤文字部分が最も苦戦しました。
苦戦した理由は以下で説明します。

開発に苦戦した理由

まず、AndroidのWebViewにおいてURLをロードする処理の時には
shouldOverrideUrlLoadingが呼ばれます。

そのため、「shouldOverrideUrlLoading」の中で必要な情報を
webView.loadUrl(“URL” , “Header”)」という形で渡そうと考えました。

しかし、「shouldOverrideUrlLoading」はGET処理の時にしか呼ばれないという落とし穴がありました。
そのため、フォームの送信などのPOST処理では上記の方法が使えません。

そこでいくつか対策を行ったのですが、その時の失敗談と最後に成功した方法を載せたいと思います。

解決策その1(失敗)

WebViewには「shouldInterceptRequest」という、メソッドがあります。
これを使用してすべてのリクエストを検知してその中でリクエストに対してヘッダーを付与する方法を考えました。

しかし、1回目のリクエストではヘッダー情報を付与することができましたが、2回目以降のリクエストにヘッダーを付与することができませんでした。

理由を調べてみると「HTTPの仕様では、後続のリクエストに同じヘッダーを送信する必要があると記載されていません。」と出てきました。

簡単にいうとHTTPの仕様的にこの方法はできないということらしいです。

解決策その2(失敗)

上記の問題を調べている時に、「shouldInterceptRequest」の中で新しくHTTPリクエストを作成し、そのWebResourceResponseを返すという方法がでてきました。

そこで、その通りにやってみたのですが、諸事情で正しくレスポンスを取得することができませんでした。
そのため、この方法は断念。
その結果の対策として以下の方法を採用しました。

解決策その3(成功)

結局「Cookieに必要な情報を付与する」という形に落ち着きました。

どうやってどんな情報を付与しているかは書けませんが、これによって無事にアプリのユーザ情報と操作の紐付けを行うことができるようになりました。

ちなみにGETでURLを読み込む場合は「webView.loadUrl("URL" , "Header")」を使用します。

POSTでURLを読み込む場合は「webView.postUrl("URL", byte[] data)」というメソッドもありますので、POSTのdataがわかっている場合はこちらの処理を使用すると良いかもしれません。

ということでAndroidのWebView(ガワ)アプリの開発をした話でした。
もし、同じようにガワアプリを作ろうと思っている方がいれば、そのお役に立てれば幸いです。

Follow me!