Я хочу обсудить свой личный опыт работы с In-app Webview. Я попытаюсь объяснить, с какими проблемами я столкнулся в In-app Webview для Android и iOS.

1. Как определить устройство Android или устройство iOS с помощью JavaScript.

Используя javascript, мы можем обнаружить Andriod или iOS, используя приведенный ниже код.

function getMobileOperatingSystem() {
 var userAgent = navigator.userAgent || navigator.vendor || window.opera;
 console.log(userAgent);
 if (userAgent.toLowerCase().indexOf("windows") >= 0 || userAgent.toLowerCase().indexOf("x11") >= 0) {
  return "Web";
 }
 if (/windows phone/i.test(userAgent)) {
  return "Windows Phone";
 }
 if (/android/i.test(userAgent)) {
  return "Android";
 }
 if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
  return "iOS";
 }
 return "unknown";
}
var dtype = getMobileOperatingSystem();
if (dtype == "Android") {
 Android.<Andriod Method>;
}else if (dtype == "iOS") {
   window.location.href = "<domain url with http or https and Query string for ios method to call>";
}

Ниже код для вызова метода Andriod

Android.<Andriod Method>;

Приведенный ниже код предназначен для вызова функции iOS. Здесь нам нужно активировать URL-адрес с параметрами запроса, который вызывает метод iOS.

window.location.href = "<domain url with http or https and Query string for ios method to call>";

2. Проблема с вращением загрузки изображения с камеры iOS.

В веб-просмотре в приложении, если вы пытаетесь сделать фотографию с помощью камеры в альбомном или портретном режиме. Он делает снимок в ландшафтном режиме, потому что в iOS по умолчанию изображение с камеры находится в ландшафтном режиме. Нам нужно обработать это вращение бэкендом.

3. Перенаправление сторонних URL-адресов

Если есть какие-либо сторонние URL-адреса, то перенаправление на вашу веб-страницу может быть проблемой, потому что с помощью кнопки «Назад» для Android или iOS закроется веб-просмотр в приложении. Здесь нам нужно остановить все сторонние URL-адреса с помощью javascript.

4. Веб-просмотр -> Приложение и приложение -> Связь через веб-просмотр.

Если вы хотите отправлять данные из приложения в Webview: мы можем активировать URL-адрес с параметрами (параметры методов GET или POST), мы можем отправлять данные в веб-браузер.

Если вы хотите отправить данные из Webview в приложение: Здесь мы можем использовать код javascript (см. код, указанный в point1), обнаружив, что устройства Android или iOS вызывают соответствующие методы.

5. Проблема масштабирования фокуса текстового поля в веб-просмотре

Иногда вы могли заметить, что когда мы фокусируемся на текстовом поле, просмотр увеличивается. Используя приведенный ниже HTML-код, мы можем избежать проблемы масштабирования.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
body { font-size: 16px; }
input, select { font-size: 100%; }

6. Отладка веб-браузера Android и iOS в локальной системе

Andriod: нам нужно включить режим отладки с использованием уровня кода. После этого мы можем отлаживать Webview в локальном элементе проверки Google Chrome. Для справки, пожалуйста, следуйте официальному сайту Google.



Начало работы с удаленной отладкой устройств Android
Удаленная отладка живого контента на устройстве Android с компьютера под управлением Windows, Mac или Linux. В этом руководстве вы узнаете, как…developers.google.com



iOS: здесь мы можем проверить веб-просмотр в приложении в браузере Safari, подключив устройство iPhone к устройству Mac.

Затем вам нужно включить «Веб-инспектор» на вашем устройстве iOS. Перейдите в «Настройки» > «Safari» > «Дополнительно» и включите веб-инспектор, чтобы он был включен.

Затем вам нужно включить меню «Разработка» в Safari на вашем компьютере Mac, если оно еще не включено. Перейдите в Safari › «Настройки» › «Дополнительно» и установите флажок «Показывать меню «Разработка» в строке меню».

Теперь, если ваше устройство iOS подключено к компьютеру с открытой веб-страницей, которую вы хотите отлаживать, вы можете перейти в «Разработка» > «Имя устройства iOS» в настольном Safari и щелкнуть страницу, которую вы хотите отлаживать.

Теперь вы можете отлаживать код в браузере.

7. Как установить права доступа к файлам в приложении Android Webview.

Чтобы выбрать файл из веб-представления Andriod в приложении, нам нужно включить разрешение для веб-просмотра на уровне кода. Ниже код Android позволит вам просмотреть файл из локального хранилища.

//Necessary Variable to implement file chooser in webview
private ValueCallback<Uri> mUploadMessage = null;
private ValueCallback<Uri[]> uploadMessage = null;
private Integer FILECHOOSER_RESULTCODE = 1;
private Integer REQUEST_SELECT_FILE = 2;

// Using WebChromeClient to pick file
 private class MyWebChromeClient extends WebChromeClient {
     protected void openFileChooser(ValueCallback<Uri> uploadMsg) {
         mUploadMessage = uploadMsg;
         Intent i = new Intent(Intent.ACTION_GET_CONTENT);
         i.addCategory(Intent.CATEGORY_OPENABLE);
         i.setType("*/*");
         String[] mimetypes = {"image/*", "application/pdf"};
         i.putExtra(Intent.EXTRA_MIME_TYPES, mimetypes);
         startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
     }
     // For Lollipop 5.0+ Devices
     public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
             if (ContextCompat.checkSelfPermission(ThemeDisplayBrowser.this,
                     Manifest.permission.WRITE_EXTERNAL_STORAGE)
                     != PackageManager.PERMISSION_GRANTED) {
                 // ASK FOR STORAGE PERMISSION HERE
             }
         }
         if (uploadMessage != null) {
             uploadMessage.onReceiveValue(null);
             uploadMessage = null;
         }
         uploadMessage = filePathCallback;
         Intent intent = null;
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
             intent = fileChooserParams.createIntent();
             intent.setType("*/*");
             String[] mimetypes = {"image/*", "application/pdf"};
             intent.putExtra(Intent.EXTRA_MIME_TYPES, mimetypes);
         }
         try {
             startActivityForResult(intent, REQUEST_SELECT_FILE);
         } catch (ActivityNotFoundException e) {
             uploadMessage = null;
             Toast.makeText(getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show();
             return false;
         }
         return true;
     }
     @Override
     public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
         result.confirm();
         return true;
     }
 }


// Retriving choosen file using onActivityResult

 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
     if (requestCode == REQUEST_SELECT_FILE) {
         AppUtils.pritLogg("got into 1");
         if (uploadMessage == null) return;
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
             uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
         }
         uploadMessage = null;
     } else if (requestCode == FILECHOOSER_RESULTCODE) {
         AppUtils.pritLogg("got into 2");
         if (null == mUploadMessage)
             return;
         // Use MainActivity.RESULT_OK if you're implementing WebView inside Fragment
         // Use RESULT_OK only if you're implementing WebView inside an Activity
         Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
         mUploadMessage.onReceiveValue(result);
         mUploadMessage = null;
     }
 }

9. Ввод HTML решает проблему со стилем в мобильном браузере Safari или веб-просмотре в приложении iOS.

Используйте свойство appearance, чтобы избежать проприетарного стиля

-moz-appearance: none;/* older firefox */
-webkit-appearance: none; /* safari, chrome, edge and ie mobile */
appearance: none; /* rest */