Что такое скрам-доска

Разработка #Программы #Обзор #Менеджмент #Оптимизация Поговорим об одном из наиболее часто используемых инструментов для повышения эффективности команды.  Что такое...

Что такое формат JSON

Разработка #IDE #Разбор #JavaScript За представление структурированных данных на основе синтаксиса JavaScript отвечает стандартный текстовый формат под названием JSON,...

Взгляд в будущее: смогут ли метавселенные заменить реальность

Разработка #Технологии #Тренды #Facebook #Криптовалюта Краткое введение в метавселенные. Что они собой представляют, как работают и стоит ли...

Что такое API

Разработка #Веб-дизайн #API #OpenSource #Безопасность Краткий ликбез по API. Выясняем, что он собой представляет, как работает и зачем нужен....

5 главных способов привлечения клиентов из карт и отзывиков

Бизнес #Продажи #Предпринимательство #SEO Реклама. ООО «ТаймВэб». erid: LjN8KQs4Z Мы в MyReviews делаем инструменты для мониторинга и улучшения рейтинга...

Как сделать дейлики эффективными: интервью с Настей Ткаченко

Мнение рынка #Менеджмент #Разбор #Программы #Мессенджеры В гостях у Комьюнити побывала Настя Ткаченко, проджект-менеджер конструктора сайтов Craftum. У...

Обзор фреймворка Yii

Общее Yii – это объектно-ориентированный фреймворк, написанный на PHP. Если вы не знаете, что такое фреймворк и чем...

Как создать сайт на WordPress с нуля

Разработка #Настройка #WordPress #Базы данных #Оптимизация Поговорим о том, как создать сайт на базе WordPress и Timeweb. Сайт,...

Плюсы и минусы Bootstrap

Разработка #Фреймворки #HTML/CSS Введение Bootstrap – один из самых популярных инструментов, который используется при создании сайтов и веб-приложений....

Лучшие редакторы кода

Atom Выпущенный в 2015 году редактор уже полюбился многим разработчикам. Это open-source проект для Linux, Windows и macOS....

Сравнение 29 сервисов аналитики маркетплейсов: обзор, рейтинг

Обзор сервисов аналитики маркетплейсов Сравнение 29 сервисов аналитики маркетплейсов по 10 параметрам. Обзор, рейтинг лучших сервисов для аналитики...

PyCharm: IDE для Python

Разработка #Программы #Обзор #IDE #Редакторы кода #Python Популярность Python как языка программирования меняется из года в год. Python...

Что за движок Amiro.CMS?

Разработка #Фреймворки #Обзор #MySQL #PHP Продолжаю рассказывать о CMS, о которых мало говорят (по сравнению с WordPress, конструкторами веб-сайтов...

Обзор языка PHP: прошлое, настоящее, перспективы

Последовательность появления новых версий: PHP/FI – к середине 1995 года основной модуль был переписан на C. Появились первые...

10 лучших IDE

Разработка #C/C#/C++ #Ubuntu #Java #JavaScript #HTML/CSS #PHP #Python #Windows IDE (Integrated Development Environment) – это интегрированная, единая среда...

Что такое дополненная реальность

Разработка #Google #Продажи #Технологии #Сервисы Выбирали когда-нибудь кроссовки или диван в интернете? Не очень удобно, верно? Было бы...

Введение в J2Store

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

Какие языки программирования изучать в 2018 году

Разработка #C/C#/C++ #Java #JavaScript #PHP Вот и наступил 2018 год – год новый, а проблемы и вопросы старые....

Работа со строками в JavaScript

Разработка #Настройка #JavaScript Строка в JavaScript – это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет собой...

Как пользоваться Visual Studio Code

Разработка #IDE #Редакторы кода #Программы #Обзор #Windows Visual Studio Code – это один из наиболее популярных редакторов кода,...

Что такое Progressive Web Apps и в чем их преимущества

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

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

  1. Первое преимущество PWA перед приложениями заключается в том, что не нужно заходить в Google Play или AppStore, чтобы что-либо загрузить. Требуется только подключение к интернету и браузер.
  2. Второе преимущество PWA заключается в том, что любой пользователь может установить ярлык сайта на главном экране своего устройства, как будто это мобильное приложение. Более того, для сайта не нужны дополнительные 100 Мб места, из-за чего придется удалять фотографии или другие приложения. Крайне важно, в рамках стратегии развертывания PWA, решить, когда удобнее всего показать пользователю, что он может создать ярлык на главном экране смартфона.
  3. С помощью Progressive Web App пользователь может продолжать пользоваться сайтом, даже если интернет пропал. Профит к лояльности! 
  4. Страницы PWA могут весить менее 1 Мб. Это дает большое преимущество миру mobile-first (в котором мы, собственно, и живем).
  5. Одной из стратегий для увеличения повторных посещений является отправка push-уведомлений. Пуши напоминают пользователю, что на сайте появился новый контент. К счастью, Progressive Web Apps позволяют отправлять уведомления на главный экран смартфона по типу обычных приложений (увы, работает это пока только на Android). 

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

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

Примеры популярных PWA

  • The Washington Post. После запуска PWA на 12% выросло количество посещений, до 80 миллисекунд сократилось время загрузки страницы.
  • WalmartС добавлением этой функции интернет-магазин увеличил посещаемость на 28%. 
  • Book My ShowКрупнейшая в Индии компания по продаже билетов с 50 миллионами посетителей в месяц. Внедрение PWA увеличило конверсию на 80%. 

Как работают прогрессивные веб-приложения?

Progressive Web Apps состоят из двух основных частей:

  1. оболочки, которая отображает структуру страницы (сетку);
  2. контента, который может варьироваться между различными страницами приложения.

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

Файл манифеста

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

Этот файл содержит следующие данные:

  • Name: имя приложения.
  • Description: описание приложения.
  • Icons: иконка приложения с различными разрешениями для мобильных устройств.
  • Start url: url запуска. Когда пользователь жмет на иконку, должна открываться главная страница. 
  • Display: настройки отображения (standalone, fullscreen, minimal-ui и другие).
  • Orientation: веб-приложение может использоваться в портретном или в ландшафтном режиме.
  • Theme_color: цвет, который будет использоваться в верхней панели приложения.
  • Background_color: цвет для экрана перед полной загрузкой приложения.

Service Worker

Другим важным файлом PWA является Service Worker  скрипт, который работает в фоновом режиме и позволяют сайту работать автономно, загружая содержимое и генерируя push-уведомления.

Вы можете проверить, использует ли сайт скрипты service-worker.js с помощью браузера:

  1. Откройте любую веб-страницу.
  2. Щелкните правой кнопкой мыши и выберите «Inspect Element» (посмотреть код элемента). 
  3. Перейдите на вкладку «Application» и «Service Workers». Вот пример:

Также вы можете открыть раздел «Cache Storage» – в нем можно увидеть файлы, которые были загружены и кэшированы скриптами Service Worker.

Заключение

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

Межтекстовые Отзывы
Посмотреть все комментарии
guest