Разработчики Google приступили к тестированию и запуску изменений в отображении web push-уведомлений в новой версии браузера Chrome 75.

 

TIP

Что изменилось?

  • Внешний вид уведомлений
  • Работа кнопки «шестеренка»
  • Отображение двух пушей с большой картинкой или кнопками на одном экране.

Разберем нововведения подробнее.

Дизайн

На картинке ниже видим, как изменился каждый элемент уведомления от Chrome. Слева – старая версия, справа – новая.

как изменился каждый элемент уведомления от Chrome. Слева – старая версия, справа – новая.

 Что такое push

Рассмотрим два варианта отображения отдельно.

Предыдущая версия. Здесь иконка (лого) расположена слева. Сверху находится тайтл, ниже описание, а потом URL. Картинка занимает все пространство окна, за исключением верхней информационной части. 

old style push with image

Новый дизайн. Лого переместили в правую часть уведомления и уменьшили. Кнопки настроек («шестеренка») и закрытия («крестик») расположены, как и в старой версии, в правом верхнем углу. Теперь в самом верху окна находится URL. Слева от него значок браузера, справа — кнопка для сворачивания окна в урезанный формат (без большой картинки). Под ссылкой на сайт помещен тайтл, под ним – описание. Картинка теперь не заполняет все пространство окна, вокруг нее остается пустое поле. Дополнительные кнопки располагаются под изображением. Они выделены отчетливее, чем в старой версии Chrome.

new material design push

Кнопка настроек («шестеренка»)

В прошлой версии web push от Chrome кликом по кнопке «шестеренка» можно было перейти в настройки уведомлений в браузере. 

кликом по кнопке «шестеренка»

Уже здесь пользователи могли задать правило отображения пушей от разных сайтов.

пользователи могли задать правило отображения пушей от разных сайтов

Теперь заблокировать или разрешить отправку уведомлений можно непосредственно при получении пуша. Для этого служит та же кнопка настроек («шестеренка»). Но теперь клик по ней открывает небольшое диалоговое окно, в котором можно выбрать подходящую опцию.

push шестеренка новое диалоговое окно

Так получатель может заблокировать push-уведомления от сайта в один клик.

Если пришло два push-уведомления с картинками

Раньше два оповещения с большими картинками отображались на экране до тех пор, пока получатель на них не отреагирует.

два оповещения с большими картинками отображались на экране

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

два уведомления с большой картинкой, одно из них автоматически сворачивается

Его можно развернуть кликом по кнопке:

можно развернуть кликом по кнопке

Такая же ситуация с пушами с дополнительными кнопкам. Уведомление можно развернуть, нажать на кнопку и перейти на сайт. Но если переход не сделан, оповещение снова свернется.

Уведомление можно развернуть, нажать на кнопку и перейти на сайт

Выводы

В новой версии Chrome разработчики улучшили юзабилити и дизайн web push-уведомлений. Большая картинка центрирована, вокруг добавлен белый фон, на котором выделяются кнопки Call To Action

 

TIP

Теперь пользователи могут:

  • Свернуть окно с большой картинкой до стандартного формата уведомления (текст с иконкой).
  • Заблокировать оповещения от сайта в один клик при получении пуша с помощью кнопки «шестеренка».

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

Сделать рассылку

Хотите протестировать новые возможности web push? Заходите в личный кабинет Gravitec.net.

Новый дизайн push-уведомлений в Chrome 75
5 (100%) на основе 1