Progressive Web Apps: что это такое и с чем его едят?
Если верить Google - это та самая комбинация Ганди и Дамблдора, которая призвана избавить мир от вселенского террора Тормозящего Сайта. Но что же такое PWA (Progressive Web Apps) на самом деле? И нужно ли оно вам в принципе?
Что такое PWA?
Google говорит так:
«Progressive Web Apps полноценно используют современные возможности интернета и предоставляют пользователю ощущение работы с приложением.” Интересным свойством PWA является то, что благодаря им отпадает нужда создавать приложения. Мобильная версия вашего сайта сама становится приложением. Вот недавно, к примеру, мы с коллегами вели довольно интересную дискуссию на тему того, что сегодня нужнее бренду: сайт с приложением или PWA.
При этом учитывалась возможность присылать уведомления, синхронизация, работа в режиме оффлайн, интерфейс, создающий впечатление “родного” приложения, а также опция установки ярлыка на рабочем столе устройства.
Эти возможности были ранее недоступны для сайтов. Но благодаря тому, что новые браузеры поддерживают HTML5 и JavaScript, мы можем приступать к созданию такого функционала.
В целом, Progressive Web App должно быть:
- Прогрессивным
Вне зависимости от пользователя или браузера работать без сбоев, так как должно быть рассчитано на постоянное улучшение.
- Универсальным
Работать с любым форматом и размером устройства: компьютером, мобильным телефоном, планшетом и, собственно, чем угодно.
- Независимым от наличия интернета
Быть снабжено возможностью работать без соединения с интернетом или при подключении низкого качества с помощью Service Worker.
- Внешне напоминать приложение
Быть настолько же удобным, как «родное» приложение для телефона, иметь привычные методы навигации и управления.
- Обновляемым
Самостоятельно обновляться благодаря работе Service Worker.
- Безопасным
Используя HTTPS, обеспечить безопасный контент без посторонних вмешательств.
- Узнаваемым
Быть доступным для отслеживания его в списке приложений телефона.
- «Затягивающим»
Мотивировать использовать приложение повторно методами по типу уведомлений.
- Устанавливаемым
Давать возможность пользователям устанавливать его на свой рабочий стол без необходимости посещать магазин приложений.
- Удобным
Простым в использовании через URL без необходимости комплексной установки.
Однако, напрашивается вопрос, если PWA – это просто по-умному сделанный сайт с дополнительными возможностями, то зачем он нам нужен?
Случаи использования
Давайте сразу разберемся: для многих людей PWA – это отнюдь не необходимость. И этот пункт настолько важен, что я повторю его еще раз:
Вам, скорее всего, не нужен PWA.
Причина в том, что большинству сайтов незачем работать в форме приложений. Это не значит, что все преимущества PWA бесполезны, но для многих сайтов эти преимущества не стоят тех усилий и времени, которые будут на него затрачены.
В каких же случаях стоит прибегать к PWA? Ниже мы приведем список признаков того, что он вам действительно нужен.
Показания для PWA
У вас есть:
- Контент, который регулярно обновляется, вроде биржевых сводок, быстро меняющихся цен или уровня запасов, или другие текущие данные.
- Чат или платформа комментариев с необходимостью обновления данных, а также уведомлений о новых сообщениях.
- Аудитория, которой свойственно извлекать данные, а потом загружать их в оффлайн-режиме, по типу новостных приложений или блога, публикующего много статей в день.
- Сайт с регулярно обновляемым контентом, который пользователи могут проверять по нескольку раз в день.
- Пользователи, которые в основном используют поддерживаемый браузер.
В двух словах, вы получаете что-то большее, чем обычный сайт, с интерактивными или чувствительными к временным рамкам компонентами, или часто появляющимся или обновляемым контентом. Хорошим примером является Google Weather PWA.
Если в вашем распоряжении обычный сайт с блогом, обновления в котором происходят не чаще раза в день-два, или даже еще реже, тогда, хотя и можно было бы сделать PWA, скорее всего, у вас есть более важные вещи, которыми можно было бы заняться для совершенствования вашего бизнеса.
Как это работает
Итак, у вас есть сайт, которому не помешал бы такой широкий функционал, но вы без понятия, как работает PWA?
Стоит потратить минутку и разобраться с той частью PWA, которая похожа на приложение. В целом, они делятся на две основные части: Service Worker (о нем мы еще поговорим) и оболочка приложения. Такая оболочка должна:
- Быстро загружаться;
- Быть кэшируемой;
- Динамично отображать контент.
Что может сделать в свою очередь Service Worker
Service Worker, по большому счету, существует, чтобы обеспечивать нас дополнительными характеристиками, не свойственными браузерам до недавнего времени. Например:
- Push-уведомления, чтобы оповестить пользователя о каком-то событии, вроде нового сообщения или что страница, которую они просматривали, обновилась.
- Синхронизация, для обновления данных, пока клиент не использует страницу/сайт.
- Оффлайн кэширование, которое позволяет сохранить доступ к некоторым функциям сайта в отсутствие подключения к сети.
- Определение геоположения или других данных устройства (таких как данные гироскопа устройства).
- Данные, загружающиеся предварительно – те, которые скоро понадобятся пользователю, например, изображения, расположенные ниже по странице.
По большому счету, это такой себе посредник между вашим сайтом и браузером. Он отвечает за перехват ваших запросов для браузера и ищет ответы, которые он предоставляет. Это значит, что мы можем, к примеру, сохранять копию запрошенных данных, чтобы когда она снова понадобится, ее можно тут же извлечь (это называется кэширование).
То есть мы можем загружать данные один раз, а потом снова открывать их без необходимости повторной загрузки. Проведите параллель с музыкантами, которые записывают альбом, и им больше не нужно играть каждую композицию снова и снова каждый раз, когда вы хотите послушать их музыку. Тот же принцип, но с интернет-данными.
Планируется, что в будущем Service Worker будет иметь еще больший функционал, чем сегодня. В свою очередь, уже сегодня у него достаточно фишек, которым вы сможете найти применение.
Так или иначе, всегда полезно быть во всеоружии - используйте или не используйте PWA с умом.
По материалам: https://moz.com/blog