Изучение природы прогрессивных веб-приложений
11 января 2023 г.Что такое прогрессивные веб-приложения и почему они важны?
Прогрессивное веб-приложение (PWA) или Progressive Web App — это тип прикладного программного обеспечения, доставляемого через Интернет. Он построен с использованием распространенных веб-технологий, таких как HTML, JS и Web Assembly. PWA — это веб-сайты, которые выглядят и ведут себя точно так же, как нативные мобильные приложения, а это означает, что их можно добавлять на главный экран смартфона, отправлять push-уведомления, получать доступ к оборудованию устройства и т. д.; самое главное; работать в автономном режиме за счет кэширования контента.
Прошло более десяти лет с тех пор, как Стив Джобс представил идею веб-приложений, которые выглядят и ведут себя как нативные приложения, и прошло полвека с тех пор, как был придуман термин «PWA». Разработчики могут просто опубликовать веб-приложение в Интернете, убедиться, что оно соответствует базовым «требованиям к возможности установки», и пользователи смогут добавлять приложения на свой главный экран.
Чтобы запустить собственное мобильное приложение, пользователь должен выполнить 6-7 шагов, таких как открытие магазина приложений, поиск приложения с помощью панели поиска, загрузка страницы приложения, определение того, является ли приложение тем, что вы ищете, загрузка и установка, все еще до того, как пользователь начнет использовать приложение. Это не относится к веб-приложениям, где вам просто нужен URL-адрес для доступа.
На данный момент важно отметить, что «прогрессивные веб-приложения» — это не технология, не фреймворк и не язык программирования. Это больше похоже на набор требований, которым должно соответствовать ваше веб-приложение, чтобы оно функционировало как прогрессивное. Есть некоторые новые вещи, которые нужно освоить в процессе, но ничего слишком сложного.
Когда PWA запускается в первый раз, он сразу же помещает все статические ресурсы, из которых построена его оболочка приложения, в кеш. При следующем запуске приложение будет использовать статическое содержимое из кеша, что значительно сократит время отклика.
Что за шумиха вокруг PWA?
Pinterest преобразовал свой мобильный сайт в PWA и отметил значительный рост основных взаимодействий. Они также заметили 1/2-кратное увеличение доходов от рекламы и среднего времени, затраченного пользователями. PWA от Uber загружается менее чем за 3 секунды в медленной сети. BookMyShow PWA почти вдвое меньше приложения для Android и в 180 раз меньше, чем приложение для iOS.
Чем оно отличается от адаптивного веб-приложения?
- Опыт работы. Адаптивный веб-дизайн обеспечивает единообразие UX на различных устройствах и платформах. PWA — это усовершенствованная форма адаптивного веб-дизайна с мобильной средой.
- Кодовая база. Адаптивные веб-приложения используют единую кодовую базу для веб-платформ и мобильных платформ, а PWA используют единую кодовую базу для мобильной среды.
- Адаптируемость. Адаптивные веб-приложения обеспечивают автоматическую адаптацию в соответствии с размерами и разрешениями экрана, в то время как PWA обладает дополнительным преимуществом в виде подсказок «Push-уведомления» и «Добавить на главный экран».
- Производительность. Производительность зависит от разных платформ и устройств
Чем оно отличается от нативных мобильных приложений?
- Платформа. Нативное приложение создается специально для одной платформы. PWA – это приложение, которое запускается в браузере и ведет себя почти как нативное приложение.
- Кодовая база. Нативному приложению требуется отдельная кодовая база для каждой платформы (Android, iOS). Для PWA не требуется отдельная кодовая база, поскольку вам не нужно устанавливать его из Google Play или App Store.
- Пользовательский опыт. Нативные приложения обеспечивают непревзойденный пользовательский интерфейс благодаря собственному доступу к оборудованию. PWA обеспечивают превосходный пользовательский интерфейс благодаря современным веб-стандартам.
- Безопасность. Нативные приложения реализуют дополнительные уровни безопасности с помощью встроенных компонентов устройства, а PWA предлагают шифрование HTTP.
- Бюджет. Для нативных приложений требуется более высокий бюджет для написания кода для конкретной платформы. PWA относительно дешевле нативных приложений, поскольку они работают на нескольких платформах с единой кодовой базой.
- Установка. Нативные приложения необходимо загружать из магазина приложений, в то время как PWA предоставляет подсказки «Добавить на главный экран» и запускается непосредственно в браузере.
- Пространство. Для нативных приложений требуется больше места на устройстве, а для PWA требуется очень мало места.
- Подключение. Нативные приложения потребляют больше данных и сетей. PWA хорошо работают в медленных сетях и даже в автономном режиме.
- Время выхода на рынок. Нативные приложения создаются дольше и требуют проверки в магазине приложений. PWA создаются быстрее.
- Push-уведомления. Push-уведомления доступны как для iOS, так и для Android с нативными приложениями, но запуск PWA на iOS не поддерживает push-уведомления.
- Взаимодействие между приложениями. Нативные приложения поддерживают взаимодействие между приложениями, а PWA — нет.
Плюсы PWA
- Совместимость. Поскольку доступ к PWA осуществляется через браузер, он работает на любых типах ОС и мобильных устройствах.
- Низкие затраты. Поскольку PWA по-прежнему остается веб-сайтом, вам не нужен большой бюджет для его разработки.
- Доступ по URL. Вам не нужно загружать и устанавливать PWA, чтобы начать использовать его. Вам нужен только URL-адрес для доступа к нему через браузер.
- Преимущества SEO. Технически PWA — это веб-сайт. С этой целью вместо запуска маркетинговой кампании вы можете рассчитывать на преимущества SEO для ее продвижения.
- Удобство использования памяти. Поскольку PWA не устанавливается, ему требуется лишь небольшой объем памяти.
- Вовлечение пользователей: PWA поддерживает взаимодействие пользователей с помощью push-уведомлений.
- UI/UX, похожий на приложения. PWA выглядят как нативные приложения.
- Обновления: PWA обновляются без нажатия пользователем каких-либо кнопок — все новые функции доступны автоматически.
Минусы PWA
- Потребление батареи. PWA работают на технологиях, не предназначенных для мобильной среды. В результате устройства должны работать усерднее, чтобы интерпретировать код.
- Ограниченная функциональность. Поскольку PWA – это детище Google, будьте готовы к тому, что устройства iOS не поддерживают все его функции.
- Ограниченный доступ к оборудованию. Такие приложения имеют ограниченный доступ к функциям программного и аппаратного обеспечения. Они не поддерживают функции, не поддерживаемые HTML5.
Как создать PWA
Чтобы создать PWA, команда разработчиков может выбрать любой из следующих вариантов:
- Создайте PWA с нуля или
- Преобразуйте существующее приложение в PWA.
Следующие шаги помогут вам преобразовать существующее приложение в PWA.
Предположим, вы используете какое-то погодное приложение, которое предоставляет обновления погоды в зависимости от введенного вами местоположения. Нам нужно будет настроить «рабочего сервиса» в нашем существующем веб-приложении, чтобы оно вело себя как PWA. Прежде чем мы продолжим, давайте поговорим о сервис-воркере.
Важной особенностью PWA, которую мы обсуждали ранее, является их способность работать в автономном режиме и кэшировать контент. Это кэширование выполняется с помощью сервисного работника, который представляет собой файл JS, находящийся в вашем приложении, но работающий в отдельном потоке, поэтому он не завершается, когда ваше приложение закрывается в браузере. Помимо кэширования, он может отправлять уведомления, push-сообщения, синхронизировать локальный кеш и даже имитировать ответы (если запрограммировано). Сервисный работник полезен для постоянного обновления вашего приложения и является большим преимуществом по сравнению с мобильными приложениями, которые вы должны помнить об обновлении.
Мое приложение представляет собой угловое приложение, и чтобы сделать его PWA, разработчик должен выполнить следующую команду.
ng add @angular/pwa
Эта команда добавит запись service worker:true и ngswConfigPath:”ngsw-config.json” в производственную конфигурацию файла angular.json.
Эта же команда создаст два новых файла manifest.webmanifest и ngsw-config.json
Наконец, создайте приложение с рабочей конфигурацией. ng build --prod
Это создаст производственную сборку для приложения.
Теперь разверните это приложение на сервере, размещенном на HTTPS (как мы обсуждали ранее, PWA работают на HTTPS). Пользователи могут нажать «Добавить приложение погоды на главный экран» или «Добавить на главный экран», чтобы установить приложение на свои устройства.
Обзор
Если мы сравним PWA с нативными мобильными приложениями, мы обнаружим значительную разницу между проблемой, которую пытается решить один подход, по сравнению с другим. На мой взгляд, PWA будет хорошим вариантом, если вы хотите запустить существующее веб-приложение как родное мобильное приложение за очень короткое время, и у вас недостаточно бюджета или времени для разработки полного приложения с нуля в качестве родного мобильного приложения. применение.
PWA также помогают вам проанализировать «что, если» при запуске вашего приложения как родного мобильного приложения. Как мы уже обсуждали некоторые ограничения PWA, есть большая вероятность, что разработчики предпочтут подходить к разработке собственных мобильных приложений, а не PWA, в зависимости от бизнес-требований и потребностей.
P.S.: Информация была собрана из различных источников, а также после посещения многочисленных блогов и постов и обмена тем, что я понимаю, и моей личной точкой зрения. Не стесняйтесь делиться своими мыслями и комментариями ниже.
Также опубликовано здесь
Рекомендуемое изображение источник.
Оригинал