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