Push Notification for Multiple Users

[NwinNwin]

Description

• NOTE: Push Notification only works on deployed website
• Push Notification functionality works BUT:
  • It can only send notification to 1 user
  • it's currently a backend route, we want to make it a function that send notification everytime there's a New Post
• TO FIX: we need to store users' subscription key(will talk ab this more in section below) in DB to query and send notification to all users that subscribed.

Would recommend watching this Video before starting to look at the instruction below as it helps you understand some concept of Push Notif in Web

Access our current TEST push notification :

• Go to zotnfound.com/playground:

  • For Code: go to components/Playground.jsx

• Open your console in inspect

• Click register for push notification

  • For Code: line 121 triggers function registerServiceWorker(line 25) to register serviceWorker (this allows push notif)

• Click subscribe for push notif

  • For Code: line 126 triggers function subscribeUser(line 42) to ask client for push notif permission
  • This will ask you to allow notification
    • 

• Once clicked subscribe, it will print out a json IN CONSOLE that looks like this {endpoint, p256dh, auth}

  • 
  • This is like a key or phone number that server can contact and send notification to.
    • For this task: WE WANT TO STORE THIS KEY IN DB to send them notification

• Once you copied the key and save it in a safe place, Run our ZotNFound backend locally (on branch webpush-api)

• Replace subscription value (Prev req.body) with that key (this will allow server to send notif to the subscribed browser key upon using the route)

  • 

• Open Postman

• Run POST localhost:3001/notification

• you will receive a push notification (let me know if you got any problem)

  • 

To Do:

• The problem right now is our webpush function can only send 1 to 1 subscribed users
• Create a route to store the key in our database when users subscribe for notification
• Create a push notification Function that take in an array of keys to send notifs to all of them
• Modify POST /items so that it can retrieve an array of keys from db and use the push notification Function to send notifs

Resources:

• Feel free to message Dang if you have any question
• Web Push Notifications YT Tutorial
• Web push Blog