Что такое PWA или Progressive Web Apps

DEV

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

Что такое PWA

Этот инструмент появился сравнительно недавно, и уже широко используется всеми известными компаниями, особенно если речь идет о блогах, новостных агрегаторах, магазинах и каталогах. Сайты, в которые добавлен данный функционал, могут работать в 2-х режимах - как обычный сайт и как полноценное приложение. Зайдя на сайт с установленным PWA, пользователю будет предложено добавить приложение на главный экран. Это работает как на компьютерах, так и на мобильных устройствах, на всех платформах и почти во всех браузерах.

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

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

1. Разработка Progressive Web Apps происходит в десятки раз быстрее и дешевле, по сравнению с обычным приложения. Разработка полноценного мобильного приложения, может обойтись вам в десятки тысяч $ и несколько месяцев, в то время как PWA приложение создается за 30 минут.
2. Обычное приложение требует к себе отдельного подхода, вы должны будете работать над сайтом и над приложением отдельно. PWA приложение полностью дублирует ваш сайт и не требует к себе внимания.
3. Сайты с установленным Progressive Web Apps индексируются и улучшают SEO-показатели, добавляя авторитет вашему сайту в глазах Google. Как минимум, Google оценит наличие у вас SSL сертификата, так как такие сайты работают исключительно через HTTPS.
4. Благодаря свой универсальности и кроссплатформенности, вам необходимо разработать всего одно приложение, оно будет работать на любых устройствах, операционных системах и браузерах.
5. Приложения, созданные по технологии PWA, способны работать при медленном или отсутствующем интернете - это значит, вы не потеряете потенциальных клиентов и покупателей.

Реализация PWA

Для начала ваш сайт должен иметь мобильную версию или быть адаптивным, это важно так как технология в первую очередь актуальна для мобильных пользователей. Далее необходимо чтобы ваш сайт работал по защищенному протоколу - HTTPS, это важно ведь ваше приложение будет устанавливаться в обход PlayMarket и AppStore. Ну и последнее правило гласит - отдельный URL для каждой страницы сайта, что скорее всего и так является нормой)

Если ваш сайт построен на CMS, вроде того же Wordpress, то данный функционал вы сможете внедрить на свой сайт с помощью готовых плагинов и модулей за считанные минуты. Если сайт статический или сделан на самописной системе управления, то будет необходимо загрузить в корень сайта всего 3 файла и подключить их в шаблоне. Данная процедура займет не больше 30 минут, и все равно, мы рекомендуем обратится к профессионалам для ее выполнения, ведь стоит это копейки, а риск "поломать" сайт сведется к нулю.

Еще важный момент, в одном из 3-х файлов, которые мы должны будем подключить в шаблоне сайте, необходимо заполнить данные о приложении! Кроме заголовка и описания, необходимо нарисовать и подключить иконки для приложения минимум в 3-х размерах (128, 256 и 512 пх).

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