Прогрессивные веб приложения: Основы прогрессивных веб-приложений / Блог компании RUVDS.com / Хабр

PWA — это просто / Хабр

Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.

Философия PWA

Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться и «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника; и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому что где-то внутри него бьется горячее сердце работника сферы услуг (service worker’a).

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

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

Архитектура PWA

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

Целевые показатели расшифровываются следующим образом:

Надежность (Reliable) — приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
Быстрота (Fast) — взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
Привлекательность (Engaging) — делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…

С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.

Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», работать оффлайн при необходимости). Насколько далеко продвинется по этому пути разработчик зависит только от него.

PWA и нативные приложения

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

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

И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.

Google атакует iOS

Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:

— Не нужно писать различные версии для Android и iOS (и Windows)

— Не нужно регистрировать в Google Play и App Store и платить за это

— Открыт прямой выход на десктоп

До нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской.

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

Различия PWA с нативными приложениями, конечно, есть — в основном, в правах доступа к ресурсам системы, но работа в этом направлении идет даже в поле чистого HTML5, а для PWA дополнительные привилегии проблемой не будут.APK vs PWA

Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.

Технологии

Кратко рассмотрим основные движители PWA.

Service Worker

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

Из хранилищ у Service Worker’a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Но, самое главное, полная свобода для реализации бизнес логики.

Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер — который будет думать, что ответ ему пришел от сервера. Или не будет — как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.

В тоже время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker’a, чтобы превратиться в PWA.

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

С программистской точки зрения Service Worker представляет собой javascript файл, подключаемый в html коде страницы. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.

HTTPS

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

Основная встречаемая в таких случаях проблема — картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.

Application Shell

App shell — это просто скелет графического интерфейса, шаблон. Для примера, возьмем средний сайт c хидером, двумя колонками и прочим. Грубо говоря, вырежем из него контент текущей страницы и всю динамическую информацию, оставшаяся статика — app shell.

Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)

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

App shell — это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу, и многое станет проще.

Web App manifest

JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.

Push Notifications

Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов пользуют PWA технологии. А 90% тех, что пользуют, делают это только ради Push Notifications.

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

А ведь можно же предлагать подписку на второй или третий заход пользователя на сайт, когда уже понятно, что он тут не случайно.

Google PWA checklist

Push notifications must be timely, precise and relevant

Enable push notifications from the site and ensure the use cases they’re using the push notifications for are:

Timely — A timely notification is one that appears when users want it and when it matters to them.

Precise — A precise notification is one that has specific information that can be acted on immediately.

Relevant — A relevant message is one about people or subjects that the user cares about.

See our guide on creating great push notifications for advice. If your content is not timely and relevant to this user, consider using email instead.

Всё, что нужно знать о Progressive Web App (PWA) / Блог компании Wrike / Хабр

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» (Progressive Web Applications). На Хабре уже немало публикаций на эту тему, особенно интересен материал из блога компании RUVDS, из которого мы и процитируем определение PWA:

… это мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это — далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне.

Иногда возникает вопрос: а как прогрессивные веб-приложения соотносятся с нативными? Стоит ли разрабатывать PWA, если уже есть native? Прежде всего на этот вопрос, а также на множество других отвечает статья Джейсона Григсби с сайта «A List Apart», которую мы перевели для вас сегодня. Статья — отрывок из книги 2018 года. Не забудьте пожалуйста поучаствовать в голосовании.

Чтобы определиться с тем, целесообразно ли вашей организации разрабатывать собственное прогрессивное веб-приложение (PWA), задайте себе два вопроса:

1. Есть ли у вашей организации сайт? Если так, то прогрессивное веб-приложение вам, пожалуй, пригодится. Звучит банально, но это так: почти любой сайт желательно превратить в прогрессивное веб-приложение, поскольку в них заключены лучшие практики Веба.
2. Зарабатывает ли ваша организация деньги через сайт путем электронных продаж, рекламы или каким-то другим способом? Если так, то вам определенно требуется прогрессивное веб-приложение, поскольку оно может значительно увеличить выручку.

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

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

Однако, если вы ведете сайт, который каким-либо образом обеспечивает прибыль для вашей организации, вам надлежит превратить его в прогрессивное веб-приложение, и уже сейчас распланировать, как это делать. Компании, развернувшие прогрессивные веб-приложения, получают рост конверсии, вовлеченность пользователей, увеличение продаж и прибылей от рекламы. Например, у Pinterest в результате внедрения PWA основная аудитория увеличилась на 60 процентов, а генерируемая пользователями выручка от рекламы выросла на 44 процента. Пользователи West Elm стали проводить на сайте примерно на 15 больше времени, выручка от одного посещения выросла на 9 процентов.

Рисунок: Эдди Османи, Google, написал кейс-исследование о прогрессивном веб-приложении Pinterest, сравнив его как с их старым мобильным сайтом, так и с их нативным приложением.

Историй успеха, связанных с прогрессивными веб-приложениями, настолько много, что моя компания, Cloud Four, запустила сайт под названием PWA Stats, на котором ведет их учет. Вполне вероятно, что там найдется кейс об организации, похожей на вашу, и на этом примере вы сможете убедить коллег в целесообразности прогрессивного веб-приложения и для вашей компании.

Рисунок: на PWAstats.com собраны статистика и истории, свидетельствующие о действенности прогрессивных веб-приложений.

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

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

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

Нативные приложения и PWA могут сосуществовать

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

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

Расширение пользовательской аудитории

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

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

Несмотря на то, в чем вас уверяют технические блоги, мобильный веб растет быстрее нативных приложений. На сайте comScore сравнили топ-1000 мобильных приложений с топ-1000 самых помещаемых сайтов и пришли к выводу, что «аудитория мобильного веба почти в три раза больше аудитории мобильных приложений и растет вдвое быстрее».

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

Если ваше нативное приложение лежит в магазине приложений, это еще не гарантирует, что люди будут его устанавливать. Работа по раскрутке приложения и стимулирование пользователей его устанавливать дорого стоит. По данным компании Liftoff, занимающейся маркетингом мобильных приложений, средние затраты, необходимые, чтобы приложение установил один пользователь, составляют 4,12 $ и взлетают до 8,21 $ на одного пользователя, если вы хотите, чтобы человек создал себе аккаунт в вашем приложении.

Если вам достаточно повезет, и ваше приложение кто-то станет устанавливать, возникает следующая преграда: требуется убедить людей, чтобы не бросали пользоваться приложением. Когда специалист Эндрю Чен анализировал данные по удержанию пользователей на материале 125 миллионов мобильных телефонов, он обнаружил, что среднее приложение теряет 77% DAU (ежедневных активных пользователей) спустя 3 дня после установки. За 30 дней теряется 90% DAU. За 90 дней теряется более 95% DAU.

Рисунок: Лояльность пользователей в сфере мобильных приложений остается очень недолговечной. Среднее приложение теряет 95% своих активных пользователей за 90 дней.

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

Как написал Алекс Рассел в своей статье, вышедшей на Medium в 2017 году:

Пробуксовка при установке PWA гораздо ниже. Наши внутренние метрики в Google показывают, что при сопоставимых объемах баннеров PWA и баннеров нативных приложений (сравнение практически аналогично случаю «яблоки с яблоками») – баннеры PWA дают конверсию в 5–6 раз чаще. Более половины пользователей, решивших установить нативное приложение при переходе по таким баннерам, не доводят процесс установки до конца, в то время как установка PWA происходит практически мгновенно.

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

Защитите ваш сайт

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

Раньше эксплуатация защищенного сервера была делом недешевым, сложным, а также (казалось), что он работает медленнее обычного. Сегодня все изменилось. Сертификаты SSL/TLS раньше стоили сотни долларов, но сегодня провайдер Let’s Encrypt раздает их бесплатно. Многие хостинг-провайдеры сотрудничают с провайдерами сертификатов, так что настроить HTTPS у них можно в один клик. Кроме того, оказывается, что HTTPS не такой медленный, как когда-то казалось.

Сайты с HTTPS также могут переходить на новую версию HTTP под названием HTTP/2. Основное достоинство HTTP/2 в том, что он значительно быстрее HTTP/1. Многие хостинг-провайдеры и сети доставки контента (CDN) предусматривают, что при переходе на HTTPS вас подключают к HTTP/2 без всяких дополнительных действий с вашей стороны.

Если даже и такого стимула недостаточно для перехода на HTTPS, производители браузеров используют метод «кнута и пряника», подталкивая сайты к введению изменений. В качестве «кнута» Chrome начал предупреждать пользователей, что они вводят свои данные на сайт, не оборудованный HTTPS. Другие браузеры, вероятно, последуют его примеру и станут помечать сайты, работающие без шифрования, чтобы пользователи осознавали, что их данные могут быть перехвачены.

В качестве HTTPS-пряника браузеры начинают требовать от сайта возможности HTTPS как обязательные. Если вы хотите использовать новейшие и крутейшие веб-технологии, то вам не обойтись без HTTPS. На самом деле, некоторые возможности, которые раньше работали по незащищенному HTTP сегодня считаются затрагивающими конфиденциальные данные. Такова, например, геолокация. В HTTPS они ограничиваются. После некоторых раздумий кажется, что это тоже немного кнут. Пряничный кнутик?

Учитывая все это, целесообразно предоставлять вашим пользователям защищенный сайт. Так сразу исключаются страшные бессмысленные предупреждения. Вы получаете доступ к новым браузерным возможностям. Получаете выигрыш в скорости, обеспечиваемый HTTP/2. А также: готовите почву для создания прогрессивного веб-приложения.

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

Увеличивайте прибыли

Существуют многочисленные исследования, демонстрирующие корреляцию между скоростью сайта и тем, сколько времени и денег люди готовы на нем потратить. По данным DoubleClick, “53% посещений мобильных сайтов прерывается по инициативе пользователя, если на загрузку страниц уходит более 3 секунд». Компания Walmart обнаружила, что на каждые 100 миллисекунд оптимизации скорости загрузки страниц приходится до 1% добавочной выручки.

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

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

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

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

Прогрессивные веб-приложения могут ошеломительно влиять на производительность. Например, Tinder удалось сократить длительность загрузки страниц с 11.91 секунд до 4.69 секунд, разработав прогрессивное веб-приложение, причем, оно на 90% компактнее, чем их нативное приложение для Android. Сеть отелей Treebo запустила собственное прогрессивное веб-приложение и получила четырехкратное увеличение конверсии за год; показатели конверсии для возвращающихся пользователей увеличились втрое, а медианное время взаимодействия пользователя с мобильным сайтом упало до 1.5 секунд.

Обеспечьте надёжность работы в сети

Мобильные сети работают неровно. Только что у вас было скоростное LTE-соединение, и вот вы уже ползете в темпе 2G или вообще оказываетесь оффлайн. Все мы оказывались в таких ситуациях. Но большинство сайтов до сих пор делается с расчетом на то, что работа с ними будет происходить в надежной сети.

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

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

Рисунок: область заголовка в прогрессивном веб-приложении housing.com меняет цвет с фиолетового (слева) на серый (справа) при попадании в оффлайн. Тот контент, который пользователь просматривал ранее или добавил в избранное, доступен оффлайн (справа), и это разумно, так как приложение housing.com ориентировано на индийский рынок, а в Индии сетевое соединение может быть медленным и ненадежным.

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

Не отпускайте пользователей

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

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

Рисунок: Прогрессивное приложение Twitter, называемое Twitter Lite, отправляет такие же уведомления, что и нативное приложение (слева). Выбрав такое уведомление, вы сразу же переходите в Twitter Lite к тому твиту, на который оно ссылается (справа).

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

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

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

Что такое Progressive Web Apps и какие возможности они открывают для вашего бизнеса

Представьте, что ваш сайт взаимодействует с пользователем как приложение. То есть пользователь может установить его на любой гаджет, получать уведомления и работать с ним (даже без интернет-соединения). Это уже реальная технология, которую активно продвигает Google, и в этом посте я расскажу вам о ней в деталях.

Progressive Web Apps (PWA) Google анонсировал еще в 2015 году. Этот формат создания мобильных сайтов привлек внимание благодаря относительной простоте разработки и почти мгновенному взаимодействию с пользователем. Уже в мае 2016 на конференции разработчиков Google I/O The Washington Post продемонстрировал свой мобильный гибридный сайт-приложение.

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

Отличия PWA от нативных приложений

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

2. Разработчики приложений отмечают, что создать прогрессивное приложение легче и быстрее, чем обычный сайт.

3. Не нужно API с поддержкой обратной совместимости. В случае с PWA пользователи запускают ту же версию кода сайта (в отличие от классических приложений).

Анимированный пример баннера с предложением установить PWA на домашний экран от Google Developers.

И это только начало. Microsoft уже занимается решением задачи, как добавить прогрессивные веб-приложения в Windows Store. Google в мае 2016 озвучил длинный список идей для развития прогрессивных приложений. И то, что поисковые системы будут уделять особое внимание PWA в будущем, кажется неизбежным.

Присмотритесь: возможно, прогрессивные приложения — ваш золотой билет в SEO-продвижение будущего.

Зачем бизнесу создавать прогрессивные веб-приложения и почему именно сейчас?

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

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

{«0»:{«lid»:»1573230077755″,»ls»:»10″,»loff»:»»,»li_type»:»em»,»li_name»:»email»,»li_ph»:»Email»,»li_req»:»y»,»li_nm»:»email»},»1″:{«lid»:»1596820612019″,»ls»:»20″,»loff»:»»,»li_type»:»hd»,»li_name»:»country_code»,»li_nm»:»country_code»}}

Истории бизнеса и полезные фишки

Почему прогрессивные веб-приложения изменят ситуацию?

1. Пользователи могут переходить на прогрессивные приложения из ссылок в соцсетях, во время просмотра веб-страниц или непосредственно из выдачи. Согласитесь, это гораздо удобнее, чем конкурировать за просмотры с двумя миллионами доступных приложений на IOS App Store или Google Play Store.

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

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

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

5. Всплывающие уведомления, работа в автономном режиме и все другие функции прогрессивного приложения будут работать, даже если посетитель никогда его не устанавливал.

6. Обычные приложения могут быть использованы только на той платформе, для которой они созданы. Вы не можете использовать приложение на вашем компьютере так же, как на Android или iOS устройстве. Кроме того, использовать приложение могут только те, кто его установил.

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

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

7. Когда вы не в магазине приложений, то не ограничены правилами App Store и не должны платить 30% от объема продаж.

Недостатки Progressive Web Apps

1. PWA — новая технология, поэтому существует не так много примеров реализации этого формата. Те, кто рискнет, станут первопроходцами.

2. На момент публикации прогрессивные веб-приложения не доступны повсеместно. Да, Chrome и Opera начали поддержку прогрессивных Web Apps. Firefox и Microsoft взяли на себя обязательство по поддержке. Пока намерений по поддержке этого формата нет только у Apple.

Впрочем, ни одна из этих причин не является препятствием для тестирования PWA как формата уже сегодня.

В чем именно «прогрессивность» нового формата?

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

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

1. AliExpress увеличил коэффициент конверсии для новых пользователей на 104%.
2. United eXtra Electronics показал 4-кратное увеличение возвратов посетителей и на 100% повысил уровень продаж от пользователей, которые приходят в результате взаимодействия со всплывающими уведомлениями.
3. 5miles снизил показатель отказов на 50% и увеличил конверсии на 30%.
4. Konga используют на 92% меньше данных для первоначальной загрузки по сравнению с загрузкой их родного приложения.

The Washington Post создали Progressive Web App, который установлен в фоновом режиме, когда люди читают их AMP страницы в результатах поиска Google. В результате количество посещений статей выросло на 12%. От загрузки статей по 8 секунд в 2013 они пришли к 80 миллисекундам в Progressive Web App.

Почему стоит поторопиться?

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

Больше по теме:

1. Посмотрите и «пощупайте» Progressive Web Apps.
2. Разберитесь в работе PWA и сделайте свое первое приложение с курсом от Udacity.
3. Разберитесь в прогрессивных веб-приложениях вместе с представителем Google Андреем Липатцевым. Он рассказал об этой технологии на WebPromoExperts SEO Day.

Как сделать PWA на сайте за 15 минут

Одной из тем обсуждения последних двух лет является Progressive Web Apps. Представители Google активно рекламируют свою разработку и продвигают идеи в массы, а Андрей Липатцев даже приезжал в Минск (и не только) для того чтобы рассказать нам о технологии PWA и её возможностях.

Содержание:

Что такое PWA

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

Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA — кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).

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

• Работа в оффлайне
• Быстрая загрузка
• Работа по защищенному протоколу
• Умеет в push-уведомления
• Может выглядеть как полноценное приложение без строки адреса в браузере (например, как этот крайне красивый сайт)

Зачем нужно PWA

• PWA легче. Отдельные приложения из магазина могут весить 200 МБ или более, в то время как PWA может находиться в диапазоне КБ.
• Снизить стоимость привлечения пользователя (гораздо сложнее убедить пользователя установить приложение, чем посетить сайт)
• Для создания и выпуска обновлений требуется значительно меньше усилий
• Гораздо больше возможностей с URL, чем в обычных приложениях из магазинов приложений (можно делить ссылками прямом на якоря на сайте — в мобильных приложенииях так нельзя)

Главные принципы PWA

• Адаптивность: интерфейс адаптируется к размеру экрана устройства
• Похоже на приложение: PWA не похоже на веб-сайт, а скорее на приложение
• Автономность: PWA будет использовать хранилище устройства для кеширования самого себя, с возможностью работать офлайн
• Устанавливается: браузер устройства предлагает пользователю установить ваше приложение на рабочий экран устройства
• Повторное привлечение аудитории: push-уведомления помогают возвращать часть пользователей на сайт после первого взаимодействия
• Доступно для индексации: поисковые системы и хорошая SEO-оптимизация дают возможность сайту-приложению ранжироваться в поиске
• Почти всегда свежие данные: приложение обновляет себя и свой контент, когда подключается к сети
• Использует HTTPS (типа безопасно и всё такое)
• Прогрессивность: будет работать на любых устройствах, даже старых, даже с меньшим количеством возможностей (например, просто как сайт, не устанавливаемый)
• Использует обычные URL: поэтому легко делиться с кем-то информацией путём обычных урлов. 

Как сделать PWA из своего сайта

Ниже я расскажу как сделать PWA на сайте за 15 минут или даже быстрее.

В большинстве случаев можно будет использовать инструмент для поэтапного создания частей PWA: pwabuilder.

Настройка Service Worker

Часть определения Progressive Web App заключается в том, что оно должно работать в автономном режиме.

Поскольку компонент, позволяющий веб-приложению работать в автономном режиме, — это Service Worker, это означает, что Service Worker является обязательной частью PWA.

Service Worker — это JavaScript-файл, который выполняет роль посредника между веб-приложением и интернетом. Благодаря этому он может кешировать и ускорять рендеринг приложения, а также улучшать пользовательский интерфейс.

Из соображений безопасности только HTTPS-сайты могут использовать Service Workers, и это одна из причин, по которым Progressive Web App можно и нужно устанавливать только на домены с HTTPS.

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

Service Worker устанавливается в два этапа:

Создание ссылки в коде сайта

В коде всех страниц сайта необходимо указать для браузера, что у нас есть свой Service Worker по отдельному адресу. В шаблон страниц вставляется простой JavaScript код, пример:

if (navigator.serviceWorker.controller) {
  console.log('[PWA Builder] active service worker found, no need to register')
} else {
  navigator.serviceWorker.register('sw.js', {
    scope: './'
  }).then(function(reg) {
    console.log('Service worker has been registered for scope:'+ reg.scope);
  });
}

Обратите внимание! В примере выше в четвёртой строке указано название файла — sw.js. Это значит, что файл, в котором будет расположен код нашего Service Worker должен называться именно так. В противном случае браузер так и не найдёт нужный нам функционал.

Создание файла с Service Worker

В отдельном файле на сервере (например, как у меня — sw.js) необходимо разместить следующий код:

self.addEventListener('install', function(event) {
  var indexPage = new Request('index.html');
  event.waitUntil(
    fetch(indexPage).then(function(response) {
      return caches.open('pwabuilder-offline').then(function(cache) {
        console.log('[PWA Builder] Cached index page during Install'+ response.url);
        return cache.put(indexPage, response);
      });
  }));
});
self.addEventListener('fetch', function(event) {
  var updateCache = function(request){
    return caches.open('pwabuilder-offline').then(function (cache) {
      return fetch(request).then(function (response) {
        console.log('[PWA Builder] add page to offline'+response.url)
        return cache.put(request, response);
      });
    });
  };
  event.waitUntil(updateCache(event.request));
  event.respondWith(
    fetch(event.request).catch(function(error) {
      console.log( '[PWA Builder] Network request Failed. Serving content from cache: ' + error );
      return caches.open('pwabuilder-offline').then(function (cache) {
        return cache.match(event.request).then(function (matching) {
          var report =  !matching || matching.status == 404?Promise.reject('no-match'): matching;
          return report
        });
      });
    })
  );
})

Это и есть наш Service Worker, что будет делать всю работу. Существует несколько примеров работы Service Worker, доступных в конструкторе pwabuilder. Подбирайте на свой вкус.

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

Настройка Manifest.json

Манифест приложения или App Manifest — это файл JSON, в котором необходимо предоставить «справочную» информацию о строении и цели вашего Progressive Web App.

Ссылку на манифест необходимо включать во все заголовки страниц вашего сайта:

<link rel="manifest" href="manifest.json">

Этот файл расскажет устройству, как установить:

• Название и краткое название приложения
• URL-адреса иконок разных размеров
• Адрес домена
• Ориентацию экрана по умолчанию
• Заставка

Пример содержимого файла manifest.json:

{
"dir": "ltr",
"lang": "Russian",
"name": "Александр Штеркель - заметки о SEO",
"scope": "/",
"display": "standalone",
"start_url": "https://shterkel.com/",
"short_name": "SEO",
"description": "Мои заметки по оптимизации сайта для результативного SEO. Тематические посты для сеошников, подробные инструкции. ¯\\_(ツ)_/¯",
"orientation": "any",
"background_color": "#fafafa",
"theme_color": "#fafafa",
"related_applications": [],
"prefer_related_applications": false,
"icons": [
{
"src": "/images/icons/apple-touch-icon.png",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "/images/icons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}
]
}

Обратите внимание! В примере выше я убрал большую часть ссылок на иконки разных размеров для экономии места. В JSON манифесте необходимо указать как можно больше ссылок и размеров.

Для составления манифеста используйте генератор манифеста для сайта.

Отладка и тестирование PWA

Не только по результатам проделанной работы, но и во время нужно всегда тестировать свои доработки. Для тестирования PWA на своём сайте можно использовать Google Lighthouse с подключенным отдельно отчётом — Progressive Web Apps:

Отчёты Google Lighthouse покажут все ошибки и как их исправить.

Ура, теперь на сайте есть PWA!

Где заказать разработку PWA

Биржа фрилансеров KWORK

Биржа фрилансеров FREELANCEHUNT.COM

Примеры PWA

• Веб-версия Telegram;
• Financial Times как пример большого контентного проекта с PWA;
• Guitar Tuner для музыкантов. Отличная и простая замена GuitarTuna 😀
• Serpstat.com — хороший пример того, как можно из SAAS-инструмента сделать PWA. 

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

И после этого вы можете его открывать как отдельное приложение на своём компьютере:

Где можно научиться делать PWA?

Хороший курс по PWA можно посмотреть на канале TheNetNinja:

Оцените статью:

Опубликовано: 15.12.18
Изменено: 15.09.20

Написал: Александр Штеркель

Как сделать PWA на сайте за 15 минут
Как сделать PWA на сайте за 15 минут — пошаговая инструкция по настройке Progressive Web Apps

Progressive Web Apps: WhoAmI / Хабр

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

Что такое PWA

PWA – это название группы приложений, которые используют стек Web технологий (JS + HTML + CSS) и позволяют соединить простоту использования Web сайта со специфичными для нативных приложений операционной системы UX и техническими возможностями.

Основное предназначение PWA увеличить конверсию, количество пользователей и удобство использования Web приложений на мобильных устройствах.

Progressive Web Apps является логическим продолжением Accelerated Mobile Pages, таким образом, если вы ранее создавали AMP приложения, то вам однозначно стоит обновить своё приложение к нормам PWA приложений. Если вы до этого ничего не слышали о AMP, то это не станет для вас проблемой во время изучения PWA.

PWA приложению необходимо быть:

• Прогрессивным – Работать с каждым пользователем в не зависимости от окружения используя метод постепенного улучшения как основной принцип работы;
• Адаптивным – Подстраиваться под любое устройство: десктоп, смартфоны, планшеты или что либо другое;
• Независимым от соединения – Используя Service Worker приложение должно работать в оффлайн режиме при прерывании или отсутствии соединения;
• Выглядеть нативно – Приложение должно соответствовать привычным для пользователя способам взаимодействия и навигации;
• Самообновляемым – Приложение должно контролировать процесс автоматического обновления посредством Service Worker API;
• Безопасным – Посредством использования HTTPS предотвращать перехват и подмену данных;
• Определяемым – посредством W3C манифеста и регистрации через Service Worker приложение идентифицируется как «приложение» поисковыми системами;
• Удерживающим – Используя технические возможности мотивируем пользователя еще раз использовать приложение, например посредством push уведомлений;
• Легким в установке – Позволяет «сохранить» приложение на устройстве пользователя посредством добавления PWA приложения в список установленных приложений без использования магазина приложений;
• Легким в использовании – Для начала использования приложения достаточно открыть URL. Установка приложения не обязательна.

Целевая Аудитория

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

Стандартный процесс работы

Пользователь, используя смартфон, открывает ссылку полученную посредством любого приложения, после загрузки web страницы пользователь получает полноценное приложение, которое он может использовать.
Тем самым начать использовать новое приложение становится намного проще, ведь не нужно заходить в магазин приложений и ждать пока установится необходимое пользователю приложение.
При необходимости пользователь может добавить приложение на рабочий стол посредством пункта опций в браузере «Add to home screen». Или приложение может предложить пользователю сделать это вместо него посредством – Web app install banner.

После чего на главном экране пользователя будет создана иконка предварительно указанная в манифесте приложения. Разработчик может управлять стилем браузера и вариантом отображения приложения после установки. Так же Service Worker идущий в комплекте с PWA приложением будет отвечать за кеширование, оффлайн работу и обработку пуш сообщений.

Дополнительные ссылки

Web Fundamentals – developers.google.com/web/fundamentals/?hl=en
Progressive Web Apps – developers.google.com/web/progressive-web-apps

Вместо заключения

Статья задумывалась начальной в серии статей о PWA, но т.к. ранее PWA не рассматривался на Habrahabr интересно понять насколько аудитории тема интересна. Поэтому, прежде чем начать техническую серию, я хочу убедиться, посредством опроса, что вам это будет интересно. В качестве бонуса, пока идёт опрос вы можете предложить(в лс) проект который будет взят в качестве примера, ведь интереснее рассматривать пример взятый из реального мира 😉

В случае успешности опроса ожидайте серию статей о PWA с открытым исходным кодом расположенным на github.

Как превратить сайт в приложение или что такое Progressive Web Application (PWA)

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

Но зачастую разработка приложения — это дорого и долго. К тому же продвигать и поддерживать его также затратно. Поэтому многие откладывают создание приложения до лучших времен.

А что, если превратить в приложение уже имеющийся сайт? Это возможно с помощью технологии Progressive Web Application или PWA.

Благодаря PWA пользователи могут установить сайт себе на смартфон: работать он будет как мобильное приложение, а на экране телефона появится иконка для быстрого доступа. Также PWA-сайт можно установить как приложение на десктоп.

Progressive Web Application – это гибрид сайта и приложения. Создать его можно как с нуля, так и на основе существующего сайта.

О преимуществах и недостатках этой технологии для бизнеса рассказывает маркетолог студии «Иквадарт» Татьяна Гаврилова.

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

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

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

примеров прогрессивных веб-приложений

1. Starbucks
2. Housing.com
3. Digikala
4. Flipboard
5. Soundslice
6. 2048 Game
7. Padiper6000
8. Padiper6000
9. Pinterest
10. Yummly
11. Spotify

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

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

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

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

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

1. Starbucks

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

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

2. Housing.com

Одна из ведущих онлайн-платформ по недвижимости в Индии, hosting.com, получает 50 миллионов посетителей в год. Индийская компания обнаружила, что медленное время загрузки имеет такое огромное влияние, что даже улучшение на одну секунду может значительно повысить коэффициент конверсии. Кроме того, большинство их целевых пользователей выходят в Интернет через сети 2g или 3G с помощью устройств низкого уровня.Чтобы лучше обслуживать посетителей, компания решила создать быстрый, эффективный и надежный PWA.

Новый мобильный веб-интерфейс работает быстро, использует меньше данных и позволяет жилищному фонду многократно привлекать пользователей. С новым PWA пользователи могут быстро найти то, что они ищут, или продолжить просмотр в автономном режиме. PWA Housing.com привел к увеличению коэффициента конверсии на 38% и снижению показателя отказов более чем на 40% . Он также привлек более качественных посетителей: среднее время сеанса увеличилось 10% во всех браузерах.

3. Digikala

Ведущая платформа электронной коммерции Digikala изменила то, как иранцы покупают бытовую электротехнику и другие товары в своем интернет-магазине. Их магазин PWA был построен, чтобы предоставлять потребителям много информации и обзоров цифровых продуктов, а также предлагать отличные возможности для покупок в Интернете. Таким образом, в настоящее время это крупнейший сайт электронной коммерции на Ближнем Востоке, на который приходится почти 92% доли рынка онлайн-торговли Ирана. Этот веб-сайт электронной коммерции PWA считается третьим по посещаемости веб-сайтом Ирана с 1 700 000 уникальных посетителей в день.С момента своего запуска Digikala росла на 200% в годовом исчислении с точки зрения посещений, заказов и доходов.

4. Flipboard

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

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

5. Soundslice

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

6. Игра 2048

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

7. MakeMyTrip

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

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

8. Uber

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

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

9. Padpiper

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

10. Pinterest

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

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

12. Spotify

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

ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ

Что такое прогрессивное веб-приложение? И PWA против Native: что вам больше подходит?

Стоимость разработки Magento PWA: наши отраслевые исследования (2019 г. и далее)

9 обязательных функций прогрессивного веб-приложения (PWA) для электронной коммерции

Лучшие инструменты для разработки прогрессивных веб-приложений (PWA) для Magento

Сообщите нам, понравился ли вам пост. Это единственный способ стать лучше.

.

Progressive Web Apps — плагин для WordPress

Progressive Web Apps — это пользовательский интерфейс, доступный в Интернете, и это:

• Надежный — Мгновенная загрузка даже в ненадежных сетевых условиях.
• Fast — быстро реагируйте на действия пользователя с плавной анимацией и без резкой прокрутки.
• Привлечение — Почувствуйте себя естественным приложением на устройстве с захватывающим пользовательским интерфейсом.

Этот новый уровень качества позволяет Progressive Web Apps занять место на главном экране пользователя.Подробнее о PWA здесь: https://developers.google.com/web/progressive-web-apps/

Плагин WordPress для прогрессивных веб-приложений помогает блоггерам, издателям и другим создателям контента выйти за рамки адаптивного веб-дизайна и «применить» свое существующее мобильное присутствие. Прогрессивные веб-приложения поддерживаются на iOS и Android. Совместимые браузеры: Safari, Google Chrome, Android — собственный браузер. Плагин был протестирован на WordPress 4.8 и новее, мы рекомендуем использовать последнюю версию WordPress.

Плагин WordPress Progressive Web Apps включает одну БЕСПЛАТНУЮ мобильную PWA (MOSAIC), которую можно настроить (цвета, шрифты, внешний вид) через область администрирования WordPress. Технологический стек, который мы использовали при создании этого прогрессивного веб-приложения, включает:

• React JS
• Семантический интерфейс для компонентов пользовательского интерфейса
• Redux для управления состоянием приложений
• SASS
• Webpack (шаблон для создания приложения React)
• Вавилон
• Jest & Sinon для модульных тестов

MOSAIC PWA (доступен БЕСПЛАТНО) построен на React JS.Большинство прогрессивных мобильных веб-приложений премиум-класса, доступных на PWAThemes.com/progressive-web-app-themes.html, созданы с использованием Angular / Ionic 1 или React. Каждый PWA поставляется с «производственной» версией, которая по сути представляет собой объединенную / упакованную / минифицированную коллекцию всех необходимых файлов JS и CSS для правильной работы PWA.

Каждое из наших прогрессивных веб-приложений протестировано с помощью Karma, Jasmine и Protractor (Angular) или Jest (React). В среднем у нас покрытие кода составляет 70–80%, и мы работаем над улучшением этого показателя.Хотя мы делаем все возможное, чтобы отловить любые ошибки, мы понимаем, что некоторые из них могут ускользнуть от нас. Пожалуйста, свяжитесь с нами, если вы встретите неприятный случай.

БЕСПЛАТНАЯ МОЗАИКА PWA, доступная в плагине WordPress Progressive Web Apps, представляет собой окно-отображение тем. Вы можете сразу увидеть несколько категорий, выбрать те, которые вам интересны, и сосредоточиться на них. В зависимости от количества отображаемых категорий размеры полей будут изменяться, чтобы соответствовать всему доступному пространству. Он отлично подходит для издателей, у которых есть сообщения, охватывающие несколько категорий, и которым нужен способ визуально структурировать свой контент.

Он поддерживает:

• Мозаика из нескольких изображений на титульной странице
• Меню страниц и подстраниц
• Поперечная навигация с боковым пролистыванием по категориям
• Максимум 2 статьи на карточку

В версии PRO доступны десятки мобильных прогрессивных веб-приложений: BASE, OBLIQ, ELEVATE, FOLIO, INVISION, POPSICLE, PULSE, GHOST, PHANTOM, LUCID, EXTRUDE, VEDI, BLEND, PURE, FUTURE & PALM.

Дополнительные ключевые функции, доступные в PRO:

• Rich UI / UX
  Ваши пользователи могут удобно просматривать страницы на своих любимых мобильных устройствах, не заходя в App Store и ничего не устанавливая.

• Монетизация
  Получите полный контроль над своим доходом, легко подключив плагин к своей учетной записи Google DoubleClick for Publishers.

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

• Premium Support
  Мы гордимся тем, что предлагаем фантастическое обслуживание и практическую поддержку.Наша команда дружелюбных мобильных экспертов позаботится о том, чтобы технологии не мешали вам.

• Аналитика
  Познакомьтесь со своими мобильными пользователями и проанализируйте свое влияние с помощью нашей мощной, но простой аналитики, ориентированной на читателей, через интеграцию с Google Analytics.

• Добавить на главный экран
  Пользователи могут добавить ваше мобильное веб-приложение на свои рабочие столы, сделав это одним касанием.

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

• Web Push-уведомления
  Мы интегрировали с плагином OneSignal WordPress, что позволяет привлекать пользователей с помощью push-уведомлений.

Расширенные функции PWA, такие как автономный режим и веб-push-уведомления, реализованы с помощью сервис-воркеров и в настоящее время доступны в Chrome.

Нам нравится писать и поддерживать этот плагин.Если вам тоже нравится, пожалуйста, поставьте нам оценку. Но если вы этого не сделаете, дайте нам знать, как мы можем это улучшить.

Получайте удовольствие от своих мобильных приключений!

Репозитории

Вот наши репозитории разработки Github:

Простая установка для WordPress v4.8 и новее

1. Перейдите в меню «Плагины» / «Добавить»
2. Загрузите прогрессивный-web-apps.zip и нажмите «Установить сейчас».
3. Наслаждайтесь.

Комплексная установка

Ниже приводится более подробный процесс установки и руководство по настройке.

1. Найдите установку WordPress в файловой системе
2. Распаковать содержимое gressive-web-apps.zip в wp-content / plugins
3. В wp-content / plugins теперь вы должны увидеть каталог с именем gressive-web-apps
4. Войдите в админ-панель WordPress по адресу http://yoursite.com/wp-admin
5. Перейдите в меню «Плагины».
6. Нажмите «Активировать» для плагина.
7. Перейдите в панель администратора «Progressive Web Apps».
8. Выберите цветовые схемы, шрифты и добавьте свой собственный логотип и значок приложения.
9. Зайдите на свой сайт в мобильном браузере и проверьте, отображается ли приложение. Если приложение не загружается должным образом, убедитесь, что WordPress REST API доступен в браузере и не возвращает ошибку.
10. Готово!

Проверка вашей установки

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

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

Обратите внимание, что прогрессивное веб-приложение будет доступно только на поддерживаемых устройствах: iOS и Android. Совместимы только следующие браузеры: Safari, Google Chrome, Android — собственный браузер.

.