Frontend Academy · Pelajaran

Pemberitahuan Tolak

Minta kebenaran, langgan tolak dengan Push API, terima mesej dalam Service Worker, dan paparkan pemberitahuan dengan showNotification.

Pelajaran 4 daripada 415 langkah

Pemberitahuan Tolak ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Mengapa Pemberitahuan Tolak?

Pemberitahuan tolak menggalakkan pengguna kembali apabila aplikasi tidak dibuka — amaran mesej, kemas kini berita dan peringatan tentang troli yang ditinggalkan. Dikuasakan oleh pekerja servis (jadi ia berfungsi walaupun halaman ditutup).

API Tolak + API Pemberitahuan

Dua API pelayar berfungsi bersama. API Tolak menerima mesej daripada pelayan melalui langganan tolak. API Pemberitahuan memaparkan mesej kepada pengguna.

Meminta Kebenaran

Minta kebenaran pengguna sebelum melanggan — lakukan ini hanya sebagai respons kepada tindakan pengguna yang jelas (klik butang), bukan semasa halaman dimuatkan.

async function enableNotifications() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    alert('Notifications denied');
    return;
  }
  // proceed to subscribe...
}

Langganan Tolak

Langgan melalui pendaftaran pekerja servis yang aktif. Kunci awam VAPID pelayan mengesahkan langganan tersebut.

async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true, // required: every push must show a notification
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  // Send sub to your server:
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(sub)
  });
}

Kunci VAPID

Kunci VAPID (Pengenalan Pelayan Aplikasi Sukarela) mengenal pasti pelayan anda kepada perkhidmatan tolak (FCM, Mozilla dan sebagainya). Jana sekali dan simpan kunci peribadi pada pelayan anda.

# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys

# Output:
# Public Key: BJ...
# Private Key: ka...

Tolak pada Bahagian Pelayan

Gunakan pustaka npm web-push untuk menghantar tolak kepada langganan yang disimpan.

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

await webpush.sendNotification(savedSubscription, JSON.stringify({
  title: 'New message',
  body: 'Alice sent you a message',
  url: '/inbox/123'
}));

Mengendalikan Tolak dalam Pekerja Servis

SW menerima peristiwa tolak dan memaparkan pemberitahuan.

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notification', {
      body: data.body,
      icon: '/icons/192.png',
      badge: '/icons/badge.png',
      data: { url: data.url }
    })
  );
});

Pengendali Klik Pemberitahuan

Buka atau fokuskan aplikasi apabila pengguna mengklik pemberitahuan.

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data.url || '/';
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(clientList => {
      for (const client of clientList) {
        if (client.url.endsWith(url) && 'focus' in client) return client.focus();
      }
      return clients.openWindow(url);
    })
  );
});

Pilihan Pemberitahuan

Sesuaikan: ikon, lencana (ikon kawasan pemberitahuan kecil), imej (besar), tindakan (butang), teg (gantikan pemberitahuan lama dengan teg yang sama), requireInteraction (kekal sehingga ditutup), senyap.

self.registration.showNotification('Message', {
  body: 'Alice sent you a photo',
  icon: '/icons/192.png',
  image: '/images/alice-photo.jpg',
  actions: [
    { action: 'view', title: 'View' },
    { action: 'reply', title: 'Reply' }
  ],
  tag: 'message-from-alice', // replaces earlier 'message-from-alice'
  requireInteraction: false
});

Membatalkan Langganan

Benarkan pengguna menarik diri — panggil pushSubscription.unsubscribe() dan alih keluar langganan daripada pelayan anda.

async function disablePush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.getSubscription();
  if (sub) {
    await sub.unsubscribe();
    await fetch('/api/delete-subscription', {
      method: 'POST',
      body: JSON.stringify({ endpoint: sub.endpoint })
    });
  }
}

Sokongan iOS

iOS 16.4+ menyokong Web Push, tetapi hanya untuk PWA yang dipasang pada Skrin Utama. Peranti sebelum iOS 16.4 dan Safari pada web iPhone tidak menyokong tolak web sama sekali.

Amalan Terbaik

1) Minta kebenaran hanya selepas tindakan pengguna yang jelas. 2) Hantar pemberitahuan yang bermakna dan tidak terlalu kerap. 3) Sentiasa paparkan pemberitahuan untuk setiap peristiwa tolak (pelayar mungkin menarik balik kebenaran jika anda tidak berbuat demikian). 4) Sediakan cara mudah untuk membatalkan langganan. 5) Uji dengan ketiga-tiga perkhidmatan tolak (FCM, Mozilla dan WindowsPush).

Perangkap Lazim

Tolak gagal secara senyap jika: userVisibleOnly ialah false (Chrome memerlukan true), kunci VAPID tidak sepadan, langganan telah tamat tempoh (langgan semula), tiada pemberitahuan dipaparkan untuk peristiwa tolak (pelayar menarik balik kebenaran).

Semakan Ringkas

Mengapakah setiap mesej tolak mesti menghasilkan pemberitahuan yang boleh dilihat (dengan userVisibleOnly: true)?

Jawab dalam pelajaran interaktif

Ringkasan: Pemberitahuan Tolak

Minta kebenaran hanya melalui tindakan pengguna. Langgan melalui reg.pushManager.subscribe dengan kunci awam VAPID. Pelayan menggunakan pustaka web-push untuk menghantar mesej. Peristiwa tolak SW memanggil showNotification. Klik pemberitahuan membuka atau memfokuskan aplikasi anda. Sesuaikan ikon/lencana/imej/tindakan/teg. Sentiasa paparkan pemberitahuan (userVisibleOnly: true diperlukan). iOS 16.4+ menyokongnya, tetapi hanya untuk PWA yang dipasang.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemberitahuan Tolak” percuma?

Ya — teks penuh “Pemberitahuan Tolak” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemberitahuan Tolak”?

Minta kebenaran, langgan tolak dengan Push API, terima mesej dalam Service Worker, dan paparkan pemberitahuan dengan showNotification. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pemberitahuan Tolak” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Manifest Aplikasi Web
Pendaftaran dan Kitar Hayat Service Worker
Strategi Cache Luar Talian: CacheFirst dan NetworkFirst
Pemberitahuan Tolak

← Kembali ke Frontend Academy