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

1
serviceWorkerRegistration.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

1
2
const options = { applicationServerKey, userVisibleOnly: true }
const 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
2

web-push generate-vapid-keys

kalo udah kalian bakal dpt hasil kayak gini

1
2
3
4
5
6
7
8
9
=======================================

Public Key:
BMcLB-   hC5z3mKdmc01vGroo2BRc7y9PaHoqVk5And21bgDTL3FMKaViEvxc_e3eIcsKSTpz114VQfkNpxU7u8v8

Private Key:
WL0wpGzCdIMFIvxNs8HBOOziBCDk5Sba51u72uIk25E

=======================================

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import webpush from "web-push"

export const pushNotif = async (subs, title, msg) => {
  const vapidKeys = {
    publicKey:
      "BMcLB-hC5z3mKdmc01vGroo2BRc7y9PaHoqVk5And21bgDTL3FMKaViEvxc_e3eIcsKSTpz114VQfkNpxU7u8v8",
    privateKey: "WL0wpGzCdIMFIvxNs8HBOOziBCDk5Sba51u72uIk25E",
  }
  try {
    const subject = "< 'mailto' Address or URL >"
    webpush.setVapidDetails(
      subject,
      vapidKeys.publicKey,
      vapidKeys.privateKey
    )
    await webpush.sendNotification(
      subs,
      JSON.stringify({ title: title, msg: msg })
    )
  } catch (e) {
    if (e.statusCode != 410) console.log(e)
  }
}

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

1
2
3
4
import { pushNotif } from "../sendNotif";

//terus kalian tinggal query buat ambil subs trus panggil fungsi tadi buat pake
pushNotif(subs,"Ini judul,"Ini isi pesan")

3. Listen push masuk di service worker

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

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

Kelar deh~

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