PHP: работа с БД MySQL

Разработка #Серверы #MySQL #PHP #Базы данных Базы данных используются для удобного хранения информации, а также для её структурирования....

В Windows 11 добавится поддержка USB 4 2.0 со скоростью передачи данных до 80 Гбит/с

Новости #Обновления #Windows Реклама. ООО «ТаймВэб». erid: LjN8K8PQJ Корпорация Microsoft начала распространять пакет функциональных обновлений KB5034848 для Windows 11...

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

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

Timeweb инвестировал 10 млн долларов в развитие Timeweb Cloud

Новости #Финансы Компания Timeweb завершила первый этап инвестиций в размере 10 млн долларов в развитие облачного провайдера Timeweb Cloud....

16 лучших игровых шаблонов для WordPress

Разработка #Веб-дизайн #Шаблоны #Подборка #WordPress Создание своего сайта на игровую тематику – мечта многих геймеров. Ранее она была...

Создаем калькулятор-конвертер на базе React. Часть 4: Декомпозиция и мелкие исправления

Разработка #Фреймворки #JavaScript Продолжаем разработку калькулятора-конвертера на базе Реакта с визуальной библиотекой Chakra. В этой статье речь пойдет...

Лучшие сайты для изучения программирования

Разработка #Сервисы #Подборка #IDE #Карьера Рассказываем о лучших сайтах для изучения программирования.  Для удобства все ресурсы поделены на...

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

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

Open source редактор Publii, первый взгляд

Сейчас все избалованы различными CMS, порой не задумываясь о целесообразности их применения для небольших сайтов. Для небольшого сайта...

Преимущества и недостатки WordPress

Разработка #Обзор #WordPress WordPress довольно старая система управления содержимым сайтов (сокращенно — CMS), вебмастера и администраторы с ней...

Как установить Git на Debian 10

Разработка #Серверы #OpenSource #Debian Система контроля версий (например, Git) позволяет регистрировать изменения в файлах, с которыми работают разработчики,...

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

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

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

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

Что такое JavaScript: назначение, особенности и сферы применения языка

Разработка #Браузеры #Разбор #JavaScript #HTML/CSS Интерактивные элементы сайтов и мобильных приложений часто выполняются на языке JavaScript. Он хорошо...

Что такое виджет и как им пользоваться

Разработка #Веб-дизайн #JavaScript #Оптимизация #Windows Разработчики софта и владельцы сайтов стараются упростить процесс взаимодействия со своим продуктом. Одним из...

Преимущества и недостатки CMS 1С-Битрикс

Разработка #1С #Обзор #Интернет-магазин #Веб-дизайн #Bitrix 1С-Битрикс – одна из самых популярных CMS, на которой работают тысячи сайтов....

Краткая история «Параграфа»: советские ученые, которые подарили миру S Pen

Разработка #Технологии #Тренды #Apple #Железо В 1988 году уроженец Азербайджанской СCP Степан Пачиков основал софтверный кооператив «Микроконтур», в результате...

10 лучших IDE

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

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

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

Лендинг на WordPress за три шага

Зайдите в панель управления, оплатите хостинг. 2 шаг Установите WordPress в разделе «Каталог CMS». 3 шаг Установите тему...

Что такое 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