Membuat Web Push Notif

Jadi gw dpt tugas yg memerlukan sebuah notif, dan setelah berdiskusi akhirnya diputuskanlah buat pake push notif karena kebutuhanya simple juga.. jadilah gw explore gimana bikinya.. btw, sebelum lanjutin baca gw mau ngasih tau dulu disini gw pake backend node js, dan blm pernah coba dengan bahasa lainnya..

ok.. jadi, buat bikin push notif simplenya sbnernya cuma butuh beberapa fungsi yaitu showNotification dan subscription untuk di client side, dan sendNotification dari lib web-push

o iya sperti yang kalian liat showNotification dan subscription perlu service worker untuk jalanin fungsinya, jadi kalian cuma bisa pake fungsi ini kalo kalian udah pasang service worker di web kalian

simplenya, sebenernya munculin notif di browser itu cuma perlu

1serviceWorkerRegistration.showNotification(title, [options]);

Tapi itu cuma berlaku buat munculin notifnya aja.. nah, gimana kalo kita pengen request show notif dari server? yang kita perluin:

1. Subscription

ok, kalo kalian udah pasang service worker di web kalian, kalian bisa coba panggil

1const options = { applicationServerKey, userVisibleOnly: true }
2const subscription = await sw.pushManager.subscribe(options)

nah buat dapetin applicationServerKey kalian bisa pake lib web-push, cara installnya tinggal

1 npm install web-push -g

kemudian kalian run command

1
2web-push generate-vapid-keys
3

kalo udah kalian bakal dpt hasil kayak gini

1=======================================
2
3Public Key:
4BMcLB-   hC5z3mKdmc01vGroo2BRc7y9PaHoqVk5And21bgDTL3FMKaViEvxc_e3eIcsKSTpz114VQfkNpxU7u8v8
5
6Private Key:
7WL0wpGzCdIMFIvxNs8HBOOziBCDk5Sba51u72uIk25E
8
9=======================================

trus kalian taro public kalian untuk applicationServerKey diatasnah kalo udah, return dari subcribe tadi bisa kalian kirim ke backend trus kalian simpen.kalo gw sih simpen di table users aja, biar gampang aja.. jadi misal butuh kirim notif si username ‘A’ tinggal select subscribe from users where username = 'A'

2. PushNotif dari server

nah selanjutnya, untuk backendnya misal gw buat sendNotif.js

1import webpush from "web-push"
2
3export const pushNotif = async (subs, title, msg) => {
4  const vapidKeys = {
5    publicKey:
6      "BMcLB-hC5z3mKdmc01vGroo2BRc7y9PaHoqVk5And21bgDTL3FMKaViEvxc_e3eIcsKSTpz114VQfkNpxU7u8v8",
7    privateKey: "WL0wpGzCdIMFIvxNs8HBOOziBCDk5Sba51u72uIk25E",
8  }
9  try {
10    const subject = "< 'mailto' Address or URL >"
11    webpush.setVapidDetails(
12      subject,
13      vapidKeys.publicKey,
14      vapidKeys.privateKey
15    )
16    await webpush.sendNotification(
17      subs,
18      JSON.stringify({ title: title, msg: msg })
19    )
20  } catch (e) {
21    if (e.statusCode != 410) console.log(e)
22  }
23}

public dan private key kita dapat dari hasil generate diatas, subject sesuai dari sini web-push bisa diisi url ato email

nah cara pakenya jadi tinggal

1import { pushNotif } from "../sendNotif";
2
3//terus kalian tinggal query buat ambil subs trus panggil fungsi tadi buat pake
4pushNotif(subs,"Ini judul,"Ini isi pesan")

3. Listen push masuk di service worker

untuk step ini , kalian cuma perlu nambahin ini di sw kalian

1self.addEventListener("push", function(event) {
2  if (event.data) {
3    const { title, msg } = event.data.json()
4    self.registration.showNotification(title, {
5      body: msg,
6    })
7  }
8})

Kelar deh~

segitu dulu tulisan kali ini, maap ga rapih.. namanya juga masih belajar 😜