Типы приложений смешанной реальностиtypes of mixed reality apps

Как использовать пуш уведомления?

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

Сначала начнем с серверной части.

Серверная сторона

На стороне сервера вашего PWA

1. Сначала генерируются данные, которые вы хотите отправить своему пользователю.
2. Затем данные шифруются с использованием открытого ключа пользователя.
3. Теперь сервер отправляет зашифрованные данные на URL эндпоинта.

VAPID

Существует несколько способов отправки Push-уведомления пользователю с помощью сервера. Одним из таких методов является протокол VAPID (добровольный идентификатор сервера приложений для Web Push). VAPID использует JSON Web Tokens для передачи информации.

Ядро VAPID называется запрос. Запрос представляет собой объект JSON, который содержит несколько общих полей.

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

Когда пользователь выбирает получать push-уведомления, PWA добавляет открытый ключ к объекту опций вызова .

Теперь, когда сервер приложения отправляет push-сообщение, он включает подписанный JSON веб-токен вместе с открытым ключом.

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

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

Web Push

Web Push Уведомления — это сообщения, которые поступают из Интернета. Вы получаете их на свое устройство, когда PWA не открыто и обычно используется для повторного привлечения пользователей без необходимости детализации.

Вы можете настроить Web Push с помощью службы Google Cloud Messaging или с помощью VAPID, как показано ниже:

Теперь вы можете отправлять Push-уведомления на свое устройство! Вот как вы можете настроить свои push-уведомления:

На стороне клиента вашего PWA

1. Пользователь подписывается на услугу push.
2. PWA отправляет объект подписки на сервер.

Нативные приложения vs традиционные веб-приложения vs PWA

Давайте проведем краткое сравнение между нативными приложениями, традиционными веб-приложениями и PWA.

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

Нативное мобильное приложение — это приложение для смартфонов, которое пишется на языке программирования, таком как Objective-C для iOS или Java для операционных систем Android.

Нативные приложения имеют следующие фичи:

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

Традиционные веб-приложения

Традиционные веб-приложения — это приложения, которые имеют следующие функции:

• Доставка в режиме реального времени — в зависимости от скорости вашего интернет-приложения веб-приложение будет немедленно доставлено вам.
• Веб-приложения создаются с использованием стандартных HTML, CSS и JavaScript.
• Ограниченный доступ к функциям устройства. В то время, когда ваше приложение может иметь доступ к таким функциям как камера или услуги геопозиционирования, оно не будет иметь доступ к функциям телефонии вашего смартфона.
• Веб-приложения зависят от интернет-подключения. Без должного соединения, все что вы можете сделать, это поиграть с динозавром Chrome.
• Вы не можете установить веб-приложение на своем устройстве.
• Любое обновление будет немедленно доставлено всем пользователям. В отличие от нативных приложений, веб-приложениям не нужно беспокоиться о каких-либо ограничениях в магазине приложений.

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

Наряду с функциями, о которых я упомянул выше, PWA также определяются следующими функциями:

• Скорость распространения — обновления PWA мгновенно! Все пользователи мгновенно и сразу получат приглашение!
• Подобно традиционному веб-приложению, PWA также будут иметь ограниченный доступ к функциям устройства.
• Основным недостатком PWA является то, что iOS еще не обеспечивает поддержку PWA. Но разработчики Apple, похоже, начали работать над предоставлением поддержки.

HTML и CSS

Начнем издалека — с HTML (Hypertext Markup Language) и CSS (Cascade StyleSheets). Почему с них и почему «издалека»? С них — потому что они лежат в основе веб-разработки, и ни один сайт без них не обойдётся. А издалека — потому что это не совсем языки программирования.

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

HTML и CSS очень простые — в основах можно разобраться буквально за пару дней, даже самостоятельно. Так что если вы очень боитесь программирования и не верите, что у вас получится, попробуйте начать с них. Это под силу каждому, поможет вам плавно войти в программирование и оценить свои силы. А потом при желании можно перейти к другим языкам.

ПЛЮСЫ НАТИВНЫХ ПРИЛОЖЕНИЙ

• Высокое качество. Узко-специализирующийся разработчик нативных приложений напишет вам чистый, уникальный код. Многолетний опыт разработки и четкие стандарты нативных iOS & Android приложений помогут сделать качественный продукт с широким функционалом и снизить риск появления багов практически до минимума.
• Низкая вероятность отказа в размещении в App & Play Stores. Поскольку нативное приложение изначально отвечает стандартным требованиям определенной платформы, маловероятно, что вы столкнетесь с какими-либо проблемами при запуске вашего приложения в официальных магазинах App Store и Play Store.
• 100% использование UX дизайна. Современные пользователи избалованы яркими, детально-проработанными интерфейсами, и простые, стандартизированные приложения навряд ли заинтересуют их. Именно в нативной разработке UX дизайн используется на все 100%, что позволяет сделать качественное и интересное приложение. В гибридном приложении вы получите стандартизированный для двух платформ интерфейс.

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

Атрибуты прогрессивного веб-приложения: Что делает PWA?

Давай минуту понастальгируем. Термин Progressive Web App был придуман в 2015 году Алексом Расселом. Вместе с Фрэнсис Берриман Рассел «перечислил атрибуты класса приложений» на основе постепенного и мощного развития современных браузеров. Вот те атрибуты, которые предусмотрены Расселом и Берриманом:

Аттрибуты PWA

• Progressive работают с каждым пользователем, независимо от выбора браузера, потому что с самого начала созданы с прогрессивным улучшением.
• Responsive: подходит для любого форм-фактора, рабочего стола, мобильного телефона, планшета и т.д.
• Connectivity independent: усовершенствование сервиса для работы в автономном режиме или в сетях низкого качества.
• App-like: использование модели оболочки приложения для обеспечения навигации и взаимодействия в стиле приложения.
• Fresh: всегда обновляется благодаря процессу обновления сервис-воркера.
• Safe: использование с помощью транспортного уровня для предотвращения слежения и обеспечения подлинности контента.
• Discoverable: идентификация как «приложения» благодаря App Manifests и области регистрации рабочего персонала, что позволяет поисковым системам находить их.
• Re-engageable: упрощает повторное включение с помощью таких функций, как push-уведомления.
• Installable: позволяет пользователям «сохранять» приложения, которые они находят наиболее полезными на своем домашнем экране, без вмешательства магазина приложений.
• Linkable: лёгкий обмен по URL-адресу не требующий сложной установки.

Сделать иконку приложения

Сайт будет располагаться на экране, а значит, нужна иконка. Не надо быть дизайнером, чтобы сделать хороший логотип. Для большинства небольших проектов я иду на the noun project и подыскиваю парочку значков, которые мне нравятся. Затем совмещаю их с помощью GIMP и добавляю фон. Вы, конечно, можете использовать любой другой способ, главное, убедитесь, что иконка вышла квадратная.

Моя иконка. Задним умом понимаю, что надо было скруглить углы

Теперь у вас есть значок приложения. Самое время прикрепить его к сайту. Я сделал это с помощью онлайн-генератора иконок. Скормите ему значок, и он выплюнет кучу разноразмерных версий, приправленных HTML-кодом. Далее:

из файла index.html

• скачайте файл, который вам предложит генератор, и разархивируйте его.
• поместите иконки в папку с остальной частью вашего сайта.
• добавьте код, выданный генератором, в
• убедитесь, что путь к значкам работает. Я поместил их все в подпапку, поэтому пришлось дописать «icons/» в каждую строку.

Создаём модель данных

Когда мы делаем запрос к конечной точке , мы ожидаем ответ json в следующем формате:

Чтобы работать с этими данными в Go, нам нужно сгенерировать структуру, которая отражает данные при декодировании тела ответа. Конечно, вы можете сделать это вручную, но я предпочитаю использовать веб-сайт JSON-to-Go, который делает этот процесс действительно простым. Он генерирует структуру Go (с тегами), которая будет работать для этого JSON.

Все, что вам нужно сделать, это скопировать объект JSON и вставить его в поле, помеченное JSON, затем скопировать вывод и вставить его в свой код. Вот что мы получаем для вышеуказанного объекта JSON:

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

Как вы, возможно, знаете, Go требует, чтобы все экспортируемые поля в структуре начинались с заглавной буквы. Однако принято представлять поля JSON с помощью camelCase или snake_case, которые не начинаются с заглавной буквы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После внедрения прогрессивного веб-приложения AliExpress увеличил конверсии c iOS-устройств на 82%. При том, что iOS пока не поддерживает 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 и вскоре станет сложно выделиться из толпы.

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

Значение приложений

Приложения обозначают:

• Качества, свойства предметов: глаза-изумруды, красавица-жена.

• Эмоциональные оценки, характеристики: утес-великан, писатель-бунтарь.

• Национальность, семейное положение, возраст, занятие, родство: старик-отец, сосед-слесарь, дворник-татарин, сын Петя, альтист Данилов.

• Имена собственные при неодушевленных существительных, географические названия: город Нью-Йорк, река Нева.

• Названия газет и журналов, предприятий, судов: газета «Гудок», фабрика «Большевик», поезд «Москва-Петербург».

Приложение может стоять до или после главного слова — находиться в препозиции или в постпозиции. Например: гора Машук и Медведь-гора.

Художественное и выразительное приложение, как и любое другое художественное определение, называется эпитетом. Пример приложения-эпитета: Профессор, снимите очки-велосипед! (В.В. Маяковский)

JavaScript

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

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

Но, несмотря на широкое применение, JavaScript не волшебная таблетка. У него есть свои ограничения, из-за которых он подходит не для всех задач.

Какие же у него плюсы и минусы?

Минусы

• Ненадёжность. У JavaScript слабая типизация: это значит, что код легко писать, но программа потом менее надёжная. Есть инструменты, которые помогают решить эту проблему, например TypeScript и Flow, но с ними писать код сложнее. Из-за этой особенности на JavaScript не разрабатываются сложные программы с высокими требованиями к надёжности. Если у вас на сайте не работает кнопка, это неприятно, но не страшно, а вот если у вас ошибка в банковском или промышленном ПО (программном обеспечении), это уже хуже.
• Мобильные приложения на JavaScript разрабатывать можно, но чаще для них выбирают другие языки, которые более проверены или даже созданы для этого, как, например, Java.

Зарплата специалистов и востребованность языка

По объединённым данным сайтов для поиска работы (HeadHunter, Superjob, Rabota.ru и другим), в Москве средняя зарплата JavaScript-разработчика составляет 104 тысячи рублей. Для новичков это примерно от 40 до 90 тысяч, а для профессионалов — от 126 тысяч и выше.

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

Синтаксис

Вот так может выглядеть код в JavaScript:

Этот код отвечает за авторизацию на сайте. Он читается не настолько легко, как в некоторых других языках, но если вы знаете английский, то можно догадаться, что здесь происходит. Например, в первой строке мы видим, что у нас есть кнопка (button), которая отвечает за вход в систему (login), и по ней можно кликнуть (click).

Стек технологий

1. Редактор кода или IDE:

• Notepad++;
• Sublime Text;
• WebStorm.

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

• Chrome WebInspector (DevTools);
• Firebug.

3. Среда исполнения для серверного ПОNodeJS.

4. Средства для разработки десктопных приложений:

• Electron;
• AppJS;
• NwJS (Node-Webkit);
• Windows8+.

5. Фреймворки для веб-разработки:

• jQuery;
• AngularJS;
• ReactJS;
• BackBone;
• Ember;
• Meteor.

6. JSON— самый популярный формат передачи структурированных данных.

7. MongoDB— документо-ориентированная база данных. Можно создавать JS-процедуры.

Возможности

С точки зрения новых возможностей PWA в 2020 году, я думаю, мы можем разделить экосистему на три части:

Стоит сказать, что есть некоторые функции (в основном, связанные с платформой Android), которые развиваются совсем в другом темпе, что, на мой взгляд, связано с внутренней борьбой между Android/Play Store и Chrome в Google: развитие TWA, возможность установки из омнибокса, или 2 года, которые потребовались Chrome для поддержки правильных, маскируемых иконок для Android 8+. На десктопе Chrome, похоже, развивается быстрее в вопросах, связанных с интеграцией с платформами.

• Край света: здесь у нас есть некоторые движки, у которых нет явно намеченного пути. Среди них — Gecko (который реализует множество API из империи Chromium, но в мире PWA намного медленнее и без ясных планов на будущее), kaiOS (кажется, застрявшая в старой версии Gecko без понимания в отношении будущего движка), TWA и Universal Windows API в Windows Store.

Дизайн

2019 привнёс три новые концепции, которые оказывают влияние на дизайн PWA:

• тёмная тема
• складные устройства
• маскируемые иконки

Тёмная тема

При включенной тёмной теме содержимое вашего PWA можно изменить с помощью CSS-медиазапросов. Но спецификация Web App Manifest не предоставляет никаких дополнительных возможностей для настройки иконок или цвета темы для темной темы. При этом iOS даёт возможность редактировать изображение для запуска приложения:

Маскируемые иконки

Chrome сейчас поддерживает маскируемые иконки в Canary, поэтому скоро поддержка будет как для стандартных ярлыков, так и для WebAPK; Firefox также занимается добавлением поддержки этой технологии.

ИТАК,

Выбирайте гибридное приложение, если вы хотите получить:

• простое приложение
• приложение для двух платформ по бюджетной цене
• 1 приложение с возможностью быстрого выхода на два рынка (ios/Android)

Выбирайте нативное приложение, если вам нужно:

• профессиональное приложение, соответствующее всем стандартам выбранной платформы
• сложное приложение с широким функционалом
• приложение с высокой скоростью работы

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

Воплотите все ваши самые смелые мечты и идеи в реальность вместе с Umbrella IT.

Photo by Unsplash

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

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

1. Быстрота

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

2. Лучше для SEO

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

3. Уменьшает потребность в данных

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

4. Нет необходимости для магазинов приложений

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

5. Снижает затраты на разработку

Для разработки собственных приложений требуются совершенно иные технические стеки, в то время как в PWA используются стандартные веб-технологии, такие как HTML, CSS и JavaScript, которые хорошо известны разработчикам внешнего интерфейса. Обновление существующего веб-сайта с помощью функций PWA намного дешевле, чем разработка собственных приложений с нуля, и любые обновления, которые вам нужно сделать, выполняются мгновенно, не требуя проверки Apple или Google.

6. Приводит к лучшему пользовательскому опыту

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

7. Приводит к лучшему взаимодействию

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

8. Увеличивает конверсии

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

Платформы

Прогрессивные веб-приложения полностью поддерживаются (включая Service Workers) в браузерах у 93% пользователей сети Интернет.

PWA могут быть установлены у 86% пользователей (82% — из браузера, 4% — только из магазинов приложений, а не из имеющихся браузеров).

Мы можем установить PWA в Android, iOS, iPadOS, Windows 10 (и в будущей 10X), Windows 7, Windows 8.x, Xbox One, macOS, Linux (64-битной), Chrome OS и kaiOS.

Можно упомянуть, что PWA нельзя установить на умные часы, умные телевизоры, Apple TV, Chromecast, Android TV, PlayStation, автомобили Tesla (да, у этих машин есть браузер), другие игровые приставки, цифровые помощники (таких как Facebook Portal, Nest Home или Amazon Echo) или шлемы и очки виртуальной и дополненной реальности, такие как продукция Oculus.

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

Рассмотрим платформы, где мы уже можем установить PWA в январе 2020 года:

Android

Мы можем установить прогрессивные веб-приложения на устройства под управлением Android (телефоны и планшеты) следующими способами:

Android — всё ещё единственная платформа, поддерживающая все три режима работы приложения, описанные в спецификации Web App Manifest

iOS и iPadOS

Меню «На экран Домой» из iPad OS 13 для установки ярлыков сайтов и автономных PWA

У нас был режим «веб-приложений на домашнем экране» с самого начала существования iPhone, но давайте рассмотрим первую версию, поддерживающую Service Workers и, по крайней мере, основную часть Web App Manifest. iOS 13 и iPadOS 13 — первые версии, в которых PWA фактически имеют базовый пользовательский интерфейс, соответствующий нативным приложениям. Всё ещё есть ошибки и отличия между автономным режимом (PWA) и Safari, как, например, API WebRTC для доступа к камере (полезно для таких вещей, как распознавание QR-кодов). Хотя команда WebKit говорит, что они работают над этим, соответствующий «баг» открыт уже 2 года.

Таким образом, мы можем установить PWA, используя:

• Распространение для корпоративных пользователей: из файла конфигурации для мобильных устройств (Mobile Configuration File); это предназначено для корпоративных пользователей, но будет работать и для обычных, если они примут соответствующий файл. В этом случае файл может содержать одно или несколько «веб-приложений», которые можно запускать в «автономном» режиме, поэтому домашний экран будет содержать PWA после установки файла конфигурации.

Windows и Xbox

PWA появятся в меню «Пуск» на устройствах Windows

На платформе Windows вы можете установить PWA через:

• Установка из браузеров в Windows 10: Google Chrome 70+ и Microsoft Edge (начиная с версии, которая будет выпущена в январе 2020 года). Вы не сможете установить PWA из Firefox, IE или Edge до 15 версии.
• Установка из браузеров в Windows 7/8.x: Google Chrome 70+ и будущая версия Microsoft Edge. Вы не сможете установить PWA из Firefox, IE или Edge до 15 версии.
• Установка из браузеров в WindowsX (складывающихся): Microsoft Edge (в будущем).
• Магазины приложений: Microsoft Store для Windows 10 (для настольных ПК и Hololens) и Xbox One. Вы не сможете установить PWA в Windows 10 для мобильных устройств или любой другой устаревшей мобильной ОС от Microsoft.

Microsoft Edge для Windows, macOS и Linux позволяет установить любой веб-сайт в качестве приложения; сайт будет выглядеть как PWA на рабочем столе, даже если на сайте нет Service Worker или надлежащего файла манифеста.

Microsoft Edge (новая, Chromium-версия) позволяет вам установить любой сайт в качестве PWA, даже если он не соответствует критериям PWA или даже если это сайт 1991 года. Google Chrome на компьютере также имеет такую возможность, но она не такая явная: вам нужно создать ярлык, используя меню «Дополнительные инструменты» — «Создать ярлык…» и отметив галочку «Открыть в отдельном окне», что, как мне кажется, не совсем очевидно.

Первый сайт в мире, установленный как «приложение» с помощью Microsoft Edge на macOS

Другие платформы

macOS — мы можем установить PWA только из браузеров Google Chrome 73+ и Edge. Safari для macOS и Firefox не поддерживают установку PWA.

Linux 64-bit — установка возможна только через Google Chrome 70+.

ChromeOS — установка из браузера доступна начиная с ChromeOS 67+; технология TWA в ChromeOS недоступна.

kaiOS — только из магазинов (kaiStore, JioStore); эта ОС основана на старой платформе Gecko, но при этом имеет базовую поддержку Service Workers. Недостаточно документации, чтобы понять, что возможно, а что нет на этой платформе для фичерфонов.