Глава 1.6: Сравнительная таблица платформ

Android vs iOS: полная шпаргалка для быстрого сравнения

Глава 1.6 • Часть 1 из 8

Сравнительная таблица платформ

Эта глава — ваша шпаргалка для быстрого сравнения Android WebView и iOS WKWebView. Здесь собраны все ключевые различия в одном месте.

1 Общая сравнительная таблица

Эта таблица охватывает все ключевые аспекты работы WebView на обеих платформах. Используйте её как быстрый справочник при тестировании.

🤖 Android
🍎 iOS
Параметр Android WebView iOS WKWebView
Движок рендеринга Blink (Chromium) WebKit
Версия движка Привязана к версии Android System WebView Привязана к версии iOS
Обновляемость Через Google Play (каждые 2-4 недели) Только с обновлением iOS
Минимальная версия ОС Android 5.0 (API 21) iOS 8.0 (но тестируем iOS 14+)
Архитектура Мультипроцессная (отдельный процесс для WebView) Отдельный процесс (out-of-process)
JavaScript Engine V8 (быстрый, JIT-компиляция) Nitro (быстрый, JIT-компиляция)
Инструменты отладки Chrome DevTools (Remote USB Debugging) Safari Web Inspector (требует Mac)
JS Bridge @JavascriptInterface (Kotlin/Java) WKScriptMessageHandler (Swift)
Нативные алерты Автоматически выглядят как системные Требуют реализации через WKUIDelegate
File Upload Требует обработки onShowFileChooser Требует обработки через WKUIDelegate
Cookies Управляются через CookieManager Управляются через WKHTTPCookieStore
Кэширование Более агрессивное, управляется через WebSettings Более строгое (ITP), управляется через WKWebsiteDataStore
LocalStorage Поддерживается, очищается при удалении приложения Поддерживается, очищается при удалении приложения
Тёмная тема Автоматически через forceDark (Android 10+) Через CSS prefers-color-scheme
Safe Area Поддерживается с Android 9+ (env()) Поддерживается с iOS 11+ (env())
100vh поведение Работает корректно Включает адресную строку (используйте 100dvh)
Плавная прокрутка scroll-behavior: smooth -webkit-overflow-scrolling: touch
Backdrop filter backdrop-filter (Chrome 76+) -webkit-backdrop-filter (iOS 9+)
WebP изображения Полная поддержка Поддержка с iOS 14+
AVIF изображения Поддержка с Chrome 85+ Поддержка с iOS 16+
Видео autoplay Разрешено с muted Разрешено с muted + playsinline
Лимит памяти Зависит от устройства (обычно 1-2 ГБ) Зависит от устройства (обычно 1-2.5 ГБ)
Краш WebView Может убить приложение Может убить приложение, но есть callback
Альтернатива Chrome Custom Tabs SFSafariViewController
User-Agent Содержит Chrome/версия Содержит AppleWebKit, но не Chrome
🎯 Как использовать эту таблицу

Когда вы находите баг на одной платформе, но не на другой:

  1. Найдите параметр в таблице, который может быть связан с багом.
  2. Проверьте различия между платформами.
  3. Убедитесь, что разработчики учли эти различия в коде.
  4. Если нет — это баг реализации, а не платформы.

2 Сравнение инструментов отладки

Инструменты отладки — это ваши главные помощники при тестировании WebView. Разберём различия между Chrome DevTools и Safari Web Inspector.

🔧
Chrome DevTools
Android WebView
  • Подключение: USB + включение USB Debugging
  • Доступ: chrome://inspect в Chrome
  • Возможности:
    • Полная инспекция DOM
    • Редактирование CSS в реальном времени
    • Консоль JavaScript
    • Network Monitor
    • Performance Profiler
    • Memory Snapshot
    • Application (LocalStorage, Cookies)
    • Device Mode (эмуляция устройств)
  • Преимущества:
    • Работает на Windows, Mac, Linux
    • Очень мощный функционал
    • Можно эмулировать разные устройства
    • Есть Lighthouse для аудита
  • Недостатки:
    • Требует USB-подключения
    • Иногда нестабильное соединение
🔍
Safari Web Inspector
iOS WKWebView
  • Подключение: USB + включение Web Inspector в настройках iOS
  • Доступ: Safari → Разработка → [Устройство] → [Приложение]
  • Возможности:
    • Полная инспекция DOM
    • Редактирование CSS в реальном времени
    • Консоль JavaScript
    • Network Monitor
    • Timeline (Performance)
    • Storage (Cookies, LocalStorage)
  • Преимущества:
    • Идеально оптимизирован для WebKit
    • Показывает специфичные WebKit-свойства
    • Можно подключаться по Wi-Fi (после первой настройки)
  • Недостатки:
    • Требует Mac (критично!)
    • Менее мощный, чем Chrome DevTools
    • Нет эмуляции устройств
Функция Chrome DevTools Safari Web Inspector
Инспекция DOM ✅ Полная ✅ Полная
Редактирование CSS ✅ В реальном времени ✅ В реальном времени
Консоль JavaScript ✅ Полная ✅ Полная
Network Monitor ✅ Детальный ✅ Базовый
Performance Profiler ✅ Очень мощный ⚠️ Базовый (Timeline)
Memory Snapshot ✅ Есть ❌ Нет (используйте Instruments)
Device Emulation ✅ Есть (Device Mode) ❌ Нет
Lighthouse Audit ✅ Есть ❌ Нет
Работа без USB ⚠️ Только по Wi-Fi (сложно) ✅ По Wi-Fi (после настройки)
Поддержка ОС Windows, Mac, Linux Только Mac
⚠️ Критическое различие

Для тестирования iOS WebView вам НУЖЕН Mac! Без Mac вы не сможете отлаживать WKWebView через Safari Web Inspector. Это критическое ограничение, о котором нужно знать заранее.

Решения, если нет Mac:

  • Используйте облачный Mac (MacStadium, AWS EC2 Mac)
  • Купите б/у Mac Mini (самый дешёвый вариант)
  • Используйте виртуализацию (неофициально, может нарушать лицензию Apple)
  • Попросите коллегу с Mac помочь с отладкой
💡 Лайфхак: Remote Debugging без USB

Для Android:

  1. Включите Wi-Fi ADB: adb tcpip 5555
  2. Отключите USB
  3. Подключитесь по IP: adb connect [IP]:5555
  4. Откройте chrome://inspect

Для iOS:

  1. Подключите iPhone к Mac по USB
  2. В Safari на Mac: Разработка → Включить Wi-Fi на [Устройство]
  3. Отключите USB
  4. Теперь можно отлаживать по Wi-Fi

3 Сравнение кэширования и хранения данных

Кэширование и хранение данных — это источник множества багов. Разберём различия между платформами.

Тип данных Android WebView iOS WKWebView Особенности
Cookies Управляются через CookieManager Управляются через WKHTTPCookieStore На iOS изолированы от Safari (с iOS 11+)
LocalStorage Поддерживается, до 5-10 МБ Поддерживается, до 5-10 МБ Очищается при удалении приложения
SessionStorage Поддерживается Поддерживается Очищается при закрытии вкладки/приложения
IndexedDB Поддерживается Поддерживается Может занимать большой объём памяти
Cache API Поддерживается Поддерживается Используется для Service Workers
HTTP Cache Агрессивное кэширование Строгое кэширование (ITP) На iOS могут блокироваться tracking cookies
Очистка данных WebView.removeAllCache() WKWebsiteDataStore.removeData() Нужно очищать при выходе из аккаунта

Типичные баги кэширования:

Баг 1: Устаревший кэш после обновления веб-части
Симптом:
После обновления веб-контента пользователи видят старую версию.
Особенно часто на Android из-за агрессивного кэширования.

Решение (для разработчиков):
// Android
webView.settings.cacheMode = WebSettings.LOAD_NO_CACHE // Или LOAD_DEFAULT

// iOS
let config = WKWebViewConfiguration()
config.websiteDataStore = WKWebsiteDataStore.default()

// Для всех: добавьте версионирование в URL
<script src="app.js?v=1.2.3"></script>
<link rel="stylesheet" href="styles.css?v=1.2.3">
Баг 2: Cookies не сохраняются на iOS
Симптом:
После закрытия приложения пользователь выходит из аккаунта.
Cookies не сохраняются между сессиями.

Решение (для разработчиков):
// Убедитесь, что cookies установлены с правильными параметрами
let cookie = HTTPCookie(properties: [
    .name: "session_id",
    .value: "abc123",
    .domain: "example.com",
    .path: "/",
    .expires: Date().addingTimeInterval(86400 * 30) // 30 дней
])!

httpCookieStore.setCookie(cookie)

// Для QA: проверьте, что cookies устанавливаются с expires, а не session-only
Баг 3: LocalStorage не очищается при выходе
Симптом:
После выхода из аккаунта данные пользователя остаются в LocalStorage.
Следующий пользователь видит данные предыдущего.

Решение (для разработчиков):
// Android
webView.evaluateJavascript("localStorage.clear()")
CookieManager.getInstance().removeAllCookies(null)

// iOS
webView.evaluateJavaScript("localStorage.clear()")
WKWebsiteDataStore.default().removeData(
    ofTypes: [WKWebsiteDataTypeCookies],
    modifiedSince: Date.distantPast
)

// Для QA: всегда проверяйте очистку данных при выходе из аккаунта!
⚠️ ITP (Intelligent Tracking Prevention) на iOS

С iOS 11+ Apple внедрила ITP — систему защиты от трекинга. Это означает:

  • Tracking cookies блокируются автоматически.
  • Cookies ограничены до 7 дней, если пользователь не взаимодействует с сайтом.
  • Storage Access API требуется для доступа к cookies сторонних доменов.

Для QA: Если ваш сайт использует third-party cookies (например, для аналитики или рекламы), они могут не работать на iOS. Это не баг — это фича ITP.

💡 Как проверить кэш и cookies

В Chrome DevTools:

  1. Откройте вкладку Application
  2. Раздел Storage → Cookies, Local Storage, Session Storage
  3. Можете просматривать, редактировать и удалять данные

В Safari Web Inspector:

  1. Откройте вкладку Storage
  2. Раздел Cookies, Local Storage
  3. Можете просматривать и удалять данные

4 Сравнение производительности и ограничений

Производительность — это критический аспект WebView. Разберём различия в лимитах и оптимизациях.

Параметр Android WebView iOS WKWebView
Лимит памяти Зависит от устройства (обычно 1-2 ГБ) Зависит от устройства (обычно 1-2.5 ГБ)
Максимальный размер DOM Не ограничен явно, но влияет на память Не ограничен явно, но влияет на память
Максимальный размер изображения Зависит от памяти (обычно до 4K) Зависит от памяти (обычно до 4K)
Максимальная длина URL ~2000 символов ~2000 символов
Максимальный размер LocalStorage 5-10 МБ 5-10 МБ
Максимальный размер IndexedDB Не ограничен (зависит от свободного места) Не ограничен (зависит от свободного места)
Количество одновременных HTTP-запросов 6 на домен (стандарт HTTP/1.1) 6 на домен (стандарт HTTP/1.1)
Максимальное количество WebSocket Не ограничен явно Не ограничен явно
Поддержка Web Workers ✅ Полная ✅ Полная
Поддержка Service Workers ✅ Полная ✅ Полная (с iOS 11.3+)
Поддержка WebAssembly ✅ Полная ✅ Полная (с iOS 11+)
Hardware Acceleration ✅ Включено по умолчанию ✅ Включено по умолчанию
GPU Rasterization ✅ Поддерживается ✅ Поддерживается

Типичные проблемы производительности:

Проблема 1: Утечки памяти
Симптом:
Приложение начинает тормозить и крашиться после длительного использования.
Особенно заметно на устройствах с малым объёмом RAM.

Решение (для разработчиков):
// Android
override fun onPause() {
    webView?.onPause() // Приостанавливает JavaScript
    webView?.pauseTimers() // Приостанавливает таймеры
}

override fun onDestroy() {
    webView?.destroy() // Освобождает ресурсы
    super.onDestroy()
}

// iOS
override func viewWillDisappear(_ animated: Bool) {
    webView.stopLoading() // Останавливает загрузку
}

deinit {
    webView.configuration.userContentController.removeScriptMessageHandler(forName: "handler")
}

// Для QA: тестируйте многократное открытие/закрытие WebView (50+ раз)
Проблема 2: Долгая загрузка
Симптом:
WebView загружается дольше 3 секунд.
Пользователь видит белый экран.

Решение (для разработчиков):
// 1. Используйте нативный splash screen
// 2. Предзагружайте WebView в фоне
// Android
val webView = WebView(context)
webView.loadUrl("https://example.com") // Предзагрузка

// 3. Оптимизируйте веб-контент
// - Минифицируйте CSS/JS
// - Используйте lazy loading для изображений
// - Сжимайте ресурсы (gzip/brotli)

// Для QA: измеряйте Time to Interactive (TTI) на разных устройствах
Проблема 3: Краш при загрузке больших изображений
Симптом:
WKWebView крашится без ошибки при загрузке изображений > 10 МБ.
Особенно на старых iPhone.

Решение (для разработчиков):
// 1. Используйте WebP/AVIF вместо PNG/JPEG
// 2. Сжимайте изображения до разумных размеров
// 3. Используйте lazy loading
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

// 4. Для iOS: проверяйте размер изображения перед загрузкой
// В нативном коде можно отследить использование памяти

// Для QA: тестируйте загрузку больших изображений на старых устройствах
⚠️ Критическое различие: краш WebView

Android: Если WebView крашится, приложение тоже может крашиться. Нет встроенного механизма восстановления.

iOS: Если WKWebView крашится, вызывается метод webViewWebContentProcessDidTerminate. Разработчики могут перезагрузить страницу автоматически.

Для QA: Проверяйте, как приложение ведёт себя после краша WebView. Должно ли оно перезагружать страницу или показывать ошибку?

💡 Инструменты для измерения производительности

Для Android:

  • Chrome DevTools → Performance: Запись и анализ производительности
  • Android Studio Profiler: Мониторинг памяти, CPU, сети
  • WebView Metrics API: Программное измерение времени загрузки

Для iOS:

  • Safari Web Inspector → Timeline: Запись и анализ производительности
  • Xcode Instruments: Time Profiler, Allocations, Energy Log
  • WKNavigationDelegate: Отслеживание этапов загрузки
🎯 Чек-лист для тестирования производительности
  • ✅ Измерьте Time to Interactive (TTI) на разных устройствах
  • ✅ Проверьте потребление памяти при длительной работе (30+ минут)
  • ✅ Протестируйте многократное открытие/закрытие WebView (50+ раз)
  • ✅ Проверьте потребление батареи при фоновой работе
  • ✅ Протестируйте на устройствах с малым объёмом RAM (1-2 ГБ)
  • ✅ Проверьте производительность при плохой сети (3G, Edge)
  • ✅ Измерьте время отклика на действия пользователя (клик, скролл)