Что они собой представляют и зачем нам PWA?
Прогрессивные веб-приложения (PWA) - одна из новейших и одна из самых популярных тем в создании мобильных приложений. Так что же они из себя представляют и почему о них стоит знать? Мы подробно обо всем расскажем в этой статье. Однако сначала его можно рассматривать как введение в прогрессивные веб-приложения для людей, которые еще не сталкивались с этой темой.
Что такое PWA?
Начнем с того, чем не является PWA. Это не какая-то новая технология или фреймворк, которые нам нужно было бы научиться применять. Напротив, PWA - это набор передовых методов, которые заставят наше приложение «адаптироваться» к устройству пользователя. Эта настройка включает, например, push-уведомления, возможность работы в автономном режиме и т. Д.
В идеале пользователь приложения не должен видеть разницы, открыл ли он приложение как собственное приложение, созданное для данной операционной системы, или как приложение PWA.
Progressive Web Apps - это веб-сайт, написанный с использованием большой тройки - HTML, JavaScript и CSS. Он работает в обоих браузерах (настраивая внешний вид и макет в соответствии с размером экрана - отзывчивость) и так же, как установленное приложение (push-уведомления, автономная работа, доступ с помощью значка на рабочем столе, без адресной строки, полноэкранный режим). Все это возможно только с использованием интерфейсных технологий.
Зачем нам PWA?
Принципы PWA были созданы, чтобы решить как можно больше современных проблем, связанных с собственными приложениями. Некоторые из них включают:
- Скорость Интернета - несмотря на постоянное развитие телекоммуникаций и более смелые заявления о сети 5G, почти 60% людей в мире по-прежнему используют Интернет на скорости 2G.
- Длительное время загрузки страницы - по статистике, средний пользователь мобильного приложения может ждать загрузки страницы около 3 секунд! Так что здесь важно время появления «любого» контента страницы.
- Нежелание устанавливать больше приложений - статистический пользователь телефона устанавливает не более 1 приложения в месяц из магазина приложений, предназначенного для его платформы.
- Приложения вместо браузера - подавляющее большинство пользователей предпочитают использовать свои любимые веб-сайты через собственные приложения, а не просматривать их в мобильных браузерах.
Альтернативы прогрессивным веб-приложениям
Родные приложения
Первый и самый очевидный вариант, который приходит на ум, - это нативные приложения, то есть написанные для конкретной платформы. Если вы хотите создать программное обеспечение, которое работает на всех самых популярных мобильных устройствах, нам нужно знать технологии: Objective-C или Swift для iOS, Java для Android и C # для Windows Phone (я знаю, знаю, но они есть все еще на рынке) и, конечно же, JavaScript для приложений, работающих в браузере.
Как нетрудно догадаться, самая большая проблема здесь - это множество технологий. Фактически, чтобы охватить ваших пользователей на всех платформах, вы должны создать и поддерживать несколько очень разных проектов. Для этого позаботьтесь об их согласованности и потратите на это много времени и ресурсов.
Гибридные приложения - «напиши один раз, запусти где угодно».
Гибридные приложения, такие как приложения PWA, создаются с использованием стека HTML-JS-CSS. Однако они размещаются в магазинах приложений. Это возможно благодаря использованию фреймворков, которые должным образом «упаковывают» приложение и отправляют его в App Store.
Обратной стороной такого решения является необходимость создания нашего приложения для «удовлетворительной» работы на всех платформах. Кроме того, мы зависим от структуры, которая работает между нашим приложением и целевым продуктом на конкретной платформе. В случае более сложных приложений их производительность также не очень высока. Также следует помнить, что такое приложение должно пройти проверку магазина, чтобы появиться в нем.
React Native - «учись один раз, пиши где угодно».
В этом случае приложения также создаются с использованием стандартного интерфейсного стека, и созданное приложение отправляется в App Store. Однако здесь мы создаем по одному приложению для каждой платформы. Так похоже на нативные приложения. Единственная разница в том, что мы все время используем одну и ту же технологию.
Производительность таких приложений почти такая же, как у нативных приложений (мы, наконец, пишем для конкретной платформы). Однако нам еще предстоит управлять несколькими проектами.
PWA - новейший игрок в мобильном мире
Самым важным отличием всех упомянутых методов создания приложений от PWA является то, что приложения PWA не появляются в магазине данной платформы. Поначалу это может звучать как что-то негативное - ведь все наши приложения мы скачиваем из App Store. Однако при ближайшем рассмотрении можно прийти к несколько иным выводам:
- Магазины приложений содержат миллионы приложений (3,3 миллиона приложений для Android и 2,2 миллиона в магазине iOS), поэтому шанс прорваться и заставить наше приложение появиться невысок.
- Не размещая наше приложение в магазине, нам не нужно проходить процесс утверждения нашего приложения, который требуется при первом размещении в магазине и во время каждого обновления.
- Предоставляя возможность установить приложение прямо с нашего веб-сайта (или технически говоря - позволяя пользователю использовать наше приложение на своем устройстве, чтобы у него создавалось впечатление, что он использует собственное приложение), мы позиционируем наше приложение с использованием стандартных решений SEO. Популярность нашего веб-сайта также является движущей силой популярности нашего приложения.
Преимущества
Подведем итог, почему мы, разработчики, должны быть заинтересованы в PWA:
- Во-первых, размер собственных приложений обычно измеряется десятками МБ, а размер хорошо подготовленного мобильного приложения - десятками КБ.
- Один стек технологий - нам не нужно изучать родные для платформы языки, и мы управляем только одним проектом.
- Более быстрое налаживание взаимодействия с пользователем - пользователь с большей охотой зайдет на веб-сайт и протестирует там наше приложение перед установкой, чем установит на свое устройство неизвестное приложение для тестирования.
- Намного быстрее вводить новые функции и исправления в нашем приложении.
Ключевые предположения
В самом начале этой статьи я написал, что PWA - это сборник хороших практик. Теперь, когда мы лучше понимаем, что такое приложения PWA, давайте узнаем его основные предположения:
- Отзывчивость - внешний вид и макет нашего приложения меняется в зависимости от размера экрана,
- Внешний вид нативного приложения - пользователь убежден, что использует нативное приложение, а не WEB-приложение,
- Автономная поддержка - приложение сохраняет необходимые материалы в памяти устройства, чтобы его можно было запускать без подключения к Интернету,
- Установка - при просмотре приложения в браузере пользователю будет предложена возможность установки просматриваемого приложения на устройстве,
- Создание обязательств - установленное приложение с помощью push-уведомлений напоминает пользователю о наиболее важных функциях, с его точки зрения,
- Возможность поиска - использование SEO для лучшего позиционирования нашего приложения в Интернете,
- Актуальность - каждый раз, когда вы подключаетесь к Интернету, приложение автоматически обновляет свой контент,
- Безопасность - использование HTTPS (обязательно!)
Прогрессивность - приложение также будет работать на старых устройствах независимо от версии операционной системы, что может снизить его функциональность, - Возможность связывания - легко указать на наше приложение, разместив только URL-адрес, по которому оно размещено.
Одна из самых важных вещей из приведенного выше списка - возможность работать в автономном режиме. Технология, которая позволяет веб-сайту работать в автономном режиме, - это так называемый Service Worker, файл JavaScript. Конечно, это означает, что Service Worker является обязательной частью любого приложения PWA.
Надеюсь, мне удалось объяснить, что такое PWA и каким принципам он следует.
Больше контента на plainenglish.io
