WebView のクリック動作を最適化する

アプリで WebView を使用してウェブ コンテンツを表示する場合は、次の理由からクリック動作の最適化を検討することをおすすめします。

• WebView はタブ ブラウジングをサポートしていません。リンクをクリックすると、デフォルトのウェブブラウザでコンテンツが開きます。

• WebView は、クリックのリンク先が別のアプリの場合に広告で返される可能性があるカスタム URL スキームをサポートしていません。たとえば、Google Play のクリックスルー URL で market:// が使用されることがあります。

• WebView では、Google ログインと Facebook ログインはサポートされていません。

このガイドでは、ウェブビューのコンテンツを維持しながら、モバイル ウェブビューでのクリック動作を最適化するためのおすすめの手順について説明します。

前提条件

• ウェブビューの設定ガイドの手順を完了します。

実装

WebView インスタンスのクリック動作を最適化する手順は次のとおりです。

1. WebViewClient で shouldOverrideUrlLoading() をオーバーライドします。このメソッドは、現在の WebView で URL が読み込まれようとしているときに呼び出されます。

2. クリック URL の動作をオーバーライドするかどうかを指定します。

   コード例では、現在のドメインがターゲット ドメインと異なるかどうかを確認します。これは 1 つのアプローチにすぎません。使用する条件は異なる場合があります。

3. 外部ブラウザ、Android カスタムタブ、または既存のウェブビュー内で URL を開くかどうかを決定します。このガイドでは、Android カスタムタブを起動して、サイトから移動する URL を開く方法について説明します。

サンプルコード

まず、モジュール レベルの build.gradle ファイル（通常は app/build.gradle）に androidx.browser 依存関係を追加します。カスタムタブには次のものが必要です。

dependencies {
  implementation 'androidx.browser:browser:1.5.0'
}

次のコード スニペットは、shouldOverrideUrlLoading() を実装する方法を示しています。

Java

public class MainActivity extends AppCompatActivity {

  private WebView webView;

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // ... Register the WebView.

    webView = new WebView(this);
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webView.setWebViewClient(
        new WebViewClient() {
          // 1. Implement the web view click handler.
          @Override
          public boolean shouldOverrideUrlLoading(
              WebView view,
              WebResourceRequest request) {
            // 2. Determine whether to override the behavior of the URL.
            // If the target URL has no host and no scheme, return early.
            if (request.getUrl().getHost() == null && request.getUrl().getScheme() == null) {
              return false;
            }

            // Handle custom URL schemes such as market:// by attempting to
            // launch the corresponding application in a new intent.
            if (!request.getUrl().getScheme().equals("http")
                && !request.getUrl().getScheme().equals("https")) {
              Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
              // If the URL cannot be opened, return early.
              try {
                MainActivity.this.startActivity(intent);
              } catch (ActivityNotFoundException exception) {
                Log.d("TAG", "Failed to load URL with scheme:" + request.getUrl().getScheme());
              }
              return true;
            }

            String currentDomain;
            // If the current URL's host cannot be found, return early.
            try {
              currentDomain = new URI(view.getUrl()).toURL().getHost();
            } catch (URISyntaxException | MalformedURLException exception) {
              // Malformed URL.
              return false;
            }
            String targetDomain = request.getUrl().getHost();

            // If the current domain equals the target domain, the
            // assumption is the user is not navigating away from
            // the site. Reload the URL within the existing web view.
            if (currentDomain.equals(targetDomain)) {
              return false;
            }

            // 3. User is navigating away from the site, open the URL in
            // Custom Tabs to preserve the state of the web view.
            CustomTabsIntent intent = new CustomTabsIntent.Builder().build();
            intent.launchUrl(MainActivity.this, request.getUrl());
            return true;
          }
        });
  }
}

Kotlin

class MainActivity : AppCompatActivity() {

  private lateinit var webView: WebView

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // ... Register the WebView.

    webView.webViewClient = object : WebViewClient() {
      // 1. Implement the web view click handler.
      override fun shouldOverrideUrlLoading(
          view: WebView?,
          request: WebResourceRequest?
      ): Boolean {
        // 2. Determine whether to override the behavior of the URL.
        // If the target URL has no host and no scheme, return early.
        if (request?.url?.host == null && request.url.scheme == null) {
          return false
        }
        val currentDomain = URI(view?.url).toURL().host

        // Handle custom URL schemes such as market:// by attempting to
        // launch the corresponding application in a new intent.
        if (!request.url.scheme.equals("http") &&
            !request.url.scheme.equals("https")) {
          val intent = Intent(Intent.ACTION_VIEW, request.url)
          // If the URL cannot be opened, return early.
          try {
            [e-mail](intent)
          } catch (exception: ActivityNotFoundException) {
            Log.d("TAG", "Failed to load URL with scheme: ${request.url.scheme}")
          }
          return true
        }

        val targetDomain = request.url.host

        // If the current domain equals the target domain, the
        // assumption is the user is not navigating away from
        // the site. Reload the URL within the existing web view.
        if (currentDomain.equals(targetDomain)) {
          return false
        }

        // 3. User is navigating away from the site, open the URL in
        // Custom Tabs to preserve the state of the web view.
        val customTabsIntent = CustomTabsIntent.Builder().build()
        customTabsIntent.launchUrl(this@MainActivity, request.url)
        return true
      }
    }
  }
}

ページ ナビゲーションをテストする

ページ ナビゲーションの変更をテストするには、

https://google.github.io/webview-ads/test/#click-behavior-tests

ウェブビューに渡すことができます。さまざまなリンクタイプをクリックして、アプリでの動作を確認します。

その際は、次の点をよくご確認ください。

• 各リンクは、意図した URL を開きます。
• アプリに戻ると、テストページのカウンタがゼロにリセットされず、ページの状態が保持されたことを確認できます。