🍏 Взаимодействие SwiftUI с вебом. Часть первая: WebView

Хочешь уверенно проходить IT-интервью?

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

• Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
• Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
• Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy

Поскольку в 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 (локальный файл, публичный адрес).

        enum WebViewNavigationAction {
    case backward, forward, reload
}
    

        enum URLType {
    case local, `public`
}
    

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

        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 и напишем несложный интерфейс для веб-навигации, а в третьей части разберемся с JavaScript.

Happy code!

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

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