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

Проблема

Аналитики снова говорят о том, что нативные приложения по-прежнему занимают больше времени (87%), чем мобильный Интернет (13%). Интересно, что 87% занимают только три лучших приложения. Итак, что происходит с 5 миллионами приложений в App Store и Google Play? Являются ли они современными терракотовыми солдатами, оставленными для забвения? К сожалению, да. Кроме того, 49% пользователей не загружают новое приложение в месяц; ну, нам не нужна аналитика, чтобы сказать нам это. Сколько из нас загружают новое приложение каждый месяц? Очевидно, что нативная разработка приложений не способствует конверсии или удержанию пользователей.

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

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

Прогрессивное веб-приложение

Прогрессивные веб-приложения — это надежные, быстрые и привлекательные веб-приложения; термины, которые ранее использовались для описания нативного взаимодействия с приложением. Независимо от того, находятся ли пользователи в режиме полета, входят ли они в туннель метро или они отступили в самые глубокие уголки мира, PWA доставляют товары. При использовании прокси-сервера на стороне клиента сетевые запросы обслуживаются изолированной средой (если она доступна) вместо того, чтобы выдавать сообщение «Сервер не найден» или «Нет подключения к Интернету». Надежно — проверено!. Производительность всегда была постоянным усилием и всегда будет таковой. Но благодаря пониманию того, как HTML, CSS и JavaScript рендерятся с помощью Critical Render Path, и оптимизации полезной нагрузки между клиентами и серверами, мобильные веб-приложения можно настроить так, чтобы они обеспечивали работу, подобную нативной. Быстро — проверьте!. Нативные приложения привлекательны, потому что

Их можно установить на домашний экран
Они предлагают push-уведомления
Они работают в автономном режиме

PWA поддерживают вышеперечисленные 3 функции, используя файл веб-манифеста, Push API и Service Workers; позволяя веб-приложениям быть такими же привлекательными, как и их нативные аналоги. Вовлечение — проверьте!

Было проведено множество тематических исследований PWA, в частности, от: Flipkart, Washington Post, AliExpress, Konga и exTra Electronics. Указатели, извлеченные из этих тематических исследований:

Не все захотят установить ваше родное приложение. Смиритесь с этим — вы потратили время и силы на создание этого производительного и интерактивного нативного приложения, но клиентов нет? Ну, может быть, они просто хотят войти и выйти. И не нажимайте перенаправление в магазин приложений, установите, подождите 30 секунд….
Мобильная веб-аудитория в 3 раза больше нативной и растет в 2 раза быстрее, чем аудитория приложений. Ставить имеет смысл только на охват и рост.
Чем быстрее сайт, тем выше конверсия. Сайты электронной коммерции, такие как Flipkart, AliExpress и Konga, доказали мощь оболочки приложений и прокси-серверов на стороне клиента.
Обеспечьте офлайн-опыт. Период.
Веб-клиенты, особенно приложения электронной коммерции, могут извлечь большую выгоду из push-уведомлений. Подумайте об оповещениях об изменении цен, обновлениях акций или обновлениях аукционов.
Создать файл веб-манифеста (формат JSON) очень просто, и он предоставляет пользователям отличные возможности, поэтому уже создайте документ JSON.

Начало работы с PWA

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

PWA обслуживаются через HTTPS. Отличное место для начала работы с сертификатами — https://letsencrypt.org/.

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

Файл манифеста содержит метку приложения, цвета темы, заставки и значки.

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

<link rel="manifest" href="manifest.json"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="application-name" content="JavaScript Store"> 
<meta name="apple-mobile-web-app-title" content="JavaScript Store"> <meta name="theme-color" content="#f2e058"> 
<meta name="msapplication-navbutton-color" content="#f2e058"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link rel="icon" type="png" sizes="192*192" href="jsstore.png"> <link rel="apple-touch-icon" type="png" sizes="192*192" href="jsstore.png">

Офлайн-поддержка

Офлайн-поддержку обеспечивают Service Workers, тип Web Worker, который позволяет приложениям перехватывать и переопределять фоновую обработку. По мере загрузки вашего приложения регистрация сервис-воркера запускает установку; после установки он либо обрабатывает запросы на выборку, либо прекращает работу. Шаги, связанные с настройкой сервис-воркера, являются общими для большинства приложений, и вы обнаружите, что повторяете шаблонный код в кратчайшие сроки для всех реализаций. Итак, давайте сделаем одолжение и доверимся Google —

sw-precache

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

sw-toolbox

Это помощник времени выполнения для динамического содержимого, который предоставляет общие стратегии (networkFirst, cacheFirst, quick, cacheOnly, networkOnly) для логики сервисного работника. Все, что вам нужно написать, это экспресс-маршруты, а sw-toobox позаботится обо всем остальном.

toolboxRouter.get(‘/img’, toolbox.cacheFirst) toolboxRouter.get(‘/api’, toolbox.networkFirst) toolboxRouter.get(‘/custom’, toolbox.fastest)

Всплывающие напоминания

Push-уведомления надлежащим образом привлекают пользователей соответствующим контентом, тем самым повышая удержание и лояльность. А., обеспечивается работниками сферы обслуживания. Вы правильно прочитали. Push-уведомления используют 2 API; API уведомлений для отображения информации и Push API для обработки сообщений, отправляемых с сервера. Для получения дополнительной информации о реализации push-уведомлений я предлагаю вам следовать этому руководству, чтобы создать свое первое push-уведомление.

Учитывая новые достижения в области веб-API и усовершенствования языка JavaScript, нет веских причин для создания нативных приложений. Мобильный Интернет здесь, чтобы вести.