Будущее уже наступило или всё про PWA приложения

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Борьба между сайтами и мобильными приложениями подходит к концу. Теперь сайты могут взаимодействовать с посетителями, как приложения. Человек может установить его на своё устройство и работать с ним даже без подключения к интернету! Фантастика? Нет, просто PWA!

Есть ли будущее у PWA Google?

  • Да
  • Нет

По данным опросов на форумах разработчиков

Что такое Progressiwe Web Applications (PWA)?

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

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

Технология PWA является продолжением AMP. Более того, AMP страницы можно «прокачать» до стандартов Progressive Web Applications.

Типичные требования к PWA:

  • Адаптивность — корректная работа на любых устройствах
  • Автономность — при использовании Service Worker приложение должно работать в автономном режиме
  • Удобство — пользователю должно быть удобно взаимодействовать с приложением на своем устройстве
  • Безопасность — должна быть защита от перехвата и подмены данных
  • Легкость в установке — пользователь должен иметь возможность установить PWA сайт на свое устройство за пару кликов
  • Кроссплатформенность — технология разработки не зависит от платформы (android или iOs)

Недостатки PWA

  1. Технология новая, поэтому ещё не получила широкого распространения
  2. Apple пока не выразила намерений по поддержке технологии

Зачем PWA Бизнесу?

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

Количество инсталлов приложений уменьшается
Количество инсталлов приложений уменьшается

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

Пример PWA приложения

  • AliExpress использует PWA и увеличил конверсию примерно на 104%.
  • Konga оптимизировали свой ресурс, сократив на 92% количество первоначально загружаемых данных.
  • The Washington Post после внедрения PWA увеличил посещаемость своих статей на 12%, ускорив загрузку с 8 секунд до 80 миллисекунд

Делаем простейшее PWA приложение для своего сайта

Возьмем какой-нибудь HTML шаблон для тестирования. Далее установим расширение Chrome Lighthouse. Оно покажет, насколько наше будущее приложение будет соответствовать стандартам.

Откроем наш новый сайт и запустим LightHouse, сгенерируем отчет («Generate Report»). Мы получим примерно такую картину:

То есть, пока наш сайт не соответствует технологии.

Делаем иконку приложения

Подбираем любую pngшку размером не менее 260*260 пикселов и идем в онлайн генератор иконок. Например, в http://www.favicon-generator.org/

В нем генерируем набор иконок для всех устройств. На выходе получим архив и пошаговую инструкцию по внедрению иконки на сайт. Там всё очень просто.

Пишем манифест

Да, это звучит громко, но это необходимая информация о сайте: имя, цветовая тема, инфа об иконках.

Типичный файл манифеста для использования в PWA выглядит следующим образом:

Генератор иконок нам отдал готовый файл манифеста, но его немного надо расширить. Делать это будем с помощью генератора манифестов. Заполним необходимую информацию о сайте. В правой части увидим сформированные данные JSON. Их и вставим поверх раннего файла manifest.json. Запускаем лайтхаус и смотрим результат:

Результат анализа. Уже лучше!
Результат анализа. Уже лучше!

Внедряем файл Service Worker

Наличие файла Service Worker — требование технологии PWA. Сам файл достаточно сложен, но есть простая библиотека sw-toolbox, которая в разы упрощает разработку этого файла.

Алгоритм внедрения прост.

Регистрируем service worker, добавляем код в блок head нашего html документа.

Далее подключаем sw-toolbox в свой проект, закидываем файл в корневую папку сайта.

Создаем новый файл sw.js и вставляем в него следующий код:

Ещё раз запускаем лайтхаус (расширение Хрома) и запускаем генерацию отчета:

Отличный результат проверки!
Отличный результат проверки!

Теперь можно зайти на сайт с мобильного устройства и увидеть разницу!

Будущее Google PWA

Технология видится достаточно перспективной. Успешные кейсы внедрения говорят о том, что её имеет смысл внедрять на текущих ресурсах. Следуя логике Google поддержки всего мобильного (как, например, AMP страницы имеют приоритет в мобильной выдаче), технология PWA может войти как фактор ранжирования.

Вопрос-ответ

В: Подойдет ли PWA для моего сайта?
О: Даже не видя сайта, можно утверждать — что да. А вот техническое внедрение зависит от многих факторов: используемой CMS и т.д.

В: Что будет в случае, если браузер не поддерживает технологию?
О: Пользователю будет показана стандартная адаптивная версия сайта

В: Сколько стоит внедрение PWA на сайт?
О: Пишите, будем разбираться.

Козлов Эдуард

Автор статьи:

Эксперт в интернет-маркетинге и развитии бизнеса. Занимаюсь интернет-маркетингом с 2007 года. Основатель компании WSP-Design.

Кол-во написанных статей: 46.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *