Назад в журнал
Делимся знаниями и опытом с теми, кто хочет попробовать PWA, или что-то слышал об этом, но стесняется спросить. Все записали на видео и сделали поминутную разбивку
Progressive Web Application (PWA) — итоги
Сибирикс
Progressive Web Application. Итоги первого открытого холивара Сибирикс Digital Club
Делимся знаниями и опытом с теми, кто хочет попробовать PWA, или что-то слышал об этом, но стесняется спросить. Все записали на видео и сделали поминутную разбивку
PWA, или Progressive Web Application — на сегодня это самые передовые технологии на стыке веб-а и мобайла. Например, можно сделать сайт, который будет работать как мобильное или десктоп-приложение. Автономно и с доступом к всяким пуш-уведомлениям, датчикам мобилки, которые простым сайтам даже не снились.
Это действительно круто! Например, вам нужно заслать сотрудников собирать какие-то данные в тайге (связи нет!). Можно по-старинке, на бумажке, а потом переносить все руками в комп (долго, дорого, такое себе). Можно выдать всем мобильное приложение, работающее автономно, но умеющее синхронизироваться (это хороший, но довольно дорогой вариант, с учетом разработки под две платформы). А можно сделать гибрид сайта и приложения на технологиях PWA. И получить работающую среду хоть на телефоне, хоть в браузере, хоть на десктопе. Да, это почти чудеса, и мы в них отлично разбираемся.
Немного о формате
Холивар — это священные войны программистов, которые редко бывают друг с другом полностью в чем-то согласны.

Чтобы разжечь такую войну, нужно:
  1. попробовать новую технологию,
  2. собрать всю кодерскую и объяснить, почему эта технология — огонь.

После этого штат естественным образом делится на два лагеря — тех, кто сидит под вау-эффектом, и тех, кто говорит, что все это уже было или что это умрет через полгода. Вот тогда и начинается самая жара.
Так было, когда мы обсуждали Flutter, серверный рендеринг React и все остальные 100 500 раз. Но когда речь зашла про PWA, мы подумали, что пятьдесят голов хорошо, а больше — лучше, и впервые решили сделать холивар открытым. К нам пришли крутые гости, кто-то из них уже успел покопаться в технологии и поделился своим опытом, а кто-то посмотрел на все свежим незамыленным взглядом и задал нетривиальные вопросы, которые накалили обсуждение. Самые горячие споры вызвал вопрос, можно ли использовать PWA как маркетинговый ход или нет (смотрите на 13-ой минуте видео).
Если вы не смогли попасть к нам в студию, смотрите видео! Особенно полезно — для разработчиков и проджект-менеджеров.
Презентацию можно скачать в нашем Телеграм-канале.
Для вашего удобства приводим поминутную разбивку.
Основные технологии PWA



Манифест-приложение
(специальный json файлик, которого, в принципе, уже достаточно, чтобы сайт назывался PWA)
0:02:05
Как подключить и какие метаданные указать, чтобы после 30 секунд нахождения пользователя на сайте всплывала плашка «Установить сайт на начальный экран»
0:37:20
Несколько видов интерфейса, которые могут быть описаны в Манифесте
0:38:54
Порядок обработки
Service Workers
(«прослойка» на JS между клиентом и сервером)
0:03:26
Какую магию можно делать с его помощью. Объекты внутри Service Workers
0:07:35
Сайт с кучей примеров, про который говорит Иван
0:27:35
Еще про работу с кешем. Подробно
0:36:25
Что можно закешировать
0:38:40
Как кешировать шрифты

Другие технологии
0:08:00
Обзорно: Web Workers (возможность выполнять JS код в отдельном потоке). WebAssembly (возможность компилировать, например, C/C++/Rust в совместимый с JS формат). IndexedDB (noSQL хранилище). Notifications API
0:45:00
Ссылка на JS-ные api, новые, понтовые, веселые. Можно открыть описание каждой апишки, посмотреть и впечатлиться
0:48:05
WebAssembly. Подробно
0:50:55
Обзорно: Ambient Light Events, Background Tasks, Gamepad API, Image Capture API, Vibration API
Установка на устройствах

0:11:23
Как настраивать, выводить в интерфейсе браузера или в виде standalone-приложения. Что такое сайт, который выглядит, как приложение
0:13:35
Холиварный момент: Можно ли продвигать PWA как идею о том, что у сайта есть приложение?
0:16:00
Можно ли по-разному выстроить поведение пользователя в вебе и в PWA?
0:19:15
Плюсы и минусы, возможности и ограничения
0:40:50
На каких браузерах работает
Практика

0:20:35
Процесс создания нового сайта с использованием PWA. Какие можно решить задачи. Какой фреймворк лучше использовать. Подходы к созданию PWA. Что нужно продумать на берегу
0:24:00
Как прикрутить PWA к уже существующему сайту. В каких случаях придется переписать половину фронтенда. Когда проще сделать отдельное standalone-приложение или вообще новый сайт?
0:25:15
Инструменты. Ссылка из презентации
0:35:00
Интересный кейс: Как мы пошли в обратную сторону и из приложения сделали сайт