Всё, что нужно знать о Progressive Web App (PWA) / Хабр

PWA — прогрессивные веб-приложения.

Предупреждение. Эта статья не проспонсирована PWA. Все взгляды и мнения в статье принадлежат только её автору.

Progressive Web App или PWA — лучший способ для разработчиков заставить свои веб-приложения загружаться быстрее и быть более производительными. PWA — это веб-сайты, которые используют современные веб-стандарты, что дает возможность устанавливать их на компьютер или устройство пользователя. В работе они как приложения. Самый известный пример — это Twitter, который запустил сайт mobile.twitter.com как PWA на React и Node.js.

Прежде чем двигаться дальше, давайте быстренько разберемся, что есть PWA.

PWA — это веб-приложение, которое может быть установлено на вашу систему. Оно работает оффлайн, когда нет подключения к интернету, по-максимуму используя данные, закэшированные во время вашей последней работы с приложением. Если вы заходите на сайт из Chrome на десктопе, и у вас включены соответствующие флаги, то вас попросят установить приложение.

Термин PWA или Progressive Web App пришел из технического жаргона, но на самом деле — это следующий шаг в удобных для пользователя приложениях. Разработчикам приложений стоит к ним внимательно присмотреться.

Они совмещают в себе удобство и внешний вид приложения, при этом разрабатывать их также легко как обычный веб-сайт. Эти современные приложения предоставляют доступ к вашему контенту и первоклассный сервис, который делает пользователей счастливее.

Прогрессивные приложения можно назвать адаптивными сайтами, потому что они подстраиваются под возможности браузера пользователя. Они автоматически могут улучшать встроенные функции браузера, чтобы работа с сайтом была похожа на работу с нативным веб-приложением. Базовые компоненты PWA:

• манифест веб-приложения: для предоставления нативных функций, таких как иконка приложения на рабочем столе;
• технология Service Workers: для фоновых задач и работы в оффлайн-режиме;
• архитектура application shell (оболочка приложения): для быстрой загрузки с Service Workers.

Самые популярные примеры использования PWA — это сайты Alibaba, Forbes, The Weather Channel и MakeMyTrip.

Основные преимущества PWA, которые делают их такими производительными

В чем отличие PWA от нативных приложений?

Нативное приложение — это независимая программа, живущая в смартфоне. Она работает как и любая другая программа, установленная на компьютере, например, Microsoft Word.

PWA — это сайты, которые отображаются как мобильные приложения. Они как Google Docs, потому что обладают всеми функциями установленных программ, но работают прямо в браузере.

Рассмотрим несколько различий между PWA и нативными приложениями.

1. Прогрессивность

Самое лучшее в PWA — это то, что у них нет ограничений, которые есть у традиционных приложений. Это значит, что PWA могут быть максимально прогрессивными и будут работать на всех возможных операционных системах. PWA способны работать в любом браузере. PWA не назывались бы прогрессивными, если бы не смогли подстраиваться под пользовательское окружение.

Фактор, по которому PWA значительно отличаются от традиционных приложений — это прогрессивное улучшение. Это гарантирует их работу в любом ныне существующем браузере.

2. Адаптивность

В наше время пользователи заходят в интернет со смартфонов, планшетов, десктопных компьютеров, ноутбуков и других устройств.

Представляя PWA общественности, предполагалось, что все, кто будет пользоваться ими, будут делать это с десктопного компьютера. Адаптивный дизайн — это тип дизайна, когда сайт перестраивается под размеры и параметры устройства, на котором он открыт.

Адаптивный дизайн делает PWA прогрессивным и доступным на большом количестве устройств.

3. Независимость от интернет-соединения

Все понимают, что мы не можем зайти на сайт, если отключился интернет. Тем не менее многие нативные приложения позволяют продолжать работу с ними, несмотря на низкую скорость интернета или его полное отсутствие. PWA позволяет пользователям взаимодействовать с приложением независимо от интернет-соединения. Это становится возможным из-за заблаговременного кэширования данных приложением. Кэширование производится технологией, известной как Service Workers. Она предоставляет программный метод кэширования ресурсов.

4. Подобность приложениям

Независимо от того, что PWA выходят за рамки традиционных приложений, важно отметить, что они всё равно должны поддерживать структуру, подобную приложениям. Это одно из самых больших различий между PWA и веб-сайтом. Существует много сайтов, которые состоят из нескольких простых страниц со статичным контентом, таким как контактная информация, статьи в блоге и предоставляемые услуги. Чтобы такой сайт считался PWA, он должен содержать интерактивные функции, которые вызываются пользователем. Его можно добавить на рабочий стол устройства и пользователь сможет взаимодействовать с приложением как если бы оно было нативным.

Зачем нам нужны прогрессивные веб-приложения

PWA помогают решить такие проблемы, как низкая скорость интернета, долгая загрузка сайта и интерактивность. Это является веской причиной для использования прогрессивных веб-приложений. Вот некоторые из основных возможностей, которые предоставляют PWA:

• Скорость. PWA всегда загружаются быстро. С момента, когда пользователь загружает приложения до момента, когда он начал работать с ним, всё происходит невероятно быстро. Также быстро можно запустить приложение повторно без подключения к сети.
• Надежность. Благодаря технологии Service Workers, можно полностью загрузить изображение на экране пользователя, даже если отключился интернет.
• Интеграция. С PWA всё загружается плавно и бесшовно. Это из-за того, что приложение находится на устройстве пользователя, оно способно отправлять push-уведомления и имеет доступ к функциям устройства как нативные приложения.
• Интерактивность. Раз мы можем посылать уведомления пользователю, то мы можем повысить его заинтересованность и вовлекать в работу с приложением.

Как создать PWA

Вот четыре минимальных требования для приложения, чтобы оно стало PWA.

1. Манифест веб-приложения

JSON-файл предоставляет мета-информацию о приложении. В ней содержится информация об иконке приложения, которую пользователь обычно видит после установки, фоновый цвет, полное название и короткое название приложения для отображения.

2. Service Workers

_{Автор иллюстрации: simform.com/blog}

Service Workers — это воркеры, управляемые событиями, они работают в фоновом режиме приложения. Они действуют как посредники между сетью и приложением, способны перехватывать запросы сети и кэшировать информацию в фоне. Также могут использоваться для загрузки информации для оффлайн-режима.

3. Иконка

Приложение отображает иконку и кнопку “Добавить на главный экран”, которая позволяет установить PWA на рабочий стол устройства пользователя. Этот инструмент помогает сгенерировать иконки в различных форматах, что очень удобно.

4. Передача по протоколу HTTPs

Чтобы быть PWA, веб-приложение должно работать через защищенную сеть. С сервисами, такими как Cloudflare и LetsEncrypt, очень легко получить SSL-сертификат. Защищенный веб-сайт — это не только хорошая практика, но также и гарантия того, что ваше веб-приложение будет считаться надежным. Особенно для пользователей, которые опасаются взлома и тайных атак, доверяя только проверенным сайтам.

Преимущества PWA

1. Безопасность

Не жертвуя производительностью и безопасностью, PWA предоставляют пользователям привычный опыт работы с приложением. Один из главных факторов в интернете — это гарантия безопасности, особенно когда это касается кражи личных данных, их распространение или взлом. PWA способны противостоять этой проблеме. Так как они передаются через HTTPs, то предоставляют массу преимуществ как для пользователей, так и для разработчиков.

2. Легкие обновления

Когда мы имеем дело с постоянно развивающимся интернетом, то обновления приложений очень важны для улучшений, нового функционала, устранения багов и мелких неисправностей. У PWA есть преимущества в том, что обновления загружаются непосредственно разработчиками, а не пользователями. Новый функционал и обновления добавляются удаленно командой разработки. Пользователи увидят изменения и улучшения, но им не потребуется скачивать эти обновления самостоятельно.

3. Доступ отовсюду

У приложений есть недостатки в том, что их нужно периодически обновлять, они могут быть слишком большими для загрузки или несовместимы с некоторыми устройствами. Есть ряд факторов, которые делают их сложными в установке и использовании. И тут на помощь приходят PWA. Потому, что такие приложения — просто интерактивные веб-сайты, которыми могут пользоваться все, у кого есть браузер и доступ в интернет.

PWA не нужно загружать и думать о совместимости с устройством. Не нужно переживать из-за того, что у пользователя недостаточно свободного места на устройстве. Программы с функциональными настройками требуют обновлений время от времени. PWA же, напротив, не нуждаются в ручных обновлениях. Новая версия выходит и становится сразу же доступна, когда пользователь просто заходит на сайт.

Заключение

PWA, бесспорно, являются следующим шагом в предоставлении интерактивности и функциональности веб-приложений. Технология PWA делает процесс доступа к функциям приложения удобным для пользователей. Эта технология однозначно быстро станет доминирующей в мире разработки приложений. Чем раньше вы воспользуетесь этой возможностью в своей отрасли, тем быстрее вы извлечете из нее пользу.

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта — Маркетинг на vc.

ru

{«id»:13755,»url»:»\/distributions\/13755\/click?bit=1&hash=4a49bc9ad259aa8d20fdf5f5cb6cf844e7de4bb2ba8ca3a458efcedefcf5ada8″,»title»:»\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 vc.ru»,»buttonText»:»»,»imageUuid»:»»,»isPaidAndBannersEnabled»:false}

Приветствую. На связи Евгений Данилюк и по профессии я интернет-маркетолог. Сегодня хотел бы поговорить о технологии, которая помогает превратить сайт в приложение.

56 139
просмотров

Хочу обозначить, что цель этой статьи – рассказать как можно большему количеству людей о том, что есть такая технология. Она называется PWA.

Записал видео, для тех кто не хочет читать много текста

Что такое PWA

PWA или Progressive Web Application – технология, которая позволяет клиентам установить ваш сайт на смартфон как приложение. На русский язык переводиться как «прогрессивное веб-приложение».

Теперь не нужно разрабатывать отдельно сайт, приложение под iOS и приложение под Android. Достаточно иметь и поддерживать только сайт.

Приложения на базе PWA мы используем чаще, чем кажется на первый взгляд.

Бренды Twitter, Tinder, Uber, Telegram, Starbucks, Forbes, AliExpress, Aviasales используют приложения на базе PWA как основе или в дополнение к мобильному приложению.

Преимущества приложения на базе PWA

1. Позволяет отправлять Push-уведомления.
2. Разработка и поддержка на 70% дешевле, чем у мобильных приложений.
3. Экономия на повторном привлечении клиента, так как нет расходов на инструменты возвращения клиента (ретаргетинг, ремаркетинг).
4. Не нужно размещать приложение в AppStore и Google Play. Его можно скачать напрямую с вашего сайта.
5. Работает быстрее чем сайт.
6. Работает без интернета.
7. Размер PWA приложения, как правило, не превышает 1 мб. Это меньше, чем мобильное приложение.
8. PWA приложение работает с функциями: геолокация, камера, микрофон.

Недостатки PWA приложения:

1. На момент написания статьи у PWA приложение нет возможности отправлять уведомления на iPhone, так как в iOS браузер по умолчанию Safari. Однако в iOS 14 Apple добавила функцию выбора браузера по умолчанию. Это означает, что если пользователь выберет стандартным браузером не Safari, то уведомления можно будет отправлять и на iPhone.
2. Также PWA приложения не поддерживают функцию Touch ID и ограниченно работают с функцией Bluetooth.

Какие задачи можно решать при помощи приложения на базе PWA

• Стимулировать повторные продажи.
• Упрощать поиск компании. Доступ к компании в 1 нажатие на экране.
• Повышать узнаваемость бренда. Иконка (логотип) компании всегда на виду у пользователя
• Повышать средний чек сделки, допродавая продукты при помощи Push-уведомлений.
• Оставаться на связи с клиентом. Отаравляйте клиенту уведомления о том, что товар прибыл в пункт самовывоза. Или что товар будет доставлен сегодня.
• Экономить на рекламе. Теперь не нужно настраивать догоняющую рекламу с новой акцией. Достаточно отправить уведомления, которое точно заметят ваши клиенты.
• Избавиться от конкуренции в поисковой выдачи. Ваши клиенты обращаются через приложение, в котором нет конкурентов, в отличии от поисковой выдачи.

Каким бизнесам подходят PWA приложения

Подходит всем бизнесам, услугами которого клиенты пользуются регулярно.

Ниже описал подробнее как можно использовать приложение на базе PWA

1. Клининги

• Клиенты смогут в 1 клик повторно заказывать услугу.
• Вы сможете анализировать частоту заказов каждым клиентом и отправлять напоминания об уборке заранее, увеличивая частоту покупок

2. Рестораны, кафе, пиццерии и сети доставок

• Клиенты смогут в 1 клик заказывать продукцию или бронировать столик.
• Вы сможете стимулировать клиентов заказывать больше путем отправки промокодов со скидками и акциями.
• Вы сможете использовать карты лояльности при помощи приложения и QR-кодов.

3. Интернет-магазины

• Клиенты смогут найти вас в 1 клик и выбрать необходимый товар без отвлечений. И если они положили товар в корзину, но при этом не оформили заказ, вы можете простимулировать их к покупке. Делается это при помощи уведомлений со скидкой или подарком.
• Клиенты смогут выбирать товар без интернета. А когда он появиться, данные автоматически подгружаются к вам.
• Уведомляйте клиента об акциях или изменениях статуса заказа.

4. Онлайн курсы

• Сможете создать страницу, где будут доступны ваши курсы и открывать для своих клиентов.
• Вы сможете присылать уведомления о начале онлайн мероприятия, если проводите занятия, марафоны или вебинары.

5. Онлайн СМИ

• Ваши пользователи смогут найти вас в 1 клик, что повысит частоту посещений вашего ресурса.
• Пользователи не будут отвлекаться на другие сайты, что повысит вовлеченность.
• Пользователи смогут получать уведомления о новых публикациях на интересующие их темы.
• Вы сможете получать дополнительную прибыль, рассылая рекламные объявления, при помощи Push-уведомлений.

6. Барбершопам и бьюти сфера.

• Вы можете анализировать частоту заказов каждым клиентом и отправлять ему напоминания о необходимости посещения вашего заведения заранее.
• Допродавайте клиентам средства по уходу при помощи push-уведомлений.

7. Сетевые компании

• Вы сможете уведомлять клиентов о поступлении новых продуктов, или о статусе доставке.
• Пользователи смогут найти вас в 1 клик, что повысит частоту посещений вашего ресурса.
• Клиенты смогут выбрать необходимый товар без отвлечений. И если они положили товар в корзину, но при этом не оформили заказ вы можете напомнить об этом и простимулировать к покупке при помощи уведомлений со скидкой или подарком.
• Клиенты смогут выбирать товар без интернета. А когда он появиться, данные автоматически подгружаются к вам.

8. Автосервисы

• Напоминайте клиентам о замене масла или других периодических работах по обслуживанию авто.
• Уведомляете клиента о статусе ремонта.
• Благодарите постоянных клиентов подарками.
• Делайте допродажи товаров по уходу за автомобилем при помощи push-уведомлений

9. Сервисы по шерингу техники

• Пользователи смогут найти вас в 1 клик, что поможет им оперативно решать возникшие проблемы.
• Отправляйте уведомления о состоянии техники (Автомобиль забронирован) или о новых акциях и скидках.
• Благодарите постоянных клиентов подарками.

Как происходит процесс установки

Вы можете сами пройти процесс установки, открыв в браузере на мобильном устройстве страницу.

1. Пользователь переходит на сайт и видит всплывающее окно с предложением. Например: «Пицца со скидкой 25% при заказе с приложения».

2. Пользователь в один клик устанавливает приложение.

3. Пользователь переходит в приложение, внутри этого приложения открывается сайт и пользователь делает заказ со скидкой.

4. Приложение установлено. Следующий шаг, это отправка пуш уведомлений пользователю.

Сравнение PWA с сайтом и мобильным приложением

О чем еще стоит упомянуть

• PWA можно загрузить и продвигать в Google Play.
• PWA можно создать для части сайта.
• Приложение обновляется при помощи кэша, то есть каждый раз, когда пользователь заходит в приложении с включенным интернетом.
• Отслеживать установку приложений можно при помощи сервиса «Яндекс. Метрика».

Подробнее про разработку PWA приложения можете узнать на специальной странице.

На этом пока все. Вкратце описал, что такое приложении на базе PWA технологии и как его можно использовать именно с позиции маркетолога.

Далее планирую сделать еще 2 статьи и поделиться результатами внедрения такого приложения, а также рассказать подробнее как составить и отправить Push-уведомление в приложении на базе PWA.

Если остались вопросы, задавайте их в комментарии. Идеи по использованию или опыт использования таких приложений также пишите в комментарии. Интересно узнать.

Спасибо за уделенное время!

12 лучших примеров прогрессивных веб-приложений (PWA) в 2022 году

Содержание

Ни для кого не секрет, что производительность жизненно важна для успеха и прибыльности любого онлайн-проекта. Как следствие, веб-сайты в разных отраслях используют новый стандарт Progressive Web Apps (PWA) для повышения своей производительности.

Передовая технология, поддерживаемая Google, направлена ​​на обеспечение высокого уровня производительности независимо от устройства или состояния сети. Они достигают этого, дополняя PWA нативными качествами приложений, которые являются надежными, быстрыми и привлекательными. Несмотря на то, что концепция PWA привлекает большое внимание, она является относительно новой для большинства людей.

Чтобы лучше понять, чем прогрессивное веб-приложение отличается от обычных адаптивных веб-сайтов, лучше всего взглянуть на несколько хороших примеров PWA.

Вот список впечатляющих примеров прогрессивных веб-приложений в различных отраслях, чтобы вы могли сами испытать новые веб-технологии.

Starbucks PWA для мобильных устройств и настольных компьютеров

Стремясь предоставить доступный и удобный онлайн-заказ для всех своих клиентов, Starbucks создала PWA системы заказов в Интернете, которая обеспечивает аналогичный опыт их существующего родного приложения. Другими словами, благодаря возможности работать в автономном режиме Starbucks PWA позволяет своим клиентам просматривать меню, настраивать свои заказы и добавлять товары в свои корзины — и все это без постоянного доступа к Интернету. После подключения к Интернету они могут просматривать цены для конкретных мест и размещать заказы на еду и напитки.

Поскольку большая часть PWA доступна без подключения к сети, она отлично подходит для мобильных клиентов, которые могут подключаться и отключаться в течение дня, или для развивающихся рынков, таких как сельские районы, где подключение менее надежно. Запустив новую PWA для заказов, Starbucks уже добилась значительных результатов. PWA на 99,84% меньше на , чем существующее приложение Starbucks для iOS, что делает веб-приложение любимым среди пользователей. В результате они удвоили количество веб-пользователей, размещающих заказы каждый день, и теперь пользователи настольных компьютеров делают заказы примерно с той же скоростью, что и мобильные пользователи.

Debenhams PWA для мобильных и настольных компьютеров

Говоря о брендах, которые трансформируют свой покупательский опыт в индустрии моды, нельзя не упомянуть Debenham. Известный британский бренд понял, что, несмотря на то, что их старый веб-сайт увеличил мобильный трафик, коэффициент мобильной конверсии не рос. Поэтому они пришли к выводу, что пришло время для цифровой трансформации, иначе их цифровой и общий рост вскоре замедлится. Бренд искал решение, которое могло бы обеспечить удобство работы пользователей, особенно на мобильных устройствах.

PWA был ответом для команды Debenhams. После преобразования их старого веб-сайта в PWA их усилия, безусловно, окупились. Они улучшили качество обслуживания клиентов, убрав препятствия на пути клиента — медленные страницы, сложная для навигации структура, сложный процесс оформления заказа. В целом Debenhams добился увеличения дохода от мобильной рекламы на 40% и увеличения числа конверсий на 20% .

BMW PWA на мобильных и настольных компьютерах

Будучи новаторским брендом в автомобильной промышленности, BMW доказывает, что они не уклоняются от новых технологий, будь то их автомобили или их веб-сайт. Чтобы улучшить качество обслуживания клиентов, бренд стремился предоставить качественный и привлекательный контент, отражающий их ценности.

Новая PWA от BMW определенно вызывает у пользователей восхищение. Первое, что заметит каждый, — это изображения и видео в высоком разрешении, и Интернет загружается практически мгновенно со всеми этими функциями (в 4 раза быстрее, чем на старом сайте). Их отчеты также показали другие впечатляющие цифры после создания PWA: 4X увеличение количества людей, переходящих с главной страницы на сайт продаж BMW; 50% рост числа мобильных пользователей и 49% больше посещений сайта по сравнению со старым сайтом.

Flipboard PWA для мобильных и настольных компьютеров

Самый популярный в мире социальный журнал Flipboard позволяет читателям быть в курсе всех тем, новостей и событий, которые им интересны, из одного места. В зависимости от интереса пользователя платформа объединяет новости и истории со всего мира в формате журнала. Пользователи Flipboard могут следить за своими любимыми источниками и сохранять истории, изображения и видео в свои собственные журналы Flipboard, чтобы читать их позже или делиться ими с другими.

Flipboard — один из лучших примеров PWA для онлайн-новостей. PWA сводит к минимуму использование данных, обеспечивая удобный и быстрый просмотр в красивом интерфейсе. До запуска PWA Flipboard был мобильным приложением, которое представлено только на мобильных устройствах. Следовательно, теперь PWA позволяет Flipboard предоставлять возможности, аналогичные их полнофункциональному нативному приложению в Интернете, что делает его доступным и для пользователей настольных компьютеров.

Soundslice PWA для мобильных и настольных компьютеров

Soundslice — это передовое программное обеспечение для музыкального образования в Интернете, которое революционизирует способы изучения и практики музыки музыкантами. Компания использует PWA, чтобы предоставить лучший опыт создания музыки и обучения. Программное обеспечение на основе PWA делает процесс изучения музыкального произведения проще и эффективнее для музыкантов-самоучек с помощью инновационного музыкального проигрывателя. Проигрыватель Soundslice позволяет пользователям выучить музыкальное произведение, читая и слушая его на любом устройстве, будь то телефон или настольный компьютер с большим экраном. Кроме того, учителя музыки могут использовать этот инструмент для создания интерактивных уроков музыки. Компания Soundslice, специализирующаяся на обучении на основе записей, также имеет магазин, в котором продаются уроки и транскрипции.

Игра 2048 PWA для мобильных и настольных компьютеров

Игра-головоломка 2048 изначально была выпущена как бесплатное приложение для Android и iOS в 2014 году. Менее чем через неделю после запуска она сразу же стала вирусным хитом с более чем 4 миллионами пользователей. Игра проста и затягивает. Описанная как «Candy Crush для любителей математики», ее цель состоит в том, чтобы объединить блоки с одинаковыми числами, чтобы в конечном итоге получить 2048. Официальная версия PWA доступна на 2048game.com, поэтому игроки могут получить мгновенный доступ из любого веб-браузера. Благодаря плавным переходам и полноэкранному режиму трудно отличить PWA от родного приложения. Кроме того, в PWA 2048 можно полноценно играть в автономном режиме.

MakeMyTrip PWA для мобильных и настольных компьютеров

Сайт MakeMyTrip.com — отличный пример PWA. Ежемесячно сайт ведущей туристической компании Индии посещают около восьми миллионов человек, причем две трети приходится на мобильный трафик. Поскольку мобильные устройства становятся наиболее предпочтительным каналом для бронирования среди клиентов MakeMyTrip, они разработали PWA, что привело к быстрому, надежному и безупречному мобильному интернету.

Новый интерфейс PWA утроил коэффициент конверсии за счет сокращения времени загрузки страницы на 38%. По сравнению со своим предыдущим мобильным сайтом MakeMyTrip показал 160% увеличение количества сеансов пользователей и снижение показателя отказов на 20% .

Uber PWA для мобильных и настольных компьютеров

По мере того, как компания выходит на новые рынки, ее веб-сайт Uber был перестроен с нуля в виде PWA, чтобы предложить возможности бронирования, сопоставимые с родным мобильным приложением. Uber PWA разработан, чтобы сделать бронирование автомобиля доступным в низкоскоростных сетях 2G. Построенное на основе концепции приложения, доступного во всех современных браузерах, PWA отлично подходит для пользователей недорогих устройств, которые могут быть несовместимы с родным приложением Uber.

Благодаря нативному интерфейсу сверхлегкого веб-приложения Uber позволяет выполнять запросы на быструю поездку независимо от местоположения, скорости сети и устройства. Основное приложение размером всего 50 КБ позволяет ему загружаться в течение 3 секунд в сетях 2G.

9. Kopa (Padpiper )

Kopa PWA для мобильных и настольных компьютеров

Kopa (ранее называвшаяся Padpiper) — это платформа, помогающая учащимся легко находить надежное жилье для школьных семестров и стажировок, а также позволяющая арендодателям быстро находить подходящих арендаторов для своих пространства. На самом деле платформа теперь поддерживает 9000 школ и имеет более 100 списков на PWA. Они проверили арендодателей и разместили отзывы, чтобы студенты могли сэкономить время на поиске наиболее подходящего жилья. После того, как учащиеся добавят рабочий адрес, они смогут искать направления работы в каждом списке на странице результатов. Веб-приложение также может связывать учащихся с другими людьми, которые работают рядом с ними, или узнавать, где находятся их одноклассники в режиме совместной работы.

Pinterest PWA для мобильных устройств и настольных компьютеров

Сосредоточившись на международном росте, Pinterest начал свой новый мобильный веб-опыт с нуля как PWA. Социальная сеть обнаружила, что только 1% их мобильных пользователей конвертируются в регистрации, входы в систему или установки приложений из-за низкой производительности на мобильных устройствах.

Осознав, что возможности улучшить конверсию огромны, они перестроили мобильную сеть с помощью технологии PWA, что привело к нескольким положительным результатам: затраченное время увеличилось на 40 % по сравнению с предыдущей мобильной сетью, доход от рекламы, создаваемой пользователями. вырос на 44 %, а число активных пользователей – на 60 %. круглосуточная доставка продуктов. Наряду со своим родным приложением для Android и iOS, Yummly также доступен в веб-браузерах как PWA. Как и его родное присутствие, The Yummly PWA предлагает поисковую систему для еды, кулинарии и рецептов. Он позволяет пользователям осуществлять поиск по более чем миллиону рецептов, полученных с популярных сайтов о еде, нишевых блогов или местных продуктовых брендов. Кроме того, результаты поиска можно фильтровать по ингредиентам, диете, аллергии, питанию, цене, кухне, времени, вкусу, блюдам и т. д.

Spotify PWA на мобильных и настольных компьютерах

Ваш любимый музыкальный плеер теперь поддерживает PWA. Из-за некоторых разногласий между Spotify и Apple относительно 30-процентной комиссии магазина приложений Apple, Spotify счел своевременным возможность начать разработку PWA-версии своего приложения, как это сделали многие другие крупные бренды. По сравнению со своим родным приложением версия PWA значительно быстрее благодаря собственному уникальному и адаптивному пользовательскому интерфейсу, который меняет свой фон по мере того, как пользователь продвигается по приложению. Как и во многих других PWA, пользователям также предлагается добавить Spotify PWA на главный экран, что делает Spotify PWA более доступным и сопоставимым с другими версиями.

Подведение итогов

PWA можно применять во многих разделах технологической сферы, от игр PWA до PWA Magento. Чтобы лучше понять PWA и варианты его использования в вашей конкретной области, ознакомьтесь с другими нашими специальными статьями:

Дополнительная литература

PWA превращают веб-сайты в приложения: вот как

Возможно, вы столкнулись с веб-сайтом, который предлагает что-то вроде «установите это как веб-приложение», как я недавно сделал на веб-странице Google Meet. Это один из примеров того, как вы можете получить прогрессивное веб-приложение (или PWA). Meet PWA стал доступен в некоторых веб-браузерах совсем недавно, но несколько других сервисов Google предлагали эту опцию в течение многих лет. Другие сайты, похожие на приложения, такие как Outlook, Spotify и Instagram, являются более хорошими примерами сайтов, готовых для обработки PWA. Давайте углубимся в то, что именно представляют собой эти PWA, как вы можете начать работу с ними и какие преимущества они предлагают.

Что такое прогрессивное веб-приложение?

Интернет становится все более похожим на приложение. Веб-сайты могут доставлять уведомления, работать в автономном режиме, хранить данные в локальном кэше или постоянных базах данных и работать в фоновом режиме. Многие веб-сайты ведут себя скорее как приложения, чем как информационные сайты. Стандарт Progressive Web App дает веб-сайтам шанс стать еще на больше, чем на автономных приложений, за счет отказа от элементов браузера, которые только загромождают их интерфейс.

Spotify работает как PWA.

В прогрессивных веб-приложениях

используются те же технологии, которые используются в современных передовых веб-сайтах, включая HTML, CSS и JavaScript. Но они также используют несколько новых и менее распространенных веб-стандартов, в том числе манифест веб-приложения (для определения имени приложения, значков, URL-адреса, цветов и конфигураций) и Service Workers (открывается в новом окне), которые позволяют PWA работать в автономном режиме. без подключения к интернету.

Вам может быть интересно, почему термин прогрессивный вступает в игру. Это связано со стратегией веб-разработки, называемой прогрессивным улучшением(Открывается в новом окне). В этой стратегии разработчик сначала сосредотачивается на основном контенте и функциях, а затем добавляет дополнительные возможности, если браузер и платформа предлагают больше излишеств по краям. С прогрессивным улучшением связан адаптивный веб-дизайн, в котором контент предназначен для изменения размера для определенных платформ, таких как мобильные или настольные устройства.

К сожалению, один из моих любимых веб-браузеров, Firefox, не поддерживает PWA на рабочем столе, хотя поддерживает Android. (То же самое относится и к инновационному веб-браузеру Opera.) Mozilla работала над проектом по добавлению его в свой превосходный браузер, уважающий конфиденциальность, но организация объявила о прекращении этого проекта. Можно надеяться, что когда-нибудь в будущем ситуация изменится.

А пока давайте посмотрим, что вы можете получить от использования PWA (наряду с недостатками), как их установить на несколько платформ и какие из них мне нравятся больше всего.

Каковы преимущества и недостатки PWA?

Как уже упоминалось, PWA позволяют вам сосредоточиться на сути веб-сайта, похожего на приложение, без всего интерфейса браузера и границ окон, которые вы обычно получаете в браузере. Вы видите только одно меню — меню сайта приложения — вместо этого и меню браузера, окна поиска и панели инструментов. Эти элементы браузера иногда являются ненужными отвлекающими факторами и просто добавляют беспорядок.

Вы также можете обнаружить, что PWA содержат на больше возможностей, чем установленных приложений. «Как это может быть?» ты спрашиваешь. Что ж, многие веб-сайты обновляются постоянно, в то время как приложение обновляется только при установке обновления. Часто веб-служба сначала запускает новые функции для своего веб-сайта и только потом добавляет их в свои автономные приложения, если вообще добавляет.

Другие преимущества прогрессивных веб-приложений заключаются в том, что они легче, чем нативные приложения, и не зависят от платформы. Другими словами, разработчикам не нужно отдельное приложение для мобильных и настольных компьютеров, если на платформе работает браузер, поддерживающий PWA. В Windows нет необходимости в беспорядке реестра или вспомогательных модулях кода. Один разработчик отмечает, что Twitter Lite PWA занимает всего 3% памяти (открывается в новом окне), требуемой его родным аналогом приложения для Android. Это приносит пользу как конечным пользователям, так и разработчикам, как мы вскоре увидим.

Наконец, PWA обходят стороной магазины мобильных приложений, которые могут быть ограничительными, особенно для разработчиков, которым приходится отдавать дань уважения поставщикам платформ. Для конечного пользователя это означает невероятно быструю и простую установку.

Нет серебряной подкладки без темного облака

Одним из недостатков PWA является то, что приложение по-прежнему представляет собой веб-сайт, и хотя многие из них предназначены для продолжения работы в автономном режиме, некоторые не будут работать в полной мере без подключения. Однако эта веб-основа иногда может быть преимуществом: вы можете нажать горячую клавишу обновления браузера (F5 в Windows, Command-R в macOS), чтобы перезагрузить надоедливое веб-приложение, в то время как установленная программа, которая не отвечает, является более болезненной и часто требует перезагрузки.

Некоторые PWA также требуют, чтобы вы часто входили в систему, как на веб-сайте, где большинство приложений начинают работать сразу после их запуска. И есть определенные типы приложений, для которых PWA не подходят. Нативные приложения, запрограммированные на металле вашей системы, обеспечивают более высокую производительность: вам не захочется запускать видеоигру AAA или видеоредактор в качестве веб-сайта.

Если на вашем устройстве установлено и приложение, и PWA для одной и той же службы, это может привести к путанице при поиске нужного. Мой совет на этот счет: просто удалите родное приложение; это, вероятно, сэкономит вам системные ресурсы. Наконец, обратите внимание, что, как и в случае с окнами браузера, у вас может быть одновременно запущено несколько экземпляров одного и того же веб-приложения; это можно рассматривать как плюс (если вам нужно более одного набора контента в приложении) или как минус (если вас смущает несколько окон, запускающих одно и то же приложение).

Еще одна проблема с PWA — простая возможность обнаружения. Поскольку магазина приложений PWA нет, трудно понять, какие сайты можно установить в качестве приложений этого класса. Опыт также зависит от того, насколько хорошо разработчик реализовал функциональность PWA — некоторые предлагают четкую настройку и опыт использования, а другие — нет.

Какие PWA следует использовать?

Определенные типы веб-приложений целесообразно использовать в качестве PWA — потоковое воспроизведение музыки, общение и приложения для социальных сетей — хорошие кандидаты. Два PWA, которые я использую постоянно, — это Spotify и веб-версия Outlook, но по совершенно разным причинам.

Во-первых, Spotify: я иногда заглядывал на страницу настроек «Приложения и функции» в Windows 10 и видел, что Spotify занимает более ГБ дискового пространства. Я задавался вопросом, зачем это нужно, потому что мне не нужно приложение для загрузки каждой песни, которую я играю. После перехода на PWA приложение занимает менее 5 МБ.

Я использую Outlook Web, а не стандартное приложение Windows Mail просто потому, что оно предлагает больше надежности, скорости и возможностей. Ходят разговоры о том, что Microsoft заменит приложение Windows 10 Mail вариацией версии PWA, и, насколько я понимаю, это не может произойти достаточно скоро.

Twitter — еще один прекрасный кандидат на использование PWA, но он уже предлагает отличные нативные приложения для большинства платформ. Я начал использовать Twitter в качестве PWA, потому что приложение магазина Windows не позволяло мне легко переключаться между личной и рабочей учетными записями, в отличие от веб-версии. Google Meet, Skype и Zoom также можно установить как прогрессивные веб-приложения.

Когда-нибудь вы можете установить приложение, даже не осознавая, что это PWA, особенно сейчас, когда Windows движется к тому, чтобы включать их в Microsoft Store, в список программ в меню «Пуск» и в раздел «Приложения и функции», где вы удаляете обычные приложения. Chrome OS уже включает PWA в свой магазин приложений.

Как установить прогрессивное веб-приложение?

Большим преимуществом PWA является простота их установки, и этот процесс становится все проще для веб-браузеров с поддержкой PWA, таких как Chrome и Edge. Apple находится в особом положении, когда дело доходит до PWA: вы можете установить PWA на macOS , кроме в Safari; на iOS можно установить PWA только в Safari. Вот что вам нужно сделать, чтобы установить PWA в каждой из основных операционных систем (в порядке популярности (открывается в новом окне)).

Установка PWA на Android

Слева: установить приложение в Chrome; Центр: после того, как вы нажмете «Установить приложение»; Слева: установить в Firefox.

В браузере Chrome: Для сайтов, полностью обеспечивающих функциональность PWA, в главном меню Chrome отображается пункт «Установить приложение». После того, как вы выберете эту опцию, значок приложения появится на главном экране. (Обратите внимание, что вы можете выбрать «Добавить на главный экран» для сайтов, которые не предоставляют функции PWA.) Варианты длительного нажатия по-прежнему включают «Удалить», но контрольный параметр ниже — «Настройки сайта» — то, чего вы не видите для установленных в магазине. Программы.

В Firefox: Для сайтов, которые можно превратить в PWA, в меню Firefox есть простая опция «Установить». После того, как вы коснетесь этого варианта, вы увидите диалоговое окно «Добавить на экран». Значки домашнего экрана для PWA, созданных Firefox, имеют небольшой оранжевый логотип Firefox в правом нижнем углу основного логотипа приложения. Как и в случае с приложениями, созданными в Chrome, вы просто выбираете «Удалить» в контекстном меню при длительном нажатии, чтобы избавиться от одного из них. В отличие от созданных в Chrome, вы не видите выбор настроек сайта для более реального ощущения приложения.

Рекомендовано нашими редакторами

Chrome, Edge, Firefox, Opera или Safari: какой браузер лучше для 2022 года?

Stop Trackers Dead: лучшие приватные браузеры на 2022 год

Blackout: как включить темный режим в браузере

Установка PWA в Windows

В Edge: Веб-браузер Windows по умолчанию предоставляет наилучший вариант для установки PWA в настольной операционной системе Microsoft. Это потому, что оно помещает приложение в меню «Пуск», как и любое другое приложение, которое вы устанавливаете обычными способами (либо с помощью загруженного установщика программы, либо из приложения Microsoft Store). Вот как это работает:

1. Перейдите на веб-сайт, который вы хотите установить в качестве PWA.

2. Если приложение можно установить как PWA, вы можете щелкнуть значок в правой части адресной строки, который выглядит как три квадрата и знак плюса (текст при наведении: «Приложение доступно. Установить [ имя приложения ]) или вы можете выбрать «Приложения» в раскрывающемся меню с тремя точками, а затем нажать «Установить [имя приложения]». Для некоторых PWA окно «Установить» появляется автоматически.

3. Вот и все. Ваше новое приложение появится в меню «Пуск», получит отличительный значок на панели задач (не значок Edge) и может быть преобразовано в ярлык на рабочем столе. Если вы хотите удалить PWA, вы можете сделать это из контекстного меню меню «Пуск», на странице «Приложения и функции Windows» или на странице «Управление приложениями» Edge.

В браузере Chrome: Как и в случае с Edge, в Chrome есть кнопка в адресной строке, которая появляется для сайтов, предлагающих функции PWA. (Обратите внимание, что браузер Brave для конфиденциальности и крипто-заработка имеет поддержку PWA, которая почти идентична Chrome.)

1. Нажмите кнопку «Установить приложение» в адресной строке или выберите «Установить» [ имя приложения ] в раскрывающемся меню с тремя точками в правом верхнем углу.

2. После этого вы увидите приложение без границы браузера и значок для него в меню «Пуск». Обратите внимание, что вы можете удалить созданные Chrome PWA только из их окна или браузера Chrome, а не из настроек Windows. Если вы выберете «Удалить» в меню «Пуск», PWA бесполезно приведет вас к старой панели управления «Программы и компоненты».

Установка PWA на iOS и iPadOS

Как упоминалось выше, Apple разрешает Safari создавать PWA только в iOS и iPadOS — сторонние браузеры исключены. Safari не использует термины , установка и приложение, , как это делают все другие браузеры, поддерживающие PWA. Чтобы установить его на iOS или iPadOS, загрузите сайт с поддержкой PWA, выберите стрелку вверх «Поделиться» в нижней части экрана и выберите «Добавить на главный экран». Обратите внимание, что вы можете сделать то же самое для любого веб-сайта, но вы не получите автономную функциональность настоящего PWA.

Когда я создал PWA для Instagram, значок и приложение выглядели так же, как в версии App Store, но вместо параметра «Удалить приложение» в меню длительного нажатия я увидел вариант «Удалить закладку». Обратите внимание, что значки PWA не отображаются в библиотеке приложений iOS 14, поэтому вы не получите такого полного опыта работы с приложениями с PWA на мобильных устройствах Apple, как на других платформах. Думаю, это не должно вызывать большого удивления, учитывая антагонистическую позицию Apple по отношению к открытым системам.

Установка PWA на macOS

Установка PWA в Chrome под управлением macOS.

В macOS установка PWA работает так же, как и в Windows, но браузер Safari по умолчанию не предлагает способа установки сайта в качестве PWA. Ваше новое приложение появится в Launchpad, но не в папке Applications Finder.

Приложения, созданные с помощью Chrome или Edge, прекрасно получают верхнее меню, названное для нового приложения, а не для браузера, и я даже мог бы сделать Outlook PWA своим клиентом для обработки электронной почты по умолчанию. Однако вам необходимо удалить PWA из браузера, а не из ОС.

Установка PWA в ОС на базе Linux

Вверху показана установка PWA в браузере Edge, работающем в Linux, внизу показано диалоговое окно в Google Chrome.

В Linux вы можете настроить PWA в веб-браузерах Brave, Chrome и Edge (бета-версия на данный момент) так же, как и в других настольных ОС. Вы видите ту же кнопку «Установить приложение» на панели инструментов, и простое нажатие этой кнопки создает PWA. Я тестировал это в Ubuntu. Значок приложения PWA отображается на странице «Приложения», а на панели «Действия» появляется отличительный значок приложения, а не значок браузера.

Обратите внимание: если вы используете Brave или браузер Chromium с открытым исходным кодом, вы не получите этих преимуществ. Вы все еще можете создать версию сайта без границ браузера, но вы должны открыть ее из основного приложения браузера.

Установка PWA в Chrome OS

ОС Google для настольных ПК ведет себя немного иначе, чем браузер Chrome на других платформах: в адресной строке браузера есть обведенная кнопка со знаком плюс, а также пункт меню «Установить» [ имя приложения ]. Выбор любого из них приведет к тому, что вас перенаправят в магазин приложений Google Play, из которого вы установите приложение. Да, это все еще PWA, но вы получаете его из магазина приложений. Это был мой опыт установки Twitter PWA, но для Outlook Web нажатие той же кнопки устанавливало PWA так же, как вы видите на ПК с Windows.

This entry was posted in Популярное