Настройка WKWebView в iOS

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

Отображение веб-содержимого

Начнем с самого простого: показа веб-контента. Объяснять особо нечего.

Отладка с WKWebView

Мы можем отлаживать наши проекты iOS с помощью Safari. Откройте Safari и нажмите ⌘ +, чтобы открыть «Настройки», на вкладке «Дополнительно» установите флажок «Показывать меню разработки в строке меню».

Пока у нас не будет сборки проекта, мы не сможем использовать отладчик Safari. Отладчик находится в разделе «Разработка» → «Ваш симулятор или устройство».

Изменение WebView с помощью Javascript

Здесь я создам кнопку и метку с помощью javascript, а также применю к ним некоторый CSS.

Отлаживая с помощью Safari, я нашел нужный <div id="main">.

Мы можем внедрить код javascript, используя простую строку или включив ее из отдельного файла js (script.js в моей демонстрации). Когда у нас есть код javascript, мы передаем его WKUserScript, а затем переносим в WKUserContentController, а затем, наконец ,WKWebViewConfiguration для инициализации WKWebView.

Слушайте события javascript и отвечайте на них

Мы можем прослушивать события javascript, добавляя обработчики сообщений сценария в WKUserContentController. и соответствующий протоколу WKScriptMessageHandler.

Наконец, мы используем evaluateJavaScript(_ :, completionHandler:), чтобы отправить наш ответ javascript обратно. Ура

Использование локального HTML

В самом деле, мы также можем использовать локальный HTML для рендеринга WebView, как показано ниже:

if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
    webView.load(URLRequest(url: url))
}

let html = "<h1>WebView</h1>"
webView.loadHTMLString(html, baseURL: nil)

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

Исходный код

Вы можете найти полный проект здесь. Кроме того, тот, который использует локальный html, находится в ветке localHTML.