How to design the Push Notification System

Web Push Supported Platform:

• Desktop Device:
• Chrome/Firefox/Opera/Safari
• Mobile Device: Only Android(IOS 不work)
• Chrome/Firefox

First, register your service worker file - sw.js

Send back your register token and device ID to your push server then it will identify this client

Listen your push event in sw.js from push server

Show your notification

Format

• Title(文字)
• Body(文字)
• Link 點擊連結
• Icon 圖片(只可設定一張)
• Badge: logo(透明灰 on mobile)

Then client will see as below