Vue Academy · Pelajaran

Notifikasi Push di Vue PWA

Push API, Notification API, kunci VAPID, berlangganan pengguna, serta pengiriman dari server.

Notifikasi Push di Vue PWA adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Notifikasi Push di PWA

Web Push memungkinkan server Anda mengirim notifikasi kepada pengguna meskipun aplikasi sedang tertutup. Fitur ini menggabungkan API Notifikasi, API Push, dan pekerja layanan, yang semuanya bergantung pada izin eksplisit dari pengguna.

Meminta Izin

Anda harus meminta izin sebelum berlangganan. Notification.requestPermission() mengembalikan promise yang diselesaikan dengan nilai "granted", "denied", atau "default".

const permission = await Notification.requestPermission();
if (permission === "granted") {
  // proceed to subscribe
}

Dipicu oleh Tindakan Pengguna

Peramban mengharuskan dialog permintaan izin muncul setelah tindakan pengguna, seperti klik tombol. Jangan pernah memintanya saat halaman dimuat—permintaan itu akan diabaikan atau mengganggu pengguna.

<button @click="enableNotifications">
  Enable notifications
</button>

Mendapatkan Registrasi Pekerja Layanan

subscription Push berada pada registrasi pekerja layanan yang aktif. Tunggu navigator.serviceWorker.ready untuk mendapatkannya.

const registration = await navigator.serviceWorker.ready;

applicationServerKey

Push menggunakan kunci VAPID. Server menyimpan kunci privat; klien berlangganan menggunakan kunci publik yang dikonversi menjadi Uint8Array.

function urlBase64ToUint8Array(base64) {
  const padding = "=".repeat((4 - base64.length % 4) % 4);
  const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

pushManager.subscribe

Berlanggananlah melalui pushManager pada registrasi tersebut. Atur userVisibleOnly: true dan teruskan applicationServerKey yang telah dikonversi.

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});

Mengapa userVisibleOnly

userVisibleOnly: true menjamin bahwa setiap Push akan menampilkan notifikasi yang terlihat. Peramban mengharuskannya untuk mencegah pelacakan latar belakang secara diam-diam.

Mengirim subscription ke Server Anda

Objek subscription berisi endpoint dan kunci yang dibutuhkan server. Kirimkan objek itu dengan POST ke backend Anda untuk disimpan dan digunakan pada pengiriman berikutnya.

await fetch("/api/subscribe", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription)
});

Server Mengirim Push

Backend Anda menggunakan pustaka Web Push dan kunci privat VAPID untuk mengirim payload ke endpoint yang tersimpan.

// Node backend (web-push library)
webpush.sendNotification(
  subscription,
  JSON.stringify({ title: "Hello", body: "New message" })
);

Menerima Push di Pekerja Layanan

Pekerja layanan menangani peristiwa push dan memanggil showNotification untuk menampilkannya.

// service worker
self.addEventListener("push", (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/pwa-192.png"
    })
  );
});

Menangani Klik Notifikasi

Tanggapi klik menggunakan peristiwa notificationclick untuk memfokuskan atau membuka aplikasi pada halaman yang tepat.

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/inbox"));
});

Pemeriksaan Singkat

Mengapa userVisibleOnly: true diperlukan saat berlangganan Push?

Ringkasan

Web Push dimulai dengan Notification.requestPermission() dari tindakan pengguna, lalu dilanjutkan dengan registration.pushManager.subscribe menggunakan userVisibleOnly: true dan applicationServerKey. Kirimkan subscription ke server Anda, yang kemudian mengirim payload yang diterima pekerja layanan dalam peristiwa push dan ditampilkan dengan showNotification.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Notifikasi Push di Vue PWA” gratis?

Ya — teks lengkap “Notifikasi Push di Vue PWA” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Notifikasi Push di Vue PWA”?

Push API, Notification API, kunci VAPID, berlangganan pengguna, serta pengiriman dari server. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Notifikasi Push di Vue PWA” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan vite-plugin-pwa
Strategi Service Worker
Dukungan Offline dan Sinkronisasi Latar Belakang
Notifikasi Push di Vue PWA

← Kembali ke Vue Academy