В этой статье мы рассмотрим основы того, что такое прогрессивное веб-приложение (PWA), изучим некоторые примеры из реальной жизни и исследуем другие области применения и ситуации, в которых PWA может быть эффективно использован.
В настоящее время значительное количество людей подключено к Интернету практически везде, где бы они ни находились. Однако существует еще большее число пользователей с прерывистым доступом, таких как пользователи мобильных тарифных планов, общий доступ к Интернету и т. Д. Удовлетворение этим пользователям требует изменений в потоке информации, к которому мы привыкли.
Позволяя пользователям продолжать просматривать веб-страницы, находясь в автономном режиме, обслуживая уже посещенные страницы, можно сохранить посетителей и клиентов, которые в противном случае оказались бы в неведении после отключения Интернета.
Для этого даже возможно использовать кэшированные данные и программные функции, что обеспечивает интерактивность, аналогичную мобильным приложениям, но при этом пользователю не нужно загружать приложение через различные магазины приложений, а также аналогично, без необходимости их отправки в виде Что ж.
Что такое прогрессивное веб-приложение?
Когда вы пытаетесь понять, что такое прогрессивное веб-приложение, вам будет проще сравнить его с веб-сайтами и мобильными приложениями. В приведенной ниже таблице некоторые, но не все, из наиболее заметных функций обведены рамками PWA посередине, что символизирует функцию устранения пробелов в прогрессивных веб-приложениях.
| Характеристики | Интернет сайт | Прогрессивное веб-приложение | Мобильное приложение |
|---|---|---|---|
| Не в сети | НЕТ | ДА | ДА |
| App Store | НЕТ | НЕТ | ДА |
| отзывчивый | ДА | ДА | ДА |
| Searchable | ДА | ДА | НЕТ |
| Локальные уведомления | НЕТ | ДА | ДА |
| Всплывающее уведомление | НЕТ | ДА | ДА |
| Скачать для установки | НЕТ | НЕТ | ДА |
| Быстрые обновления | ДА | ДА | НЕТ |
Имейте в виду, что весь термин «прогрессивное веб-приложение» свободно содержит ряд релевантной и некоторой не относящейся к делу информации и критериев. Технически, есть четыре требования (см. Ниже), которые определяют, что такое PWA, в настоящее время поддерживаемые Google Chrome, Opera и Samsung Internet.
После выполнения этих четырех критериев разработчики могут настраивать функциональность в соответствии со своими собственными пожеланиями, поэтому мы можем видеть как автономные страницы с ошибками, так и полноценный автономный просмотр в зависимости от того, какой проект и сайт мы посещаем.
Стать прогрессивным
Для того, чтобы любой онлайн-сайт распознавался как имеющий прогрессивное веб-приложение, установленное на сервере — и, таким образом, включающий в себя запрос «Добавить на домашний экран» для пользователей — есть четыре основных требования, изложенных Google :
- сайт должен посещаться дважды с 5-минутным интервалом для квалификации
- безопасное соединение HTTPS Действителен
- JSON Manifest установлен Valid
- Сервисный работник установлен.
Сайт должен быть посещен дважды с 5-минутным интервалом для квалификации
В Google Chrome пользователям необходимо дважды посетить сайт с PWA, прежде чем браузер отобразит приглашение для установки PWA.
Это не самая надежная форма проверки, но, тем не менее, она, кажется, работает нормально, так как впервые посетители не будут засыпаны запросом, занимающим 25% экрана мобильного устройства, и, кроме того, он обеспечивает некоторый интерес пользователей. в этом конкретном сайте, видя, как они уже посетили его раньше.
Однако это простой способ определения релевантности и интереса пользователя, и можно предположить, что этот квалификационный параметр будет изменен на что-то более существенное в будущем. Но пока, похоже, разработчики Google довольны этим измерением.
Безопасное соединение HTTPS
Имея безопасное соединение с прогрессивным веб-приложением, пользователи могут чувствовать себя относительно безопасно, предоставляя разрешения для PWA.
Поскольку сетевые запросы направляются через сценарий работника сервиса, добавление https
Хотя это требование может быть сосредоточено главным образом на повышении безопасности от угонщиков, наличие безопасного соединения также помогает завоевать доверие пользователей. А так как PWA индексируются поисковыми системами, имеет смысл обслуживать и через TLS, так как это добавляет небольшую выгоду с точки зрения SEO.
Действительный JSON Manifest установлен
Предоставляя извлечение данных в формате JSON, можно затем кешировать эту информацию с помощью сервисного работника, а затем использовать оболочку приложения для загрузки правил CSS для доставки автономной версии с полными возможностями пользовательского интерфейса.
Каждый раз, когда посетитель загружает новую страницу, работник службы кэширует извлечение JSON и физически сохраняет его в оболочке приложения. Эта оболочка приложения представляет собой автономную оболочку со всеми необходимыми таблицами стилей, сценариями, изображениями, шрифтами и выводами HTML, необходимыми пользователю для отображения всей страницы без загрузки чего-либо еще.
По сравнению с веб-сайтом, PWA имеет возможность показывать данные, когда пользователи больше не подключены к Интернету.
Действительный сервисный работник установлен
Это может быть классифицировано как хлеб с маслом любого современного прогрессивного веб-приложения. Работник службы отвечает за кэширование всех файлов, обслуживание push-уведомлений, обновление контента, манипулирование данными и многое другое.
Важно понимать, что этот скрипт работает независимо от любого приложения или веб-сайта, уже существующего на веб-сервере, и работает со слушателями событий и такими командами, как «fetch», что напоминает HTTP-команды «Get / Post / Set».
Прослушивая любые сетевые запросы на сервере, но находясь в виде файла .js
Кроме того, можно отображать пользовательский контент, даже если пользователи находятся в автономном режиме, на основе их существующих данных кэша. Этот набор данных является даже манипулятивным, что означает, что мы можем кодировать функции, используя данные кэша в качестве переменных и параметров — если, конечно, применимы к соответствующему проекту.
При первой загрузке веб-сайта работник службы устанавливается локально, а затем работник службы создает так называемую оболочку приложения, содержащую кэшированные данные, такие как выходные страницы, содержимое JSON, CSS, изображения, сценарии и т. Д.
Это означает, что, хотя первая загрузка может занять несколько секунд, последующие загрузки, использующие работника службы, будут значительно быстрее из-за высокой скорости, которую доставляют работники службы обслуживания, и того, как они функционируют за счет кэширования контента.
Как только эти четыре требования будут выполнены правильно, пользователям телефонов Android и других поддерживаемых устройств и браузеров будет предложено добавить PWA на домашний экран, где у него будет иконка, как в обычном приложении, и он откроется в браузере.
Разработчики должны убедиться, что пользовательский интерфейс напоминает существующий веб-сайт или приложение, или, возможно, полностью разработать новый пользовательский интерфейс для пользователей PWA. Полная свобода в этом отношении — то, что в первую очередь заинтересовало некоторых разработчиков этой тенденцией.
Плюсы и минусы прогрессивных веб-приложений
Плюсы прогрессивных веб-приложений включают следующее:
- лучшая скорость и производительность по сравнению с веб-сайтами
- безопасность
- автономные возможности
- Добавить на домашний экран
- всплывающее уведомление
- лучшие показатели отказов
- преодоление разрыва между мобильными приложениями и веб-сайтами
- чувствует себя как приложение
- нет заявок в App Store / отклонений.
Есть некоторые минусы, в том числе следующие:
- ограниченная поддержка браузера
- ограниченный нативный доступ к API
- нет записей в App Store
- не все текущие PWA используют ссылки для своей структуры страницы, создавая PWA с вкладками, которые не могут быть связаны и, следовательно, не обнаруживаются поисковыми системами.
Сценарии использования
Для определенных типов веб-сайтов и мобильных приложений имеет смысл разработать PWA для действий в ситуациях, когда веб-сайт или приложение не оправдывают себя.
Важно понимать, что, хотя пользователи могут читать новости, добавлять товары в свою корзину в автономном режиме и т. Д., Им все равно потребуется доступ в Интернет для получения новых данных, либо для обновления информации в своем профиле, либо для добавления заказа.
PWA могут помочь сохранить эти данные для повторного подключения пользователя, но в определенных ситуациях, например, на новостных сайтах платных сетей, может быть неинтересно, чтобы эти данные отображались, когда пользователь не может нажать на какую-либо рекламу или приобрести подписку. и т.п.
В настоящее время в сети существует много разных типов PWA. Некоторые работают как полностью независимые приложения, которые также могли бы быть разработаны как нативные, такие как RioRun от The Guardian.
Другие внедрили сервисных работников в свои существующие веб-сайты, добавив офлайновые возможности через существующие уровни веб-сайтов — такие как The Washington Post , где, если вы просматриваете их веб-сайт и теряете соединение, вы все равно можете прочитать статью и получить специально закодированная оффлайн страница, предлагающая игру в кроссворды, пока вы ждете, чтобы вернуться в онлайн.
FlipKart сообщает о более чем 70% увеличении конверсий , а AliExpress — более + 104% конверсий для новых пользователей по сравнению с их сайтами.
Konga, нигерийский онлайн-ритейлер, сократила использование данных на 92%, что означает значительное увеличение времени загрузки страницы. Для их базы пользователей, которая в основном состоит из людей, просматривающих сети 2G , это может революционизировать Интернет в странах, где данные дорогостоящие, а высокая скорость ограничена.
Критицизмы
Не все были одинаково позитивно настроены к этой тенденции. Джереми Кит выразил обеспокоенность по поводу того факта, что большинство текущих PWA, как правило, скрывают свои URL-адреса, чтобы они напоминали нативные мобильные приложения, тем самым игнорируя одно из главных преимуществ прогрессивных веб-приложений, а именно возможность индексировать и выполнять поиск по просканированным ссылкам. ,
Основываясь на этой критике, Алекс Рассел, человек, ответственный за разработку PWA для Google, сказал , среди прочего:
Как и Джереми, я взволнован отсутствием доступа к URL для PWA, запущенных в более захватывающем режиме. Похоже, это будет проблемой, если вы заботитесь об URL-адресах и совместном использовании, и это тоже моя проблема — настолько, что наша команда отдала предпочтение исправлению в этом квартале.
Джереми Кит также выражает обеспокоенность по поводу того факта, что некоторые PWA вообще не поддерживают настольные веб-браузеры, работают только на мобильных телефонах, что является действительным аргументом, но не имеет прямого отношения к самим PWA. В конце концов, вебмастера и владельцы приложений должны определить, насколько хорошо должны интегрироваться их различные веб-сайты, приложения и PWA. Он пишет:
Глядя на большинство примеров прогрессивных веб-приложений, наблюдается еще более тревожная тенденция, чем возврат к поддоменам m-dot. Похоже, что большинство из них так сильно концентрируются на части «приложения», что забывают о «сети». Это означает, что они предполагают, что современный JavaScript доступен везде.
Удивительно, что было потрачено время на разработку функциональной PWA, а затем только на выпуск для мобильных телефонов, а не для Интернета. Кажется странным, что компании исключают, сознательно, определенную часть своих посетителей и пользователей. Большинство сайтов, которые я посещал, не показывали каких-либо конкретных данных, которые также не подходили бы для сети, а это означало, что кроме дополнительного времени для написания кода для Интернета, я не нашел причин не делать этого.
Округление
До сих пор прогрессивные веб-приложения показали отличные результаты, особенно с точки зрения показателей конверсии, отказов и впечатляющего повышения производительности. В сочетании с тем фактом, что владельцы веб-сайтов и компании могут создавать приложения, близкие к приложениям, без необходимости нативной разработки, автор считает, что будущее за прогрессивными веб-приложениями выглядит блестящим.
Практически любой вид бизнеса был бы полезен для внедрения обслуживающего персонала по единственной причине значительного сокращения времени загрузки. Не каждому веб-сайту требуется функциональность в автономном режиме, и не каждый веб-сайт обеспокоен показателями конверсии или отказов. Однако, учитывая относительную простоту настройки простой системы, я рекомендую любому серьезному владельцу веб-сайта изучить эту новую технологию раньше, чем позже.
Я хотел бы знать, что вы думаете, хотя. Слишком рано, чтобы идти в этом направлении? Разве такие вещи, как сокрытие URL-адресов и их отсутствие повсеместно, противоречат самому духу Интернета?