Гибридное приложение Яндекс.Авиабилетов

В ноябре 2016 вышло обновление приложения Яндекс.Авиабилеты для iOS, в котором часть экранов была заменена на веб-страницы. С тех пор мы успели выпустить гибридную версию для Android, наладили выкатку новых вебовых фич и, конечно, знатно прошлись по граблям.

Мы с моим коллегой Андреем Легчилиным расскажем, какие задачи стояли перед нами при переходе на гибридное приложение и насколько нам удалось их достичь. Поговорим про особенности реализации гибридных приложений под iOS и Android. Обязательно остановимся на изменениях в процессах: поправки пришлось внести в релизный цикл и тестирование.

Transcript

2. Гибридное приложение Яндекс.Авиабилетов Полгода после релиза
3. avia.yandex.ru 3
4. avia.yandex.ru 4 iOS Android
5. 5 iOS Android
6. Разработчики Mobile Web 50 % 50 % 6 iOS Android
7. Архитектура сервиса 7 Ticket Daemon Web Backend Mobile API SERP Desktop Mobile iOS Android Partner
8. › Дублирование кода › … а значит, и багов › Низкий bus-factor › Различия в реализации › Неравномерное развитие Проблемы 8
9. Скорость и стоимость увеличить уменьшить
10. React Native › Нативный интерфейс, логика на React Cordova › Нативная оболочка, приложение на HTML + CSS + JavaScript Гибрид › Замена части экранов на web-view Пути решения 10
11. Архитектура сервиса 11 Ticket Daemon Web Backend Mobile API SERP Desktop Mobile iOS Android Partner
12. Архитектура сервиса 12 Ticket Daemon Web Backend SERP Desktop Mobile iOS Android Partner
13. Web Backend
14. › вёрстка для гибридного приложения › общение приложения с веб-сайтом › обратная совместимость Адаптация веб-сайта под приложение 14
15. Создание запроса 15 var url = URLComponents(string: "https:!//avia.yandex.ru/")! url.queryItems = [ URLQueryItem(name: "fromName", "Екатеринбург"), URLQueryItem(name: "toName", value: "Симферополь"), URLQueryItem(name: "when", value: "2017-05-01"), ] let request = URLRequest(url: url.url) !// malkovich malkovich let webView = WKWebView() webView.load(request)
16. Небольшие отличия 16
17. Идентификатор платформы передаётся
 в кастомном HTTP-заголовке Handshake 17 var request = URLRequest(url: requestURL) request.addValue("ios", forHTTPHeaderField: "X-Platform") webView.load(request)
18. 18 const platforms = { ios: 'ios', android: 'android', wp: 'wp', } module.exports = (req, res, next) !-> { const name = req.headers['x-platform'] const platform = platforms[name] !|| 'web' res.cookie('platform', platform) next() }
19. Условия в шаблонах 19 bt.match('search-form', ctx !-> { ctx.setContent([ !platform.isWeb() !&& { elem: 'action-back' }, { elem: 'info' }, platform.isWeb() ? { elem: 'action-setting' } : { elem: 'action-share' } ]) })
20. Обработка событий 20
21. › Приложение принимает решение на основе URL › Не требует изменений в коде веб-сайта › Добавляет неявную связь между сайтом и приложением Перехват события навигации 21
22. Приложение принимает решение на основе URL Перехват события навигации 22 <a class="y-button" href="/search/?fromName=Москва&when=2017-04-18"> Купить !</a>
23. Приложение принимает решение на основе URL Перехват события навигации 23 <a class="y-button" href="/search/?fromName=Москва&when=2017-04-18"> Купить !</a>
24. В приложении описываются методы, которые может использовать JavaScript веб-сайта Декларация интерфейса 24 this._liveBind(‘click', (event, data) !-> { coordinator.doAction('showPartnerRedirect', { offer: data.offer, redirectUrl: data.redirectUrl, }) })
25. В приложении описываются методы, которые может использовать JavaScript веб-сайта Декларация интерфейса 25 this._liveBind(‘click', (event, data) !-> { coordinator.doAction('showPartnerRedirect', { offer: data.offer, redirectUrl: data.redirectUrl, }) })
26. 26 class Coordinator { doAction(name, payload) { switch (platform) { case 'ios': return iosInterface.handle(name, payload) case 'android': return androidInterface[name](payload) default: return this.propagateEvent(name, payload) } } })
27. 27 class Coordinator { doAction(name, payload) { switch (platform) { case 'ios': return iosInterface.handle(name, payload) case 'android': return androidInterface[name](payload) default: return this.propagateEvent(name, payload) } } })
28. Добавление функции 28
29. Сервер принимает решение:
 отдать вёрстку либо ответить ошибкой. Версионирование 29 var request = URLRequest(url: requestURL) request.addValue("ios", forHTTPHeaderField: «X-Platform") request.addValue("1.14", forHTTPHeaderField: "X-Version")
30. iOS
31. › выбор компонента WebView (WKWebView, UIWebView) › обработка событий (WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate) › Apple Transport Security Гибридизация iOS-приложения 31
32. WKWebView
33. › Apple рекомендует › Новый JS-движок Nitro WKWebView 33
34. › Apple рекомендует › Новый JS-движок Nitro › Не работает с Interface Builder › Работает в отдельном процессе › Выпущен недоделанным WKWebView 34
35. Обработка событий
36. Перехват события навигации 36 extension SearchViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) !-> Void) { if isAviaDomain(navigationAction.request.url!) { decisionHandler(.allow) } else { decisionHandler(.cancel) openURLInBrowser(navigationAction.request.url!) }}}}
37. Перехват события навигации 37 extension SearchViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) !-> Void) { if isAviaDomain(navigationAction.request.url!) { decisionHandler(.allow) } else { decisionHandler(.cancel) openURLInBrowser(navigationAction.request.url!) }}}}
38. target="_blank" 38 extension SearchViewController: WKUIDelegate { func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) !-> WKWebView? { if navigationAction.targetFrame !== nil { webView.load(navigationAction.request) } return nil } }
39. target="_blank" 39 extension SearchViewController: WKUIDelegate { func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) !-> WKWebView? { if navigationAction.targetFrame !== nil { webView.load(navigationAction.request) } return nil } }
40. Декларация интерфейса 40 final class ScriptMessageHandler: WKScriptMessageHandler { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if let payload = message.body as? ["String": Any] { delegate!?.recieveMessage(withPayload: payload) } } }
41. Декларация интерфейса 41 final class ScriptMessageHandler: WKScriptMessageHandler { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if let payload = message.body as? ["String": Any] { delegate!?.recieveMessage(withPayload: payload) } } }
42. 42 !// iOS let scriptMessageHandler = ScriptMessageHandler() let userContentController = WKUserContentController() userContentController.add(scriptMessageHandler, name: "notification") let configuration = WKWebViewConfiguration() configuration.userContentController = userContentController let webView = WKWebView(configuration: configuration) !// Browser (JavaScript) class iosDelegate { handle(name, payload) { const sender = window.webkit.messageHandlers["notification"] sender.postMessage({ name, payload }) } }
43. 43 !// iOS let scriptMessageHandler = ScriptMessageHandler() let userContentController = WKUserContentController() userContentController.add(scriptMessageHandler, name: "notification") let configuration = WKWebViewConfiguration() configuration.userContentController = userContentController let webView = WKWebView(configuration: configuration) !// Browser (JavaScript) class iosDelegate { handle(name, payload) { const sender = window.webkit.messageHandlers["notification"] sender.postMessage({ name, payload }) } }
44. App Transport Security
45. HTTPS в браузере 45 HTTPS HTTP ???
46. NSURLErrorSecureConnectionFailed HTTPS-ish? 46
47. 47 func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) { let nsError = error as NSError if #available(iOS 9.0, *) { let sslErrorCodes = [ NSURLErrorAppTransportSecurityRequiresSecureConnection, NSURLErrorSecureConnectionFailed, ] if sslErrorCodes.contains(nsError.code) { let url = nsError.userInfo["NSErrorFailingURLKey"] as! URL self.openURLInBrowser(url) } }
48. 48 func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) { let nsError = error as NSError if #available(iOS 9.0, *) { let sslErrorCodes = [ NSURLErrorAppTransportSecurityRequiresSecureConnection, NSURLErrorSecureConnectionFailed, ] if sslErrorCodes.contains(nsError.code) { let url = nsError.userInfo["NSErrorFailingURLKey"] as! URL self.openURLInBrowser(url) } }
49. Android
50. › обработка событий (JSInterface) › разделение на несколько сборок › поэтапная выкатка Гибридизация Android-приложения 50
51. Передача данных из веба в приложение 51 !// Android
 webview.addJavascriptInterface(
 JSInterface(),
 "MyInterface"
 )
 
 !// Website
 MyInterface.addToFavorites(JSON.stringify({
 flight: 'S7 01'
 }))
52. 52 inner class JSInterface {
 @JavascriptInterface
 fun addToFavorites(json: String) {
 onAddToFavorites(json)
 }
 
 @JavascriptInterface
 fun removeFromFavorites(json: String) {
 onRemoveFromFavorites(json)
 }
 }
53. Фрагментация
54. Поддержка JS API По данным caiuse.com 54 Android 4.3 Android 4.4 Android 4.4.4 Chrome 53 0 % 25 % 50 % 75 % 100 % Да Частично Нет
55. Crosswalk
56. Поддержка JS API По данным caiuse.com 56 Android 4.3/w Crosswalk Android 4.4/w Crosswalk Android 4.4.4/w Crosswalk Chrome 53 0 % 25 % 50 % 75 % 100 % Да Частично Нет
57. Последний коммит в crosswalk 57
58. Размер приложения 58 8.74 Mb 53.66 Mb Crosswalk
59. Crosswalk lite 59 › Весит примерно ~10MB
60. Crosswalk lite 60 › Собран с оптимизацией для снижения размера › Весит примерно ~10MB
61. Crosswalk lite 61 › Весит примерно ~10MB › Собран с оптимизацией для снижения размера › Отключены: WebRTC, WebP, Web Video, Web Audio, Web Bluetooth, Web Notifications, …
62. Crosswalk lite 62 › Сжат с применением LZMA › Собран с оптимизацией для снижения размера › Отключены: WebRTC, WebP, Web Video, Web Audio, Web Bluetooth, Web Notifications, … › Весит примерно ~10MB
63. Несколько apk – это просто 63 !// build.gradle productFlavors { api16_armv7 { !!... } api16_x86 { !!... } api21 { !!... } }
64. 64 api16_armv7 { !// Chromium должен собираться на 23-й версии
 targetSdkVersion 23
 compileSdkVersion 23
 buildToolsVersion "23.0.3"
 
 minSdkVersion 16
 
 versionCode defaultConfig.versionCode + 2
 
 ndk {
 abiFilters "armeabi-v7a", ""
 }
 }
65. Результат 65 API21 (ARM&x86) 6,92 МБ (83.2%) API16+ (x86) 34,03 МБ (0.7%) API16+ (ARM) 30,24 МБ (16.1%) Crosswalk x86 binary ARM binary
66. Рейтинг приложения Android, данные из Google Developer Console 66
67. Параллельная выкладка 0 % 25 % 50 % 75 % 100 % дни 1 2 3 4 API21 API16x86 API16ARM 67
68. 0 % 100 % 200 % 300 % дни 1 2 3 4 5 6 7 8 API21 API16x86 API16ARM 68 Последовательная выкладка
69. Игого
70. Роадмап 70 Апрель М ай И ю нь И ю ль Август Сентябрь О ктябрь Н оябрь Д екабрь
71. Количество строк 71 Декабрь 2016 iOS Android 25 203 25 858
72. Затраты на разработку 72 Апрель 2016 Mobile Web 50 % 50 %
73. Обновления без ревью 73
74. ★★★★★ Очень здорово! Спасибо за календарь цен! by Ksenia Pankratova for v1.20 (126) – Android 6.0, Asus Z00l
75. iOS, переходы к партнёрам 75
76. › больше гибридных экранов › оптимизация производительности › Progressive Web Apps: оффлайн, веб-пуши Что дальше? 76
77. PWA: Add to home screen 77
78. Андрей Легчилин Яндекс.Авиабилеты, 
 frontend/Android firnis@yandex-team.ru @sameoldmadness grumpy@yandex-team.ru Роман Парадеев Яндекс.Авиабилеты, 
 frontend/iOS
79. iOS party – июнь bit.ly/iOSekb @iospartyekb Droid party – 20 апреля, 18:30 Минутка рекламы! 79