{"draftJsState":{"blocks":[{"data":{"image":{"id":"682464dfaac2666b15155c56"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3mef8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет! Меня зовут Влад, и я тот самый человек, который привык использовать костыли в решении задач. По крайней мере, я считаю, что это лучший подход при подготовке MVP. Яркий пример — прототипирование простых скриптов под микроконтроллеры на MicroPy или десктопных приложений на Electron. Но, как оказалось, это не все виды ухищрений в разработке.","type":"unstyled","key":"2i0uq"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":14,"offset":211}],"inlineStyleRanges":[],"text":"Если вы веб-разработчик, но руки «чешутся» написать мобильное приложение, варианты есть. В этой статье я расскажу, как создать собственное прогрессивное веб-приложение (PWA) и доработать его до TWA, чтобы потом протестировать и опубликовать в разных сторах. Никакого rocket science, просто небольшое пособие, которое основывается на моем опыте. Подробности — в тексте.","type":"unstyled","key":"5pu50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое PWA и TWA","type":"header-two","key":"4je6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы ранее не сталкивались с такими понятиями, давайте сделаем краткий экскурс.","type":"unstyled","key":"25ovb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"PWA (Progressive Web App) — это веб-приложение, которое старается быть похожим на нативное приложение. По сути — просто сохраненная страница браузера на главном экране вашего устройства. При этом интерфейс самого браузера может быть отключен, чтобы все выглядело максимально правдоподобно. При этом PWA может работать без подключения к интернету, если настроены сервис-воркеры (Service Workers), которые загружаются в память самого устройства и кэшируют ресурсы. ","type":"unstyled","key":"c3t98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"TWA (Trusted Web App) — это, можно сказать, улучшенный PWA. По сути, это уже не сохраненная страница, а полноценный «браузер» на движке Chrome, у которого одно предназначение — отображать ваше веб-приложение. Подробнее о том, чем TWA отличается от PWA, вы поймете по ходу статьи. Здесь есть свои тонкости.","type":"unstyled","key":"d1jee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подготовка веб-страницы","type":"header-two","key":"ef3sm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По какой-то причине вы решили, что не хотите писать отдельный нативный фронтенд на Swift и Java/Kotlin. И это очень даже логично, если вы разрабатываете MVP продукта или просто хотите ограничиться небольшим количеством ресурсов. Далеко за примером ходить не нужно, ведь разный фронтенд — это отдельный бэкенд со своим проработанным API и спецификацией. А тут написали «монолит» на Django, конвертировали каким-то образом в подобие мобильного приложения — и готово.","type":"unstyled","key":"1clhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оставим шутки в сторону, я слишком утрирую. На самом деле, разделить фронтенд и бэкенд я настоятельно советую, чтобы в будущем было проще масштабировать проект. Но пока сконцентрируемся на фронтенде.","type":"unstyled","key":"d35uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, у вас есть страница, а в инструментах разработчика все выглядит красиво. На этом этапе важно убедиться, что верстка будет не столько адаптивной, сколько резиновой — чтобы приложение адекватно выглядело, например, на IPhone 12 Pro и вытянутом Galaxy Z Fold 5. Здесь рекомендую использовать величины, относительные ширины или высоты устройства: vh, vw и т. д. По опыту, работать с упором на ширину гораздо проще.","type":"unstyled","key":"8mt31"},{"data":{"image":{"id":"68246138aefeba06386426bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты разработчика, Google Chrome.","type":"atomic:image","key":"bcuh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Резиновая верстка есть — с этим уже можно работать и делать PWA. Или нет?","type":"unstyled","key":"eolev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде необходимо также указать в мета-тегах цвет статус-бара — панели, на которой размещена информация об уровне заряда, сети и времени. Вы можете определять ее background-color относительно каждой HTML-страницы своего веб-приложения. Достаточно прописать такую строку внутри блока :","type":"unstyled","key":"d50h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fultp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В остальном, рекомендую много времени на стилизацию и шлифование верстки не тратить — вы к этому вернетесь еще не один раз. Ведь у каждого устройства свои стандартные стили отображения веб-элементов и их состояний, которые точно отразятся на итоговом результате.","type":"unstyled","key":"fspap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запуск PWA","type":"header-two","key":"fo3op"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня прогрессивные веб-приложения — это не rocket science. По сути, чтобы превратить свой веб-сайт в веб-приложение, нужно добавить простой манифест. В нем — указать параметры запуска PWA: ориентацию, иконку, дисплей и так далее. После того, как мобильный браузер «считает» этот манифест, он предложит сохранить приложение на экран «Домой» вашего смартфона. Кстати, именно поэтому раньше Apple называли прогрессивные веб-приложения как «Home Screen Web Apps».","type":"unstyled","key":"9q3en"},{"data":{"image":{"id":"682461583018820c882bb9db"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка сохранения PWA приложения на экран «Домой».","type":"atomic:image","key":"70cam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Звучит все просто, не так ли? Давайте тогда напишем и подключим манифест.","type":"unstyled","key":"8iblb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 1. Создайте manifest.json на стороне фронтенда вашего приложения.","type":"unstyled","key":"4pvvh"},{"data":{"image":{"id":"68246169aac2666b150edfdd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5mrk3"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":18,"offset":74}],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 2. Сконфигурируйте manifest.json. Для простоты можете воспользоваться Manifest Generator — он в онлайне все сделает за вас.","type":"unstyled","key":"e4p88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"name\": \"Приложение\",\n \"short_name\": \"Приложение\",\n \"start_url\": \"/master.html\",\n \"display\": \"standalone\",\n \"background_color\": \"#FFFFFF\",\n \"orientation\": \"portrait\",\n \"icons\": [\n {\n \"src\": \"/static/img/global/pwa/logo_128x128.png\",\n \"type\": \"image/png\",\n \"sizes\": \"128x128\"\n },\n {\n \"src\": \"/static/img/global/pwa/logo_144x144.png\",\n \"type\": \"image/png\",\n \"sizes\": \"144x144\"\n },\n {\n \"src\": \"/static/img/global/pwa/logo_512x512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ]\n}","type":"blockquote","key":"iej9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 3. Откройте файл, указанный в start_url, и подключите manifest.json:","type":"unstyled","key":"78sb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n \n Приложение\n\n \n\n \n \n \n","type":"blockquote","key":"3vo89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 4. Создайте app.js и sw.js. В первом скрипте может быть собрана основная логика вашего приложения — он отвечает за взаимодействие с пользователем, обработку событий, управление состоянием приложения и взаимодействие с API.","type":"unstyled","key":"7fmsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключение app.js в теле основного файла master.html:","type":"unstyled","key":"196fo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n\n \n \n …\n","type":"blockquote","key":"ei8h4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В app.js вы можете инициализировать необходимые функции, такие как регистрация Service Worker, настройка кэширования, обработка офлайн-режима и другие функции, которые сделают ваше приложение интерактивным и отзывчивым.","type":"unstyled","key":"d85n7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В файле sw.js должна быть описана логика Service Worker — скрипта, который работает в фоновом режиме, отдельно от основного потока вашего приложения. Например, с помощью него можно регулярно отправлять сетевые запросы и управлять оффлайн-доступом. Чтобы было понятнее: если приложение неактивно, Service Worker может работать в фоне и периодически отправлять пользователю push-уведомления.","type":"unstyled","key":"chfrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отладочное наполнение app.js, а сам sw.js может быть пустым, если вы не хотите описывать специфический Service Worker:","type":"unstyled","key":"d0b13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":2,"offset":19,"style":"BOLD"}],"text":"if('serviceWorker' in navigator){\n navigator.serviceWorker.register('/scripts/global/pwa/sw.js')\n .then(() => console.log(\"pwa start\"))\n .catch(() => console.log(\"pwa error\"));\n}","type":"blockquote","key":"442df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 5. Запустите свой веб-сервер и откройте master.html. Если вы все сделали корректно, в консоле будет сообщение «pwa start». Важно: PWA лучше запускать, если у вас настроено HTTPS-соединение. Тогда приложение не будет ругаться и всячески ограничивать сбор данных вроде геолокации и прочего.","type":"unstyled","key":"5eu99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готово! Вот так за пять шагов мы настроили PWA. По сути, вы можете на этом закрыть статью и пойти дальше разрабатывать свое веб-приложение. На ограничения здесь наткнуться сложно, ведь PWA имеет доступ к драйверам камеры и файловой системы, что довольно сильно приближает его к нативным приложениям.","type":"unstyled","key":"298qv"},{"data":{"image":{"id":"682461bcbc9bf972f7258d13"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат: веб-страница запущена в виде PWA на iOS.","type":"atomic:image","key":"15s3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть только один нюанс: PWA нельзя разместить в сторе. Если вам это нужно, то оставайтесь на связи и читайте следующий раздел.","type":"unstyled","key":"5un10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработка TWA","type":"header-two","key":"fnc2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы слышали раньше, что PWA можно загрузить в Microsoft App Store и Google Play — это правда. Но есть несколько нюансов.","type":"unstyled","key":"dsvgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы не сможете опубликовать PWA в AppStore. В этом плане Apple враждебны в отношении веб-приложений. Отчасти это связано с тем, что они не могут знать, что вы реализуете на базе JavaScript. А если у вас нативное приложение, вам проще выписать чек за работу с драйверами геолокации, камеры, вибрации и прочего.","type":"unordered-list-item","key":"flgu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"PWA зависит от ПО на устройстве пользователя. Да, сегодня технологию поддерживают большинство браузеров, но кто знает наверняка? Хотя, честно говоря, в этот нюанс верится уже с натяжкой.","type":"unordered-list-item","key":"2b2pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В общем, чтобы ваше приложение можно было распространять через все сторы, нужно само «нативное приложение». А PWA — это просто вкладка браузера, сохраненная на экран смартфона. Это значит, нам нужно распространять не саму вкладку, а браузер с этой вкладкой. С этим поможет инструмент Cordova.","type":"unstyled","key":"6u7bd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Cordova — это платформа от Apache для разработки кроссплатформенных мобильных приложений с использованием веб-технологий. По сути, она создает «браузер», в котором по умолчанию запущено только ваше веб-приложение через iframe или WebView.","type":"blockquote","key":"5al4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно: Cordova — это не единственный путь для создания мобильных приложений на базе веб. Есть еще Ionic Framework Quasar Framework. Но я с ними не работал, поэтому не могу рекомендовать. А вот как работать с Cordova, знаю.","type":"unstyled","key":"9lpvh"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":34,"offset":121}],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 1. Создайте внутри среды разработки отдельный проект и установите node.js в виртуальное окружение. Это можно сделать по инструкции с официального сайта.","type":"unstyled","key":"bboie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 2. Установите Cordova. Для этого в терминале достаточно ввести команду:","type":"unstyled","key":"c1sdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install -g cordova","type":"blockquote","key":"elugv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 3. Создайте новый проект. В качестве myApp укажите название проекта (не используйте кириллицу, будут проблемы с зависимостями):","type":"unstyled","key":"4hm29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cordova create myApp","type":"blockquote","key":"6soci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 4. Перейдите в каталог проекта и добавьте необходимые платформы: Android или iOS.","type":"unstyled","key":"bej3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd myApp\n\ncordova platform add ios\ncordova platform add android","type":"blockquote","key":"d7mtc"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":8,"offset":62}],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 5. Установите необходимые плагины. Полный список доступен на сайте. Для примера установим плагины для работы с камерой устройства и геолокацией:","type":"unstyled","key":"drof0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cordova plugin add cordova-plugin-camera\ncordova plugin add cordova-plugin-geolocation","type":"blockquote","key":"k8dh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 6. Опишите конфигурацию config.xml — здесь вы можете задать ориентацию, базовый цвет темы и статус-бара и другие параметры:","type":"unstyled","key":"f84tu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":39,"style":"BOLD"},{"length":1,"offset":167,"style":"BOLD"},{"length":6,"offset":170,"style":"BOLD"},{"length":7,"offset":181,"style":"BOLD"},{"length":13,"offset":190,"style":"BOLD"},{"length":14,"offset":250,"style":"BOLD"},{"length":7,"offset":266,"style":"BOLD"},{"length":1,"offset":323,"style":"BOLD"},{"length":9,"offset":344,"style":"BOLD"},{"length":8,"offset":355,"style":"BOLD"},{"length":2,"offset":381,"style":"BOLD"},{"length":7,"offset":385,"style":"BOLD"},{"length":2,"offset":404,"style":"BOLD"},{"length":13,"offset":408,"style":"BOLD"},{"length":2,"offset":440,"style":"BOLD"},{"length":13,"offset":444,"style":"BOLD"},{"length":2,"offset":477,"style":"BOLD"},{"length":17,"offset":481,"style":"BOLD"},{"length":2,"offset":517,"style":"BOLD"},{"length":17,"offset":521,"style":"BOLD"},{"length":2,"offset":558,"style":"BOLD"},{"length":11,"offset":563,"style":"BOLD"},{"length":2,"offset":623,"style":"BOLD"},{"length":11,"offset":627,"style":"BOLD"},{"length":2,"offset":685,"style":"BOLD"},{"length":11,"offset":689,"style":"BOLD"},{"length":2,"offset":737,"style":"BOLD"},{"length":9,"offset":773,"style":"BOLD"},{"length":1,"offset":797,"style":"BOLD"},{"length":11,"offset":800,"style":"BOLD"},{"length":2,"offset":852,"style":"BOLD"},{"length":11,"offset":856,"style":"BOLD"},{"length":2,"offset":911,"style":"BOLD"},{"length":11,"offset":915,"style":"BOLD"},{"length":9,"offset":930,"style":"BOLD"},{"length":1,"offset":950,"style":"BOLD"},{"length":11,"offset":953,"style":"BOLD"},{"length":2,"offset":1003,"style":"BOLD"},{"length":11,"offset":1007,"style":"BOLD"},{"length":7,"offset":1039,"style":"BOLD"},{"length":2,"offset":1089,"style":"BOLD"},{"length":7,"offset":1093,"style":"BOLD"},{"length":2,"offset":1148,"style":"BOLD"},{"length":9,"offset":1151,"style":"BOLD"}],"text":"\n\n MyApp\n \n A sample Apache Cordova application.\n \n \n Your Name\n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n","type":"blockquote","key":"aoaj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание: после установки плагинов их нужно инициализировать в config.xml, иначе они будут проигнорированы. Также в конфигурации указана мета-информация о создателе приложения и другие данные. А чтобы статус-бар браузера (навигация, поисковая строка) не отображались пользователю, мы его скрыли через настройку StatusBarOverlaysWebView. Также мы указали портретную (вертикальную) ориентацию.","type":"unstyled","key":"e1p04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 7. Создайте WebView вашего приложения. Для этого откройте файл www/index.html и используйте шаблон:","type":"unstyled","key":"8imug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n \n \n My Cordova App\n \n \n \n\n\n

Добро пожаловать в мое Cordova приложение!

Открывается страница в WebView...

\n\n","type":"blockquote","key":"fgplj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 8. Соберите приложение. Важно: для запуска эмулятора iOS вам понадобится XCode, а для Android — Android Studio.","type":"unstyled","key":"b46ps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cordova build ios","type":"blockquote","key":"de7q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 9. Запустите приложение:","type":"unstyled","key":"83dsh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cordova run ios","type":"blockquote","key":"ece6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готово — мы получили готовое приложение, которое можно запустить на iOS:","type":"unstyled","key":"7b2qr"},{"data":{"image":{"id":"6824628f13425d42f954f2a8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bh5vk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее вы можете собрать приложение через XCode или Android Studio (зависит от платформы) и загрузить на реальное устройство или выложить в стор. Это тема для отдельной статьи, так что оставлю ее вам на самостоятельное изучение.","type":"unstyled","key":"7m6qc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование PWA/TWA","type":"header-two","key":"uu5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В зависимости от устройства верстка может ломаться. И, на самом деле, это меньшая из проблем. Например, если вы используете асинхронный JavaScript, который рендерит что-то на клиенте, процесс может поломаться на более «быстром» или «медленном» устройстве. Чтобы найти все такие баги, приложение нужно тестировать и отлаживать.","type":"unstyled","key":"ulvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы работаете с устройствами Apple, можно подключить смартфон по кабелю к MacBook и в режиме разработчика в Safari отслеживать алерты, которые скрыты за интерфейсом PWA. Но это не универсальное решение, ведь вы ограничены своим устройством, его платформой и характеристиками.","type":"unstyled","key":"2rcco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наверное, вы к этому моменту уже догадались, что для разработки TWA совершенно необязательно делать PWA. Это независимые подходы, которые просто похожи по своей задумке. Но я считаю, что пренебрегать PWA, если вы хотите сделать TWA, не стоит.","type":"unstyled","key":"2h185"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":25,"offset":341}],"inlineStyleRanges":[],"text":"С точки зрения верстки пересобирать TWA под каждую из платформ — долго и нецелесообразно. Если вы хотите протестировать работу плагинов Cordova с драйверами разных устройств — да, без TWA никуда. Но чтобы проверить верстку, достаточно запускать на разных смартфонах одно PWA и смотреть, как оно себя ведет. И с первым, и вторым может помочь ферма мобильных устройств.","type":"unstyled","key":"6uvpb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ферма мобильных устройств — это инфраструктурное решение для удаленного тестирования под Android и iOS. Имея доступ к большой базе смартфонов с различными параметрами (версиями OS, процессорами, диагоналями, производительностью и оболочкой), пользователь может проводить широкий набор тестов. Тем самым — ускорить обнаружение багов и деплой в продакшен.","type":"blockquote","key":"3h6ds"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":28,"offset":25}],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":26,"offset":72,"style":"BOLD"}],"text":"Шаг 1. Зарегистрируйтесь в панели управления Selectel и откройте раздел Продукты → Мобильная ферма.","type":"unstyled","key":"7rn22"},{"data":{"image":{"id":"682462a0a685494e64e3b0e1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панель управления, экран создания фермы мобильных устройств.","type":"atomic:image","key":"fascn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":13,"offset":22,"style":"BOLD"}],"text":"Шаг 2. Нажмите кнопку Создать ферму — введите имя фермы и выберите устройства, на которых хотите протестировать свое приложение. Для примера возьмем Android-смартфон TECNO CAMON 20 Pro и iPhone 12 Pro Max. Такая ферма будет стоить всего 2 ₽/мин.","type":"unstyled","key":"fb72l"},{"data":{"image":{"id":"682462c01229292f5f46ff4f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панель управления, сборка фермы мобильных устройств.","type":"atomic:image","key":"4ovo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Шаг 3. Нажмите кнопку Создать ферму и кликните по устройству, на котором хотите протестировать свое PWA/TWA.","type":"unstyled","key":"ein68"},{"data":{"image":{"id":"682462d0c6a36449b7ac84df"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панель управления, интерфейс работы с устройством.","type":"atomic:image","key":"bl53m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":10,"offset":49,"style":"BOLD"},{"length":21,"offset":177,"style":"BOLD"}],"text":"Шаг 4. Загрузите свое TWA перетаскиванием в поле Приложения вашего скомпилированного приложения. Или, если вы тестируете PWA, просто откройте в браузере нужную ссылку и нажмите Установить приложение.","type":"unstyled","key":"485t5"},{"data":{"image":{"id":"682462e367606b09abfa3fcc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Панель управления, работа со смартфоном.","type":"atomic:image","key":"3ecnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готово! Вот так с помощью небольших манипуляций можно протестировать свое приложение в бою.","type":"unstyled","key":"c6jnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eh0c8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"9lMZz4Q9E2f3rzNsJ1TQ"}],"entityMap":{"0":{"data":{"url":"https://selectel.ru/services/mobile-farm/?utm_source=dzen.com&utm_medium=referral&utm_campaign=mobilefarm_article_pwatwa_150525"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://progressier.com/pwa-manifest-generator"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://nodejs.org/en"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://cordova.apache.org/plugins/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://selectel.ru/services/mobile-farm/?utm_source=dzen.com&utm_medium=referral&utm_campaign=mobilefarm_article_pwatwa_150525"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://my.selectel.ru/?utm_source=dzen.com&utm_medium=referral&utm_campaign=mobilefarm_article_pwatwa_150525"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}