Рутинная задача, без которой не обходится ни один проект – взаимодействие нативных приложений iOS со всемирной паутиной. В первой статье цикла разбираемся, как загружать веб-приложения в SwiftUI Views. СПОЙЛЕР: дальше будут рассмотрены более сложные темы. Обсудить

Поскольку в SwiftUI еще нет своего элемента WebView, мы будем использовать WKWebView, который прекрасно справится с загрузкой веб-приложения или сайта.

В этом цикле статей мы рассмотрим следующие темы:

1. Как сделать WebView с помощью WKWebView и протокола UIViewRepresentable в SwiftUI.
2. Загрузить веб сайт или веб-приложение в WebView.
3. Взаимодействовать между нативным iOS приложением и web-приложением через функции JavaScript.
4. Перехватывать каждый переход (навигацию) веб-сайта или веб-приложения в приложении iOS.
5. Перезагружать WebView и осуществлять переход вперед и назад.
6. Загружать локальный файл .html из iOS-проекта в WebView

Проект доступен на Github. Добавляйте его в закладки, чтобы следить за изменениями. Шаг за шагом мы будем реализовывать новую функциональность. Коммиты ответствуют заголовкам в статье, в которых приведены примеры кода.

Создаем свой WebView

Пару слов о UIViewRepresentable

Протокол UIViewRepresentable – это обертка для UIKit View, благодаря которой мы можем интегрировать любую View из UIKit.

Процесс адаптации прост и занимает четыре шага:

1. Создаем структуру которая реализует протокол UIViewRepresentable.
2. Определяем необходимые свойства для своей View и т.п.
3. В функции makeUIView() возвращаем любой UIView объект.
4. В функции updateUIView() обновляем View.

Вот и все, теперь вы можете использовать свой View в SwiftUI.

Вот небольшой скелет обертки:

         struct myView: UIViewRepresentable {      func makeUIView(context: Context) -> some UIView {         // Return the UIView object     }      func updateUIView(_ uiView: some UIView, context: Context) {         // Update the view     } }     

Также, для взаимодействия между UIKit и SwiftUI View вам может потребоваться написать класс Coordinator.

struct WebView

Создадим структуру WebView, но прежде проведем небольшую подготовку:

1. Зададим действия для определения веб-навигации (вперед, назад и перезагрузка).
2. Опишем типы загружаемых URL (локальный файл, публичный адрес).

WebViewNavigationAction.swift

         enum WebViewNavigationAction {     case backward, forward, reload }     

URLType.swift

         enum URLType {     case local, `public` }     

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

Отлично! Мы подготовились и изучили базовые моменты. Теперь давайте проверим все на примере и напишем наш WebView. WebView.swift

         import Foundation import SwiftUI import Combine import WebKit import UIKit  struct WebView: UIViewRepresentable {          var type: URLType     var url: String?          func makeUIView(context: Context) -> WKWebView {         let preferences = WKPreferences()                  let configuration = WKWebViewConfiguration()         configuration.preferences = preferences                  let webView = WKWebView(frame: CGRect.zero, configuration: configuration)                  webView.allowsBackForwardNavigationGestures = true         webView.scrollView.isScrollEnabled = true         return webView          }          func updateUIView(_ webView: WKWebView, context: Context) {         if let urlValue = url  {             if let requestUrl = URL(string: urlValue) {                 webView.load(URLRequest(url: requestUrl))             }         }     } }     

Добавим WebView в ContentView и протестируем созданный код.

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

Happy code!

Дополнительные материалы:

• Как начать разрабатывать iOS-приложения с нуля;
• 5 навыков, необходимых iOS-разработчику;
• Как начинающему iOS-разработчику успешно пройти собеседование.