Как запустить нативный код из WKWebView

Знаете ли вы, что iOS-приложениt Википедия имеет открытый исходный код и он доступен для всех, кому интересно узнать о его внутреннем устройстве?

Несколько недель назад я решил потратить 2 часа на изучение этой кодовой базы, потому что у меня было чувство, что я могу узнать что-то ценное.

Я рад сообщить, что действительно узнал кое-что очень интересное, и именно этим я хочу поделиться с вами в этой статье.

Когда вы изучаете такую огромную кодовую базу, вам нужно сосредоточиться на чем-то конкретном, иначе вы просто пройдете по поверхности.

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

Как видите, этот экран позволяет пользователю прочитать все содержимое статьи и взаимодействовать с ним:

• нажатие на ссылку на другую статью вызывает навигацию
• нажатие на изображение модально отображает новый экран
• при нажатии на сноску отображается ее подробное описание и обновляется панель навигации

На первый взгляд мне показалось, что этот экран был реализован либо с помощью одного UITextView, либо с помощью UICollectionView, содержащего несколько UILabel.

Но когда я воспользовался инструментом отладки Xcode для захвата иерархии представлений, я был очень удивлен, увидев, что на самом деле она была реализована с помощью WKWebView!

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

Поэтому видеть, как веб-представление используется для реализации основной функции популярного приложения, было довольно неожиданно и тревожно!

Но если подумать, то этот выбор имеет большой смысл: Википедия — это, прежде всего, веб-сайт, и его содержимое было создано для отображения с помощью HTML и CSS.

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

Однако это не объясняет одного: каким образом это веб-представление способно вызывать нативную навигацию в ответ на взаимодействие с пользователем?

На самом деле это реализовано с помощью очень мощного, но не очень известного API, представленного Apple в iOS 8 и называемого WKScriptMessageHandler.

Этот API позволяет предоставить JavaScript-коду, выполняющемуся внутри веб-представления, специальную функцию, которая, будучи вызванной, запустит нативный код в приложении, в которое встроено это веб-представление.

Вот как это работает:

1. Приложение создает бридж для получения сообщений от веб-представления

2. Пользователь нажимает на ссылку в web view

3. JavaScript-код в веб-представлении вызывает функцию webkit.messageHandlers.bridge.postMessage(message)

4. Веб-представление пересылает сообщение своему контроллеру userContentController

5. Контроллер userContentController анализирует содержимое сообщения

6. Выполняется нативный код для выполнения действия, соответствующего тому, как пользователь взаимодействовал с приложением

А вот как нажатие на ссылку в веб-представлении приводит к появлению нового View Controller в стеке навигации 🙌.

Чтобы быть на 100% корректным, также выполняется некоторый дополнительный код, чтобы предотвратить загрузку новой страницы самим веб-представлением:

Видите ли, я определенно не врал, когда утверждал, что вы можете научиться некоторым действительно крутым трюкам, просто потратив пару часов на изучение открытой базы кода популярного приложения для iOS!

Так что если у вас есть время, я бы очень рекомендовал вам попробовать и начать изучать открытую базу кода: Я уверен, что по пути вы узнаете что-то полезное.

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

Источник