Web Push - Notifications UI Customisation

Опубликовано: 02 Декабрь 2021
на канале: A shot of code
4,372
91

When sending a web push message we have the ability to customise the notification that is popped up to the user. We can set things like the title, body, icon, buttons and how long the notification is displayed for. This Javascript tutorial looks at how to go about this customisation after setting up a simply test environment. So we create a service worker, register it and allow notifications to be sent. Then within the service worker we create the required event handlers to display and customise the UI of the notification. The main object used here is the 'options' object which we setup and pass to the showNotification call.

0:00 Setup and Configuration
4.05 Customising the Notification
6:40 Setting Title
7:25 Setting Body
9:00 Adding an Icon
10:20 Adding Interactivity
12:00 Add Buttons
14:20 Persisting Notification

Some good references here:

https://developer.mozilla.org/en-US/d...

https://developers.google.com/web/upd...

https://developers.google.com/web/ilt...


Смотрите видео Web Push - Notifications UI Customisation онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь A shot of code 02 Декабрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,372 раз и оно понравилось 91 людям.