Web Push Notifications Whois They are for push Whois They are - - PowerPoint PPT Presentation

▶
web push notifications whois
SMART_READER_LITE
LIVE PREVIEW

Web Push Notifications Whois They are for push Whois They are - - PowerPoint PPT Presentation

Sep 12, 2022 323 likes •664 views

Web Push Notifications Whois They are for push Whois They are for push Timely Whois They are for push Timely Relevant and Secure Whois They are for push Timely Relevant and Secure

slide-1
SLIDE 1

Web Push Notifications

slide-2
SLIDE 2

Whois

  • They are for push
slide-3
SLIDE 3
  • They are for push
  • Timely

Whois

slide-4
SLIDE 4
  • They are for push
  • Timely
  • Relevant and Secure

Whois

slide-5
SLIDE 5
  • They are for push
  • Timely
  • Relevant and Secure
  • "Cross-platform" and "Cross-browser"

Whois

slide-6
SLIDE 6

"Cross-platform" and "Cross-browser"

  • Service Workers background
  • Push API receive messages from the server
  • Notification API display messages natively
slide-7
SLIDE 7

"Cross-platform" and "Cross-browser"

Desktop

+ Chrome + Firefox + Opera + Safari

Mobile (not iOS yet)

+ Chrome + Firefox + Opera

slide-8
SLIDE 8

Push API Notification API Service Workers

slide-9
SLIDE 9

Your App Message Server Client

How it works

2 1 3 4 4

slide-10
SLIDE 10

Message Server

Sends message to your customers

  • Accepts requests from your application
  • Application key and Client token must have
  • Dispatch message to the destination device
slide-11
SLIDE 11

Message Server

  • FCM: Google, free (former GCM)

Register and create application key in developer console

  • APNS: Apple, needs certified developer or 100$ annually
  • MSP: Mozilla Push Service, free. No registration required, open

standard

slide-12
SLIDE 12
slide-13
SLIDE 13

Your App Message Server Client

How it works

1 Subscribe, ask for client token

slide-14
SLIDE 14
slide-15
SLIDE 15

Your App Message Server Client

How it works

2 1 Get client token from Message Server

slide-16
SLIDE 16
slide-17
SLIDE 17

Your App Message Server Client

How it works

2 1 3 Return client token to the web app

slide-18
SLIDE 18
slide-19
SLIDE 19

Your App Message Server Client

How it works

2 1 3 4 4 Send notification to tokenized endpoint Enqueue message dispatch

slide-20
SLIDE 20

https://firebase.google.com/docs/cloud-messaging/http-server-ref

slide-21
SLIDE 21
slide-22
SLIDE 22

https://firebase.google.com/docs/cloud-messaging/http-server-ref

slide-23
SLIDE 23

https://firebase.google.com/docs/cloud-messaging/http-server-ref

slide-24
SLIDE 24
slide-25
SLIDE 25

messaging.onMessage event

slide-26
SLIDE 26

TTL (1 month by default)

slide-27
SLIDE 27

On time

slide-28
SLIDE 28

The Firebase JavaScript SDK way

  • Only client token needed, no encrypting payloads
  • Custom features
  • Supports Android, iOS and web
  • Easy to use

The VAPID way

  • No sender_id required
  • Chrome, Firefox supported (more will join)
  • No Account with GCM required
  • Tends to replace proprietary API
slide-29
SLIDE 29
slide-30
SLIDE 30

:(

  • No guarantee of delivery (even if browser opened and sw works)
  • Still no wide support
  • Every device needs to be registered
  • ...
slide-31
SLIDE 31

https://www.urbanairship.com https://pushpad.xyz https://www1.vizury.com https://moengage.com etc.

Why bother?

slide-32
SLIDE 32

Demo to play

https://killoff.github.io/serviceworker/

References

https://developers.google.com/web/fundamentals/push-notifications/ https://developers.google.com/web/updates/2016/07/web-push-interop-wins https://firebase.google.com https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7 https://github.com/digitaldrk/push_notifications

Q & A