PWA, или Прогрессивное веб-приложение

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

Приложение отображает погоду как на десктопе, так и на мобильных устройствах. Что за мобила — неважно, работает в Android, iOS, iPadOS, Windows 10, Windows 7, Windows 8, Xbox One, macOS, Linux (64-битной), Chrome OS и kaiOS. Прогрессивные веб-приложения полностью поддерживаются в браузерах у 93% пользователей сети Интернет.

Что такое PWA

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

• Service Workers
• HTTPS
• каркас
• файл manifest.json
• push-уведомления

Эту технологию уже несколько лет активно продвигает Google. Посмотрите, например, раздел на платформе разработчиков Google или его блог на Хабре.

Основы технологии PWA

1. Service Worker

Этот обычный js-файл — основной компонент PWA, обеспечивающий простоту перехода веб-сайта к PWA. Браузер обращается в интернет не напрямую, а через него.

Service Worker имеет доступ к хранилищу: Cache Storage и IndexDB. Например, он может принять запрос от браузера, проверить, есть ли интернет, если нет — извлечь данные из кэша, обработать их и вернуть результат в браузер. Таким образом PWA работает даже когда нет интернета.

2. HTTPS

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

3. App Shell

Это каркас, шаблон приложения. В минимальной конфигурации — файл index.html. Например, сайт состоит из заголовка и таблицы с меняющимися данными. Удалим из таблицы данные, останутся только заголовок и пустая таблица. Вот это и есть — app shell.

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

4. Web App manifest

Манифест диктует браузеру имя приложения, иконку, в каком режиме отображать его (fullscreen, standalone и др.) и пр.

Также с его помощью пользователь устанавливает PWA на домашний экран устройства. Достаточно второй раз зайти на PWA-сайт и появится предложение установить приложение.

5. Push Notifications

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

---

Вот чек-лист от Google, где можно проверить, соответствует ли сайт/приложение требованиям к PWA.

PWA не зависят от магазинов

Хорошая новость для разработчиков: вам не нужны Play Store или App Store для распространения вашего PWA. Устанавливаются они по ссылке, даже если на устройстве стоит запрет на установку из непроверенных источников.

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

PWA сокращают затраты

Модерируя одну из групп на Фейсбуке, я часто сталкиваюсь с вопросом «Сколько будет стоить создание такого-то мобильного приложения?» Стандартный ответ — «От 60,000 до 6,000,000 р. На англоязычных сайтах такой вопрос тоже задают и верхний предел там — до $1,000,000.

Обычно перед созданием мобильного приложения делают минимально жизнеспособный продукт — MVP. Это прообраз будущего приложения с минимальными функциями, удовлетворяющими пользователей. Цель — получение ответов на вопросы «Нужен ли продукт?», «Какие функции — ключевые?» и т.д. Это сэкономит средства, если, например, окажется, что продукт никому не нужен.

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

---

Вот ссылка на приложение. Проверьте его на десктопе и на смартфоне/планшете. Буду признателен за отзывы и комментарии.

---

Изучите таблицы Гугл за 5 часов в онлайн-курсе!

Здесь можно посмотреть Учебный план.