01 авг 2023 · 11:35
{"document": [{"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "pwa prilozhenia.png", "filesize": 425602, "height": 518, "pic_id": 655858, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/01/pwa_prilozhenia.jpeg", "width": 777}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мобильные приложения — популярный способ вести основные маркетинговые коммуникации с клиентами, но их разработка достаточно дорогая и часто долгая. Поэтому появилась альтернатива в виде технологии PWA, которую Microsoft начала разрабатывать в 2000 году. Progressive Web App отображает данные сайта компании в привычном интерфейсе мобильного приложения, поэтому пользователи не увидят разницы."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Снова о технологии заговорили в 2015-м, когда корпорация Google стала поддерживать нужные для создания PWA компоненты. Есть мнения, что в будущем веб-приложения заменят классические. Уже сегодня гибридный формат сайта и привычного app используют, чтобы ускорить разработку и снизить её стоимость. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Узнайте подробнее о PWA, плюсах и минусах таких приложений, а также об особенностях их создания."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Что такое PWA приложения"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Progressive Web App (PWA) — это адаптация сайта компании под мобильное устройство в виде приложения. Визуально это тот же значок и привычный интерфейс, но принцип работы другой."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "PWA приложения повторяют функционал мобильного приложения. Веб-страницы размещаются на домене, а на устройствах открываются через браузеры. Можно назвать прогрессивные веб-приложения продвинутыми версиями сайта, которые адаптируются под устройство пользователя. При этом специальная разработка под Android и IOS не нужна. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Веб-приложения при необходимости работают автономно, присылают "}, {"type": "string", "attributes": {"href": "https://altcraft.com/ru/blog/mobilnye-i-brauzernye-push-uvedomleniya"}, "string": "Push уведомления"}, {"type": "string", "attributes": {}, "string": " клиентам, что важно для постоянной коммуникации бренда с аудиторией. Устанавливаются обычно через сайт компании, но появились уже и каталоги с Progressive Web Apps: "}, {"type": "string", "attributes": {"href": "https://appsco.pe/"}, "string": "appsco. pe"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"href": "https://storepwa.ru/"}, "string": "storepwa. ru"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"href": "https://www.findpwa.com/"}, "string": "findpwa. com"}, {"type": "string", "attributes": {}, "string": " и другие."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "1.png", "filesize": 307286, "height": 682, "pic_id": 655859, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/01/1.jpeg", "width": 1600}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Web приложения ускоряют взаимодействие с пользователями, создают конкурентные преимущества для бренда, продвигают его товары и услуги через PWA Push notifications. Поэтому технологию используют разные бизнесы, особенно те, где клиенты делают покупки и заказывают услуги регулярно: магазины, салоны красоты, клининг, автосалоны, рестораны, доставка еды, СМИ и так далее. Технология PWA «спасает» компании во время массовых блокировок российских приложений в официальных магазинах. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Плюсы и минусы PWA приложений"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Плюсы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Прогрессивное веб приложение для пользователя почти не отличается от мобильного"}, {"type": "string", "attributes": {}, "string": ", при этом его разработка дешевле в разы."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Сделать PWA версию сайта намного быстрее."}, {"type": "string", "attributes": {}, "string": " Существуют даже конструкторы для создания. Например, "}, {"type": "string", "attributes": {"href": "https://learn.microsoft.com/ru-ru/windows/apps/publish/publish-your-app/turn-your-website-pwa"}, "string": "Microsoft заявляет"}, {"type": "string", "attributes": {}, "string": ", что прогрессивную версию сайта через инструмент PWABuilder получится собрать в перерыве на обед. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Возможность установки с сайта, а не из специального каталога."}, {"type": "string", "attributes": {}, "string": " Так PWA приложение не нужно подгонять под требования стора, ждать одобрения и бояться риска удаления."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://altcraft.com/ru/blog/customer-loyalty"}, "string": "Повышение лояльности"}, {"type": "string", "attributes": {"bold": true}, "string": " и вовлечённости пользователей в контент бренда, которые приводят к повышению продаж и среднего чека."}, {"type": "string", "attributes": {}, "string": " Напоминание клиентам об акциях и новостях бренда происходит через PWA notifications — привычные Push уведомления, которые сообщают об акциях бренда без запуска рекламы."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Индексация приложения поисковыми системами."}, {"type": "string", "attributes": {}, "string": " Так как PWA — это как бы продвинутая версия сайта, для неё работают правила SEO-оптимизации. Эта особенность даёт дополнительный трафик."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Автоматические обновления и меньший вес (не более 3 мегабайт), чем у мобильного приложения."}, {"type": "string", "attributes": {}, "string": " Пользователю не придётся занимать лишнюю память устройства. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Быстрая скорость работы по сравнению с сайтом"}, {"type": "string", "attributes": {}, "string": " и возможность перейти в оффлайн-режим (но с ограничениями)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Минусы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "У PWA приложений не полный доступ к аппаратным возможностям устройств"}, {"type": "string", "attributes": {}, "string": ", на которые они устанавливаются, нет возможности использовать все технологии. Например, для IOS не получится воспользоваться Face ID и Bluetooth. Apple очень медленно адаптируется под веб-приложения, поэтому на их устройствах есть проблема с отправкой Push."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Зависимость от браузера."}, {"type": "string", "attributes": {}, "string": " Возможны ограничения из-за использования устаревших версий операционных систем, где нельзя установить обновления. Также сами браузеры не всегда обеспечивают полный функционал веб-приложений."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Большой расход батареи."}, {"type": "string", "attributes": {}, "string": " PWA кодят на JavaScript — языке программирования, который тратит больше ресурсов системы, чем Java (на нём пишут обычные приложения)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Меньшая виральность."}, {"type": "string", "attributes": {}, "string": " Пользователи привыкли скачивать приложения из App Store (IOS) и Google Play (Android), а не искать их на сайте брендов. При создании только PWA версии придётся вложиться в проведение маркетинговой кампании по продвижению. Или всё же пройти через модерацию каталогов приложений, которая не всегда простая и быстрая. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Успешные кейсы работы компаний с PWA приложениями"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "PWA примеры есть у известных брендов: Telegram, Youtube, TikTok, Aviasales, Tinder, Pinterest, Forbes, AliExpress, Uber и других. Некоторые из них значительно улучшили пользовательский опыт и увеличили доход."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Tinder "}, {"type": "string", "attributes": {"href": "https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0#id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjA1MTUwYTEzMjBiOTM5NWIwNTcxNjg3NzM3NjkyODUwOWJhYjQ0YWMiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJuYmYiOjE2ODcyNTYzNzMsImF1ZCI6IjIxNjI5NjAzNTgzNC1rMWs2cWUwNjBzMnRwMmEyamFtNGxqZGNtczAwc3R0Zy5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsInN1YiI6IjEwMjQ0NjEzMTIyNTQwNzEyMzI0OSIsImVtYWlsIjoiYS5jaGlya292YS5jaGlya292YUBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXpwIjoiMjE2Mjk2MDM1ODM0LWsxazZxZTA2MHMydHAyYTJqYW00bGpkY21zMDBzdHRnLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwibmFtZSI6IkFuYXN0YXNpYSBDaGlya292YSIsInBpY3R1cmUiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS9BQWNIVHRjZ3RJN0pfdGdWOF95Y1UwbFpJQzBTYnBLTjBMb0RuOG5uaHhqcT1zOTYtYyIsImdpdmVuX25hbWUiOiJBbmFzdGFzaWEiLCJmYW1pbHlfbmFtZSI6IkNoaXJrb3ZhIiwiaWF0IjoxNjg3MjU2NjczLCJleHAiOjE2ODcyNjAyNzMsImp0aSI6IjI2YzVlMGYzNmY3MDJlMTE1MzQ4NzQ2YzdkZThjYjhjNzg2MTZjNTgifQ.kaQXg_iswfMfFpZQlKL_N4k9ysYK1KOdfERibmpeEMLjdpZyrKhv4K8vVY3sX7DbEIeWCPgmuSZ5WUNTWT5_tS2uMUzGyS5-JgLviWr_isLZ8-Znmtd5VGaPtXcVgMPebsfX_mkbhY2ga71M-BwXR5KmA4Pn78Z73qF-_3xuXy1MTueJbkgtifxFO566tBpiG3ao8GZZmt7Pq_C33sB7ymPWEDdK9N0bzCLlyt1NM1M-WUoNIGDpiuIHXX8jHDBMCEKD0JtOKRVEbA1v0fT09Uy6_y_hbOeV50p1kyhxOQcev5fW7nnpr42QnLYtP7aBtynDAJJVtCmiYvYAT_-ajQ"}, "string": "запустили"}, {"type": "string", "attributes": {}, "string": " веб-версию приложения, которая занимает всего 2, 8 мегабайт памяти по сравнению с приложением на android (30 мегабайт). Скорость загрузки удалось уменьшить с 11, 91 до 4, 69 секунд, что улучшило user experience. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Pinterest"}, {"type": "string", "attributes": {}, "string": " также смог "}, {"type": "string", "attributes": {"href": "https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154"}, "string": "сократить время загрузки"}, {"type": "string", "attributes": {}, "string": " интерфейса с 23 до 5, 6 секунд. На 40% увеличилось время, которое пользователи проводят в сервисе, а доход от рекламы — на 44%. Значительно (60%) повысилось вовлечение в контент."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "2.png", "filesize": 825908, "height": 1033, "pic_id": 655860, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/01/2_Q8tNg7L.jpeg", "width": 1214}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Улучшить пользовательский опыт с PWA получилось у "}, {"type": "string", "attributes": {"bold": true}, "string": "Forbes"}, {"type": "string", "attributes": {}, "string": ", приложение которого часто называли громоздким. Теперь люди проводят на "}, {"type": "string", "attributes": {"href": "https://digiday.com/media/new-mobile-site-forbes-boosted-impressions-per-session-10-percent/"}, "string": "40%"}, {"type": "string", "attributes": {}, "string": " больше времени за чтением статей издания и просматривают на 15% больше контента. Загружаться страницы также стали быстрее. Если раньше ожидание длилось в среднем 6, 5 секунд, то в новой версии — всего 2, 5. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Прогрессивное веб-приложение увеличило коэффициент конверсии "}, {"type": "string", "attributes": {"bold": true}, "string": "AliExpress "}, {"type": "string", "attributes": {}, "string": "на "}, {"type": "string", "attributes": {"href": "https://developers.google.com/web/showcase/2016/aliexpress"}, "string": "104%"}, {"type": "string", "attributes": {}, "string": ". За один сеанс пользователи стали посещать в два раза больше страниц и тратить на это 74% времени. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Компания "}, {"type": "string", "attributes": {"bold": true}, "string": "Uber "}, {"type": "string", "attributes": {}, "string": "использует"}, {"type": "string", "attributes": {"href": "https://www.uber.com/en-UA/blog/m-uber/"}, "string": " PWA технологию"}, {"type": "string", "attributes": {}, "string": ", чтобы снизить скорость загрузки приложения на всех устройствах даже при 2G соединении. Это важно для выхода на новые рынки. В итоге сервис открывается за 3 секунды и занимать всего 50 килобайт. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Что нужно для создания PWA приложения"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Progressive Web Apps доступны во всех операционных системах, но изначально нужен сайт, который преобразуется в прогрессивную версию с технологиями JavaScript, HTML и CSS. Веб-приложение отображается через WebView — компонент системы, который открывает интернет-страницы в приложении. Для работы PWA нужны браузеры: Safari (IOS) и Chrome (Android)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Чтобы создать веб-приложение, потребуются Web App Manifest и Service Worker."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Service Worker"}, {"type": "string", "attributes": {}, "string": " — скрипт, который принимает информацию (запросы) от браузера через безопасное HTTPS соединение. Компонент открывает браузер фоново, даже если страница не активна. Благодаря Service Worker пользователю отправляют Push уведомления, а приложение без участия юзера синхронизируется с сайтом. Обновления происходят автоматически, также доступен офлайн-режим. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Web App Manifest "}, {"type": "string", "attributes": {}, "string": "— манифест в виде файла manifest. json добавляется в код страницы сайта и передаёт информацию браузеру о том, как должно отображаться приложение на устройстве. Определяет имя, ярлык, заставку, тему приложения и другие элементы. Манифест сообщает, какие данные остаются неизменными, а какие обновляются. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Другие важные элементы для разработки веб-приложения:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Цифровой SSL-сертификат"}, {"type": "string", "attributes": {}, "string": " подтверждает подлинность сайта. Нужен для шифрованного соединения HTTPS соединения, которое обеспечивает безопасность. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Application Shell "}, {"type": "string", "attributes": {}, "string": "— оболочка приложения или шаблон, в который загружаются данные с веб-страниц сайта."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Резюме"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "PWA приложение почти полностью копирует интерфейс и функции "}, {"type": "string", "attributes": {"href": "https://altcraft.com/ru/blog/mobilnoe-prilozhenie-kak-marketingovyj-kanal"}, "string": "мобильного приложения"}, {"type": "string", "attributes": {}, "string": ", но работает технология по-другому. Progressive Web App запускается на экране через ярлык с помощью браузера. Хотя пользователь видит только приложение, которое обновляется, хранит данные и отправляет пуш сообщения. В разработке PWA проще и быстрее, но есть ограничения по некоторым функциям. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Веб-приложение создаётся с компонентами Service Worker и Web App Manifest, также придётся получить SSL-сертификат, чтобы сделать соединение безопасным и использовать Application Shell. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "PWA приложения быстро развиваются и в перспективе могут заменить привычные apps. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Подписывайтесь на наш "}, {"type": "string", "attributes": {"bold": true, "href": "https://t.me/kraftovyj_marketing"}, "string": "телеграм-канал"}, {"type": "string", "attributes": {"bold": true}, "string": ". Там вы найдёте актуальные новости в области digital-маркетинга, полезные статьи и интересные исследования. Будьте в теме вместе с нами:)"}], "attributes": []}], "selectedRange": [8149, 8149]}
Комментарии 0