itelenkov 03 апреля 2021

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

Рутинная задача, без которой не обходится ни один проект – взаимодействие нативных приложений 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!

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

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

Data Scientist
Москва, по итогам собеседования
Data Engineer
по итогам собеседования
Разработчик Маталгоритмов C#
по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

Microsoft