Дает вашим пользователям плавный переход между веб-представлениями и нативными представлениями.

При работе над гибридным мобильным приложением чрезвычайно важно обеспечить плавный переход пользователей между веб-представлениями и нативными представлениями. Один очень распространенный метод, который мы можем использовать для предоставления такого рода опыта, — это перехват WKWebView действий навигации.

В этой статье я хотел бы показать вам, как вы можете перехватить WKWebView действия навигации, чтобы вызвать настраиваемые действия по вашему выбору. Вот пример приложения, демонстрирующий, что вы узнаете из этой статьи:

Хотели узнать больше? Читай дальше!

Пример приложения

Как видно из анимированного GIF-файла, пример приложения представляет собой простое веб-представление, отображающее статическую HTML-страницу. Когда пользователь нажимает на гиперссылку «Представить желтый экран», приложение отображает контроллер представления с желтым фоном.

В то время как при нажатии гиперссылки «Push Red Screen» приложение поместит контроллер представления красного цвета в стек навигации.

Ниже приведен HTML-код, отображаемый в веб-представлении:

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

Примечание:

Если вы хотите узнать, как стилизовать статический HTML в веб-представлении с помощью внедрения CSS, чтобы он соответствовал теме дизайна вашего приложения, ознакомьтесь с моей статьей «Внедрение JavaScript в веб-представление в iOS».

Понимание формата URL

Чтобы наш пример приложения мог определить, какая гиперссылка нажимается пользователями, мы должны определить URL-адрес с пользовательским форматированием, который содержит следующую информацию:

  • Тип действия — действие, которое должен выполнять наш пример приложения, когда пользователь нажимает на гиперссылки. В нашем случае мы будем использовать navigate для обозначения действия навигации.
  • Тип перехода — тип используемого перехода экрана, в основном present или push.
  • Значение RGB — Цвет фона отображаемого экрана.

Для нашего примера приложения мы будем использовать следующий формат:

<action_type>://<transition_type>?<rgb_value>

Вот пример URL-адреса, который представляет действие навигации, представляющее контроллер представления с желтым фоном.

navigate://present?r=255&g=255&b=0

Примечание:

Приведенный выше формат URL-адреса разработан специально для примера приложения. Поэтому не стесняйтесь изменять форматирование и параметры URL-адреса в зависимости от ваших потребностей.

Имея это в виду, теперь мы можем определить 2 перечисления для представления типа действия и типа перехода:

Мы будем использовать оба этих перечисления в следующем разделе.

Перехват действия навигации WKWebView

Способ взлома действия навигации WKWebView довольно прост. Мы можем использовать следующий метод делегата WKWebView:

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

Примечание:

Если метод делегата не срабатывает, убедитесь, что вы импортировали модуль WebKit, а также установили контроллер представления в качестве делегата веб-представления.

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

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Completion handler passed to -[SwiftSenpaiDemo.HijackViewController webView:decidePolicyForNavigationAction:decisionHandler:] was not called'

В методе делегата мы сначала убеждаемся, что действие навигации запускается гиперссылкой. После этого мы извлечем URL-адрес гиперссылки из действия навигации.

После получения URL-адреса мы сначала извлекаем тип действия из URL-адреса и проверяем, является ли он .navigate. Если это не .navigate, мы загрузим URL как обычно.

Убедившись, что тип навигации — .navigate, мы можем приступить к извлечению типа перехода и значения RGB из URL-адреса следующим образом:

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

Вот и все! Теперь вы можете запустить пример кода, чтобы увидеть все в действии! Если у вас возникнут трудности с выполнением приведенного выше примера кода, не стесняйтесь получить полный образец кода здесь.

Подведение итогов

Я надеюсь, что эта статья даст вам хорошее представление о том, как плавно переходить между веб-представлениями и нативными представлениями. Если вам понравилась эта статья, вы можете прочитать мою предыдущую статью «Внедрение JavaScript в веб-представление в iOS».

Спасибо за прочтение.

Want to Connect?
Feel free to follow me on Twitter so that you won’t miss out on any of my upcoming iOS development-related articles.