Эта страница переведена с помощью Cloud Translation API.

Приложения WebView для веб-разработчиков

Опубликовано: 28 февраля 2014 г.

Узнайте, как создать новый проект Android, добавить веб-представление, загрузить удаленный URL-адрес и загрузить локальную HTML-страницу.

В этом руководстве предполагается, что вы разработчик с ограниченным опытом работы в среде разработки Android или вообще без него, но имеете некоторый опыт работы с Kotlin. Если вы уже знакомы с программированием для Android, мы рекомендуем вам прочитать «Создание веб-приложений в WebView» на сайте разработчиков Android.

Установить Android-студию

В этом руководстве используется Android Studio , интегрированная среда разработки и сборки для Android.

Создайте новый проект Android.

После установки Android Studio запускается мастер установки.

Чтобы создать новый проект:

Нажмите «Новый проект» .
Щелкните шаблон «Пустое действие», чтобы выбрать его для своего проекта. Шаблоны создают структуру проекта и файлы, необходимые Android Studio для создания вашего проекта.
Нажмите «Далее» , чтобы открыть диалоговое окно «Новый проект».
Настройте свой проект. Введите имя приложения, имя пакета и целевые SDK. Затем нажмите Далее .
Установите минимально необходимый SDK для API 24: Android 7.0 (Nougat).
Нажмите «Готово».

Android Studio открывает новый проект.

Структура проекта

Первоначальный проект, созданный Android Studio, содержит шаблонный код для настройки вашего приложения. Некоторые из дополнительных папок для импорта включают в себя:

src/main/java . Исходный код Android Java.
src/main/res . Ресурсы, используемые приложением.
src/main/res/drawable . Ресурсы изображений, используемые приложением.
src/main/res/xml . Файлы макета XML, определяющие структуру компонентов пользовательского интерфейса.
src/main/res/values . Измерения, строки и другие значения, которые вы, возможно, не захотите жестко запрограммировать в своем приложении.
src/main/AndroidManifest.xml . Файл манифеста определяет, что включено в приложение, например действия, разрешения и темы.

Добавьте веб-представление

Затем добавьте WebView в макет основного действия.

Откройте файл activity_main.xml в каталоге src/main/res/xml если он еще не открыт. (Вы также можете увидеть файл fragment_main.xml . Вы можете игнорировать его, так как он не требуется для этого руководства.)
Выберите вкладку «Текст» в нижней части редактора activity_main.xml , чтобы просмотреть разметку XML.
Этот файл определяет макет вашего основного действия, а на панелях предварительного просмотра отображается предварительный просмотр действия. Макет «Пустое действие» не содержит дочерних элементов. Вам нужно будет добавить WebView.

На панели XML удалите самозакрывающуюся косую черту в конце элемента FrameLayout и добавьте элемент <WebView> и новый закрывающий тег, как показано:

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    tools:ignore="MergeRootFrame">

    <WebView
      android:id="@+id/activity_main_webview"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</FrameLayout>

Чтобы использовать WebView, вам необходимо сослаться на него в действии. Откройте исходный файл Java для основного действия MainActivity.java в каталоге src/main/java/<PackageName> .
Добавьте строки, выделенные жирным шрифтом.
```
public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
```
Существующий код метода onCreate выполняет работу по подключению Activity к макету. Добавленные строки создают новую переменную-член mWebView для ссылки на веб-представление.
Удалите следующий код:
```
if (savedInstanceState == null) {
  getSupportFragmentManager().beginTransaction()
    .add(R.id.container, new PlaceholderFragment())
    .commit();
}
```
WebView идентифицируется идентификатором ресурса, который указан в этой строке в файле макета:
```
android:id="@+id/activity_main_webview"
```
После добавления кода вы увидите несколько предупреждающих сообщений на полях редактора. Это связано с тем, что вы не импортировали нужные классы для WebView. К счастью, Android Studio может помочь вам заполнить недостающие классы. Самый простой способ сделать это — щелкнуть и навести указатель мыши на неизвестное имя класса и дождаться, пока модуль покажет «быстрое исправление» — в данном случае добавление оператора import для класса WebView .
Нажмите Alt + Enter (Option + Enter на Mac), чтобы принять быстрое исправление.
Имея в руках WebView, вы можете перейти к его настройке и загрузке интересного веб-контента.

Включить JavaScript

WebView по умолчанию не поддерживает JavaScript. Чтобы запустить веб-приложение в WebView, вам необходимо явно включить JavaScript, добавив следующие строки в метод onCreate :

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Загрузить удаленный URL-адрес

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

Откройте файл AndroidManifest.xml в каталоге src/res . Добавьте строку, выделенную жирным шрифтом, перед закрывающим тегом </manifest> .
```
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
...
 
  </application>
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>
```
Следующим шагом является вызов метода loadUrl в веб-просмотре. Добавьте следующую строку в конец метода onCreate .
```
mWebView.loadUrl("[https://beta.html5test.com/][8]");
```
Теперь попробуйте запустить проект. Если у вас нет подходящего устройства, вы можете создать эмулятор (AVD или виртуальное устройство Android), выбрав Инструменты > Android > AVD Manager .

Управление навигацией

Попробуйте изменить загружаемый URL-адрес на https://www.css-tricks.com/ и перезапустите приложение. Вы заметите что-то странное.

Если вы сейчас запустите приложение с сайтом, имеющим перенаправление, например css-tricks.com , ваше приложение в конечном итоге откроет сайт в браузере на устройстве, а не в вашем WebView — вероятно, это не то, что вы ожидали. Это связано с тем, как WebView обрабатывает события навигации.

Вот последовательность событий:

WebView пытается загрузить исходный URL-адрес с удаленного сервера и получает перенаправление на новый URL-адрес.
WebView проверяет, может ли система обработать намерение просмотра URL-адреса, если да, то система обрабатывает навигацию по URL-адресу, в противном случае WebView выполняет внутреннюю навигацию (например, если на устройстве пользователя не установлен браузер).
Система выбирает предпочтительное приложение пользователя для обработки схемы URL-адресов https:// , то есть браузер пользователя по умолчанию. Если у вас установлено более одного браузера, на этом этапе вы можете увидеть диалоговое окно.

Если вы используете WebView внутри приложения Android для отображения контента (например, страницы справки), возможно, это именно то, что вам нужно. Однако для более сложных приложений вам может потребоваться обрабатывать навигационные ссылки самостоятельно.

Для управления навигацией внутри WebView вам необходимо переопределить WebViewClient WebView, который обрабатывает различные события, генерируемые WebView. Вы можете использовать его для управления тем, как WebView обрабатывает клики по ссылкам и перенаправления страниц.

Реализация WebViewClient по умолчанию позволяет открыть любой URL-адрес в WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Это хороший шаг вперед, но что, если вы хотите обрабатывать ссылки только для своего сайта, открывая при этом другие URL-адреса в браузере?

Для этого вам необходимо расширить класс WebViewClient и реализовать метод shouldOverrideUrlLoading . Этот метод вызывается всякий раз, когда WebView пытается перейти на другой URL-адрес. Если он возвращает false, WebView сам открывает URL-адрес. (Реализация по умолчанию всегда возвращает false, поэтому она работает в предыдущем примере.)

Создайте новый класс:

Щелкните правой кнопкой мыши имя пакета вашего приложения и выберите «Создать» > «Класс Java».
Введите MyAppWebViewClient в качестве имени класса и нажмите «ОК».
В новый файл MyAppWebViewClient.java добавьте следующий код (изменения выделены жирным шрифтом):
```
public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
      return false;
    }
               
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}
```
Новый код определяет MyAppWebViewClient как подкласс WebViewClient и реализует метод shouldOverrideUrlLoading .
Метод shouldOverrideUrlLoading вызывается всякий раз, когда WebView собирается загрузить URL-адрес. Эта реализация проверяет наличие строки «css-tricks.com» в конце имени хоста URL-адреса. Если строка существует, метод возвращает false, что сообщает платформе не переопределять URL-адрес, а загружать его в WebView.
Для любого другого имени хоста метод отправляет запрос системе на открытие URL-адреса. Это делается путем создания нового намерения Android и использования его для запуска нового действия. Возврат true в конце метода предотвращает загрузку URL-адреса в WebView.
Чтобы использовать новый пользовательский WebViewClient , добавьте следующие строки в свой класс MainActivity :
```
// Stop local links and redirects from opening in browser instead of WebView
mWebView.setWebViewClient(new MyAppWebViewClient());
```
Теперь пользователь может щелкнуть любую ссылку CSS Tricks и остаться в приложении, но ссылки на внешние сайты открываются в браузере.

Обработка кнопки возврата Android

Когда вы начнете экспериментировать со статьями CSS Tricks и перемещаться по ним, нажатие кнопки «Назад» на Android приведет к выходу из приложения.

Метод WebView canGoBack сообщает вам, есть ли в стеке страниц что-либо, что можно извлечь. Чтобы обнаружить нажатие кнопки «Назад» и определить, следует ли вам вернуться к истории WebView или позволить платформе определить правильное поведение, добавьте метод onBackPressed() в свой MainActivity :

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

Загрузить HTML из файловой системы

Одним из больших преимуществ использования WebView внутри устанавливаемого приложения является то, что вы можете хранить ресурсы внутри приложения. Это позволяет вашему приложению работать в автономном режиме и сокращает время загрузки, поскольку WebView может извлекать ресурсы непосредственно из локальной файловой системы.

Чтобы хранить файлы локально, включая HTML, JavaScript и CSS, храните их в каталоге ресурсов. Это зарезервированный каталог, который Android использует для необработанных файлов. Вашему приложению необходим доступ к этому каталогу, так как ему может потребоваться свернуть или сжать определенные файлы.

Создайте каталог assets/www в основном ( src/main/assets/www ).
- Лучше всего хранить веб-файлы в подкаталоге /assets .
Примечание. При обращении к другим файлам, таким как CSS и JavaScript, в WebView работают только относительные пути. Вместо абсолютных путей, например /pages/somelink.html , используйте относительные пути, например ./pages/somelink.html .
Загрузите все файлы в каталог.

Загрузите соответствующий файл:

mWebView.loadUrl("file:///android_asset/www/index.html");

Обновите метод shouldOverrideUrlLoading , чтобы открывать браузер для нелокальных страниц:

public class MyAppWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(Uri.parse(url).getHost().length() == 0) {
      return false;
    }

    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    view.getContext().startActivity(intent);
    return true;
  }
}

Теперь вы готовы создать отличное приложение WebView.

Советы по созданию правильных визуальных эффектов см. в разделе Pixel-Perfect UI в WebView .

Если у вас возникнут проблемы, вам помогут Chrome DevTools. Чтобы начать, ознакомьтесь с разделом «Удаленная отладка на Android» .