Глава 1.5: iOS WKWebView: Особенности и ограничения

import WebKit

class WebViewController: UIViewController {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Создаём конфигурацию
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true
        config.mediaTypesRequiringUserActionForPlayback = []
        
        // Настройки предпочтений
        config.preferences.javaScriptEnabled = true
        config.preferences.javaScriptCanOpenWindowsAutomatically = true
        
        // Создаём WebView
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        webView.navigationDelegate = self
        webView.uiDelegate = self
        
        view.addSubview(webView)
        
        // Загружаем URL
        if let url = URL(string: "https://example.com") {
            webView.load(URLRequest(url: url))
        }
    }
}

// Делегаты для обработки событий
extension WebViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("Страница загружена")
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("Ошибка загрузки: \(error.localizedDescription)")
    }
}

extension WebViewController: WKUIDelegate {
    // Обработка JavaScript alert/confirm/prompt
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler()
        })
        present(alert, animated: true)
    }
}

extension WebViewController: WKNavigationDelegate {
    // Обработка краша веб-контента
    func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
        print("WKWebView крашнулся!")
        
        // Перезагружаем страницу
        webView.reload()
        
        // Или показываем ошибку пользователю
        showErrorAlert(message: "Произошла ошибка. Попробуйте обновить страницу.")
    }
    
    // Обработка краша процесса
    func webView(_ webView: WKWebView, didTerminateWithError error: Error) {
        print("Ошибка процесса WKWebView: \(error.localizedDescription)")
        // Логируем ошибку и уведомляем аналитику
    }
}

WKWebView крашится без ошибки при загрузке больших страниц или изображений.
Особенно заметно на устройствах с малым объёмом RAM (iPhone SE, старые iPad).

Лимиты памяти (примерные):
- iPhone с 2 ГБ RAM: ~1.2 ГБ для WKWebView
- iPhone с 3 ГБ RAM: ~1.8 ГБ для WKWebView
- iPhone с 4+ ГБ RAM: ~2.5 ГБ для WKWebView
- iPad: зависит от модели

// 1. Оптимизируйте изображения
// Используйте WebP/AVIF вместо PNG/JPEG
// Сжимайте изображения до разумных размеров

// 2. Ленивая загрузка (Lazy Loading)
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

// 3. Виртуализация списков
// Используйте библиотеки типа react-window или vue-virtual-scroller

// 4. Мониторинг памяти в нативном коде
func checkMemoryUsage() {
    var info = mach_task_basic_info()
    var count = mach_msg_type_number_t(MemoryLayout<mach_task_basic_info>.size) / 4
    
    let kerr: kern_return_t = withUnsafeMutablePointer(to: &info) {
        $0.withMemoryRebound(to: integer_t.self, capacity: Int(count)) {
            task_info(mach_task_self_, task_flavor_t(MACH_TASK_BASIC_INFO), $0, &count)
        }
    }
    
    if kerr == KERN_SUCCESS {
        let memoryMB = Double(info.resident_size) / 1024.0 / 1024.0
        print("Использование памяти: \(memoryMB) MB")
        
        if memoryMB > 1000 { // Предупреждение при 1 ГБ
            print("⚠️ Высокое потребление памяти!")
        }
    }
}

Нельзя загрузить локальный HTML-файл напрямую через file:// URL.
WKWebView блокирует такие запросы из соображений безопасности.

// ❌ Плохо: не работает в WKWebView
let url = URL(fileURLWithPath: Bundle.main.path(forResource: "index", ofType: "html")!)
webView.load(URLRequest(url: url))

// ✅ Хорошо: используем loadFileURL
let url = Bundle.main.url(forResource: "index", withExtension: "html")!
let directoryURL = url.deletingLastPathComponent()
webView.loadFileURL(url, allowingReadAccessTo: directoryURL)

// ✅ Альтернатива: загрузка через data: URL
let htmlString = "<html><body>Hello</body></html>"
webView.loadHTMLString(htmlString, baseURL: nil)

Cookies не сохраняются между сессиями.
Cookies из Safari не доступны в WKWebView (с iOS 11+).
Трacking cookies блокируются автоматически.

// Настройка хранилища cookies
let config = WKWebViewConfiguration()
config.websiteDataStore = WKWebsiteDataStore.default()

// Ручное управление cookies
let httpCookieStore = config.websiteDataStore.httpCookieStore

// Установка cookie
let cookie = HTTPCookie(properties: [
    .name: "session_id",
    .value: "abc123",
    .domain: "example.com",
    .path: "/",
    .expires: Date().addingTimeInterval(86400) // 1 день
])!

httpCookieStore.setCookie(cookie) {
    print("Cookie установлен")
}

// Получение всех cookies
httpCookieStore.getAllCookies { cookies in
    for cookie in cookies {
        print("\(cookie.name): \(cookie.value)")
    }
}

// Очистка cookies
let dataTypes = WKWebsiteDataStore.allWebsiteDataTypes()
WKWebsiteDataStore.default().removeData(ofTypes: dataTypes, modifiedSince: Date.distantPast) {
    print("Все данные очищены")
}

Видео и аудио не воспроизводятся автоматически без взаимодействия пользователя.
Это ограничение iOS для экономии батареи и трафика.

// В нативном коде (Swift)
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
config.mediaTypesRequiringUserActionForPlayback = [] // Разрешаем автовоспроизведение

// В HTML
<video autoplay muted playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

// Важно: видео должно быть muted для автовоспроизведения!
// Или пользователь должен взаимодействовать со страницей (клик, тап)

JavaScript alert(), confirm(), prompt() не работают по умолчанию.
Нужно реализовать их нативно через WKUIDelegate.

extension WebViewController: WKUIDelegate {
    // JavaScript alert
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler()
        })
        present(alert, animated: true)
    }
    
    // JavaScript confirm
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in
            completionHandler(false)
        })
        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler(true)
        })
        present(alert, animated: true)
    }
    
    // JavaScript prompt
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        let alert = UIAlertController(title: nil, message: prompt, preferredStyle: .alert)
        alert.addTextField { textField in
            textField.text = defaultText
        }
        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in
            completionHandler(nil)
        })
        alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler(alert.textFields?.first?.text)
        })
        present(alert, animated: true)
    }
}

import SafariServices

class ViewController: UIViewController {
    func openURL() {
        guard let url = URL(string: "https://example.com") else { return }
        
        let safariVC = SFSafariViewController(url: url)
        
        // Настройка цвета тулбара
        safariVC.preferredBarTintColor = .systemBlue
        safariVC.preferredControlTintColor = .white
        
        // Показывать кнопку "Готово"
        safariVC.dismissButtonStyle = .done
        
        present(safariVC, animated: true)
    }
}

// Делегат для обработки событий
extension ViewController: SFSafariViewControllerDelegate {
    func safariViewControllerDidFinish(_ controller: SFSafariViewController) {
        print("Safari закрыт")
    }
    
    func safariViewController(_ controller: SFSafariViewController, didCompleteInitialLoad didLoadSuccessfully: Bool) {
        if didLoadSuccessfully {
            print("Страница загружена")
        } else {
            print("Ошибка загрузки")
        }
    }
}

На iOS 100vh включает адресную строку Safari, что приводит к обрезке контента.
Особенно заметно при использовании position: fixed или height: 100vh.

/* ❌ Плохо: на iOS контент обрежется */
.fullscreen {
  height: 100vh;
}

/* ✅ Хорошо: используем dvh (dynamic viewport height) */
.fullscreen {
  height: 100dvh; /* iOS 15.4+ */
}

/* ✅ Альтернатива: JS-решение для старых iOS */
.fullscreen {
  height: calc(var(--vh, 1vh) * 100);
}

<script>
  // Устанавливаем CSS-переменную
  function setVH() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
  
  setVH();
  window.addEventListener('resize', setVH);
  window.addEventListener('orientationchange', setVH);
</script>

При открытии клавиатуры фиксированные элементы (footer, кнопки) могут "уезжать" или скрываться.
Особенно заметно на iPhone с физической кнопкой Home.

/* Используем flexbox вместо fixed */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.footer {
  flex-shrink: 0; /* Не сжимается */
}

/* Или используем sticky position */
.footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

На iOS input type="file" открывает стандартный file picker, но:
- Нельзя выбрать несколько файлов (без accept="multiple")
- Ограниченный доступ к файловой системе
- Нет доступа к Camera Roll без разрешения

<!-- Разрешаем выбор нескольких файлов -->
<input type="file" accept="image/*" multiple>

<!-- Разрешаем доступ к камере -->
<input type="file" accept="image/*" capture="camera">

<!-- В нативном коде (Swift) нужно обработать UIDelegate -->
func webView(_ webView: WKWebView, runOpenPanelWith parameters: WKOpenPanelParameters, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping ([URL]?) -> Void) {
    let picker = UIImagePickerController()
    picker.delegate = self
    picker.sourceType = .photoLibrary
    picker.allowsEditing = false
    
    // Сохраняем completionHandler для später использования
    self.filePickerCompletionHandler = completionHandler
    
    present(picker, animated: true)
}

// В UIImagePickerControllerDelegate
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    if let url = info[.imageURL] as? URL {
        filePickerCompletionHandler?([url])
    }
    picker.dismiss(animated: true)
}

На iOS скролл внутри контейнера может быть "дёрганым" или "застревать".
Особенно заметно при использовании overflow: auto без -webkit-overflow-scrolling.

/* ✅ Хорошо: плавная прокрутка с инерцией */
.scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Включает инерцию */
}

/* Для iOS 13+ можно использовать scroll-behavior */
.scrollable {
  scroll-behavior: smooth;
}

/* Избегайте вложенных скроллов */
/* ❌ Плохо: скролл внутри скролла */
.outer {
  overflow-y: auto;
}
.inner {
  overflow-y: auto;
}

/* ✅ Хорошо: один уровень скролла */
.outer {
  overflow-y: auto;
}
.inner {
  overflow-y: visible;
}

Видео не воспроизводится автоматически без взаимодействия пользователя.
Это ограничение iOS для экономии батареи и трафика.

<!-- Видео должно быть muted для автовоспроизведения -->
<video autoplay muted playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- В нативном коде (Swift) -->
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
config.mediaTypesRequiringUserActionForPlayback = [] // Разрешаем автовоспроизведение

// Или используйте JavaScript для запуска после взаимодействия
<button onclick="playVideo()">Play</button>
<video id="myVideo">
  <source src="video.mp4" type="video/mp4">
</video>

<script>
  function playVideo() {
    const video = document.getElementById('myVideo');
    video.play();
  }
</script>

Элементы с position: fixed и transform: translateZ(0) могут "прыгать" при скролле.
Особенно заметно на старых версиях iOS (10-12).

/* ❌ Плохо: может прыгать */
.fixed-element {
  position: fixed;
  transform: translateZ(0);
}

/* ✅ Хорошо: используем sticky */
.sticky-element {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Или избегайте transform на fixed элементах */
.fixed-element {
  position: fixed;
  /* Не используйте transform */
}