Что такое ПВА? Простое объяснение для тех, кто не разбирается в технике

Вы должны заранее знать, что этот пост написан с точки зрения маркетолога. (Ну, я умею читать и писать в HTML и CSS, в некоторой степени понимаю Javascript, но это не делает меня технарем).

Что такое ПВА?

PWA ( Progressive Web Apps ) позволяет веб-браузеру выглядеть и работать как нативное мобильное приложение (т. е. приложения, загруженные из магазинов iOS и Android). Эти нативные приложения оптимизированы для удобной работы на мобильных устройствах и обладают некоторыми уникальными функциями, такими как push-уведомления из Интернета. Технология PWA использует возможности веб-серфинга в браузерах, таких как Chrome и Safari, так что она приближается к нативному приложению. В результате это увеличивает трафик и вовлеченность в сеть.

Термин был впервые введен Google еще в 2015 году. «Прогрессивная» часть, по словам Пита ЛеПейджа, адвоката разработчиков Google, может быть объяснена так: « по мере того, как пользователь постепенно строит отношения с приложением, оно становится все более и более мощным ». ».

Является ли PWA таким же, как веб-сайт?

Да, прогрессивные веб-приложения — это веб-сайты.

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

Быть «приложением» не означает, что PWA ограничено мобильными устройствами. Их можно реализовать и на рабочем столе. На самом деле, скорее всего, вы часто посещали PWA раньше, даже не осознавая этого. Если вы когда-либо просматривали Instagram, Pinterest или Tinder на своем ноутбуке, поздравляем! Вы познакомились с некоторыми из самых успешных пользователей PWA в Интернете.

Давайте рассмотрим пример веб-сайта PWA, так как он может помочь вам понять PWA намного проще.

Пример PWA

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

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

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

 Рекомендуемое чтение:
- Практический пример G-SP PWA: трансформация для первоклассного мобильного опыта
- 3 лучших варианта использования PWA

Советы, чтобы определить, является ли веб-сайт PWA

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

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

Одностраничный сайт

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

Так как же это работает? Ну очень просто: взгляните на активную вкладку в вашем браузере. Если сайт является PWA, при смене страниц сайт не перезагружается, то есть на вкладке браузера нет анимации «загрузки».

Мы можем сказать, что веб-сайт The New York Times не является PWA:

Давайте взглянем на наш веб-сайт SimiCart в качестве примера:

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

Сервисные работники

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

Если вы используете браузеры на основе Chrome, вы можете легко проверить это с помощью Inspector Tool. Щелкните правой кнопкой мыши на веб-сайте, который вы хотите проверить, нажмите «Проверить элемент». Затем перейдите на вкладку «Приложение» > «Сервисные работники». Вы можете легко увидеть, есть ли какие-либо сервисные работники на этом сайте.

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

Если вы хотите узнать больше о PWA Service Worker, у нас есть эксклюзивная статья, в которой вы узнаете все об этой удивительной технологии.

Безопасное происхождение HTTPS

Однако вы можете точно определить, не является ли веб-сайт PWA, по его URL-адресу. Если URL-адрес веб-сайта начинается с http:// вместо https:// , это не PWA. Это связано с тем, что PWA может работать только на веб-сайтах, работающих в безопасном домене, то есть на HTTPS .

Насколько популярен PWA?

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

Это стимулирует конкуренцию практически везде — от платформы Windows до крупных торговых площадок приложений, таких как Google Play Store.

Вы можете обнаружить, что веб-сайты многих известных имен являются PWA, такими как Telegram, AliExpress, FlipBoard и даже PWA-версиями знакомых игр PWA, таких как 2048 или Web Flap.

Преимущества PWA: что могут прогрессивные веб-приложения?

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

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

Давайте углубимся в преимущества PWA по сравнению с обычными мобильными приложениями и адаптивными веб-сайтами:

PWA против адаптивного веб-сайта

По сравнению, скажем, с веб- сайтом , PWA лучше по следующим причинам:

• Скорость: при одинаковом контенте PWA загружается быстрее, чем обычные веб-сайты, благодаря технологии Service Workers . Он работает быстро при первой загрузке и еще быстрее при второй загрузке, поскольку он предварительно кэширует все содержимое и доставляет его по мере необходимости.
• Автономный режим : автономная доступность также стала возможной благодаря технологии Service Workers. Благодаря правильно интегрированным сервис-воркерам все содержимое предварительно загружается при первом посещении PWA, а затем доставляется с помощью Javascript, что делает PWA новым подходом для веб-сайтов, чья бесперебойная работа является обязательной . У нас есть руководство о том, как заставить PWA работать в автономном режиме, на случай, если оно вам понадобится.
• Push-уведомления из Интернета. Как и родное мобильное приложение, PWA может отправлять push-уведомления на главный экран пользователя прямо из мобильного веб-браузера. Это особенно полезно для магазинов электронной коммерции, чтобы отправлять персонализированные предложения и предложения своим клиентам. Веб-продвижение для PWA Android было включено целую вечность, и, к счастью, очень скоро оно появится в PWA iOS.
• Добавить на главный экран : эта функция предлагает мобильным пользователям «установить» PWA. После того, как пользователь примет приглашение, PWA будет добавлено на домашний экран мобильного устройства и будет работать как любое другое установленное приложение. Вот наше руководство по добавлению PWA на главный экран. Не пропустите!

Старая подсказка «Добавить на главный экран» в Chrome будет выглядеть примерно так:

 >> Рекомендуемая литература: Полное сравнение PWA и адаптивного веб-сайта

PWA против родного приложения

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

• Кроссплатформенность : после создания PWA к нему можно получить доступ через любые мобильные платформы, такие как Android, iOS или Windows, поскольку PWA основано на браузере, а не на ОС.
• Актуальность : изменения, внесенные в PWA, вступят в силу немедленно, как только пользователи обновят страницу.
• Индексируемость : поскольку технически PWA все еще является веб-сайтом, его содержимое может быть проиндексировано и доступно для поиска в поисковых системах, таких как Google. Это открывает возможности для практики SEO (поисковая оптимизация), что позволяет PWA охватить большую базу пользователей по сравнению с нативным приложением.
• Нет необходимости публиковать : с собственными приложениями процесс публикации в магазинах приложений иногда может быть настоящей проблемой. Представьте, что вы отправляете свое приложение в магазины приложений, взволнованно ожидая 5 дней, только для того, чтобы получить отказ по причине, которую вы перечитываете 10 раз и все еще не понимаете, о чем идет речь. А в некоторых случаях ваше приложение никогда не будет принято. (Секс-шопы или вейп-продукты, кто-нибудь?). С PWA нет отправки приложения. Какое облегчение! Если вы хотите опубликовать свои PWA в Apple Appstore, Google Play и Microsoft Store, вот как это сделать!
• Низкая стоимость разработки : поскольку PWA можно разработать один раз, а затем сделать доступным для любых мобильных платформ и браузеров, которые его поддерживают, стоимость разработки PWA относительно невелика по сравнению с нативными приложениями. Другая причина заключается в том, что PWA использует языки программирования и технологии, которые более понятны и имеют гораздо большую базу разработчиков.

 Рекомендуемое чтение:
- Прогрессивное веб-приложение или нативное приложение: что вам больше подходит?
- Преимущества PWA для электронной коммерции

недостаток PWA

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

PWA, несмотря на свои отраслевые характеристики, все же имеют свои недостатки:

• Доступность

Поскольку технология все еще нова и все такое, в настоящее время нет рынка приложений для PWA, что, в свою очередь, в некоторой степени снижает его способность охватить более широкий круг аудитории. Тем не менее, есть движения от известных компаний, таких как Microsoft, с их включением PWA в Microsoft Store, что делает будущее всех вещей PWA в Windows 10 не таким уж надуманным.

• Связь с другими установленными приложениями :

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

Часто задаваемые вопросы

Для чего используется PWA?

Быстрое, надежное и приятное в использовании веб-приложение можно использовать для многих целей. Например, Tik Tok, PWA от Aliexpress заставляют людей знакомиться с сайтами, таким образом побуждая их загружать собственные приложения. Spotify использует PWA для дальнейшей оптимизации производительности и скорости отклика своего веб-сайта, тем самым предлагая своим пользователям еще один вариант, помимо загрузки своего приложения. Такие игры, как pacman или 2048, также используют PWA для охвата большего числа веб-пользователей.

В чем разница между PWA и обычным приложением?

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

Работают ли PWA только на мобильных устройствах?

Нет, PWA работает как на ПК, так и на мобильных устройствах и планшетах.

Какой язык программирования PWA?

PWA создан с использованием популярного языка программирования и веб-технологий, включая HTML, CSS, Javascript и WebAssembly.

Вывод

«Заменит ли PWA нативные приложения?»

Мы думаем, что нет.

Пока что.

По состоянию на четвертый квартал 2019 года в Google Play находится около 3 миллионов приложений, а в Apple App Store – более 2 миллионов приложений (Statista, 2019). Это число все еще растет, и не похоже, что все эти приложения будут заменены в ближайшее время. Пользовательская привычка — это вещь, и ее нелегко изменить.

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

На самом деле, статистика показывает, что задержка внедрения PWA на 1 месяц может привести к потере дохода в размере до 1,4 миллиона долларов и еще 6,8 миллиона долларов, если бренды решат отложить его на шесть месяцев.

Для владельцев магазинов электронной коммерции, которые ищут универсальное идеальное решение Magento PWA , здесь, в SimiCart, мы предлагаем полный пакет для вас и вашего магазина.