describes how does web push notification look like and how does it work.

1. PWA
- Push notification -

2. Push notification
Request permissions
https://tests.peter.sh/notification-generator/

3. Push notification
https://tests.peter.sh/notification-generator/
unicode Long sentence image On PC

4. app.js Service-worker.js
background
Push notification
service worker base
①register
②installing

5. Push notification
service worker base
https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle

6. app.js Service-worker.js
background
①register
②installing
④add token
push event
⇒Registration.showNotification
Firebase DB
PushManager
Push notification
ready to get push notification

7. Service-worker.js
background
③notification
Signal sender Firebase
①send request
push event
⇒Registration.showNotification
Messaging server
Push notification
send push
Signal sender cannot
send a message

8. Service-worker.js
background
⑤notification
Signal sender
Firebase
①send request
push event
⇒Registration.showNotification
Messaging server
Push notification
send push
Message sender
So is possible
through fetch event

9. Push notification
no firebase
app.js Service-worker.js
background
Cannot handle browser UI

10. Push notification
no firebase
Service-worker.js
background
MessageChannel
app.js

11. Push notification
http://caniuse.com/#feat=channel-messaging

12. Push notification
no firebase
Service-worker.js
background
MessageChannel
message event
⇒Registration.showNotification
app.js

13. Push notification
no firebase
Service-worker.js
background
MessageChannel
Browser UI
What if the browser is closed?
app.js

14. Push notification
pros. and cons.
• Messaging server + Firebase
+ able to receive push whether browser is open or closed once service worker installed
+- able to send push at once per token group
• Web server only
+ no need additional service such as Firebase
+ able to set condition to send push
- cannot receive push when browser closed