Cara Menambahkan Notifikasi ke Aplikasi: Dalam Aplikasi, Email, dan Push

Untuk menambahkan notifikasi ke aplikasi web, mulailah dengan notifikasi dalam aplikasi: tabel notifikasi di database dan ikon lonceng yang menampilkan item yang belum dibaca. Tambahkan email untuk hal-hal yang perlu diketahui pengguna saat mereka sedang tidak di aplikasi, dengan menggunakan penyedia email, dan tambahkan web push hanya jika peringatan tepat waktu benar-benar penting, karena web push membutuhkan service worker, izin pengguna, dan — di iPhone — aplikasi yang disimpan ke Layar Utama. Apa pun saluran yang kamu pakai, buat setiap notifikasi di satu tempat di server dan biarkan pengguna memilih apa yang ingin mereka terima.

Panduan ini membandingkan saluran-saluran tersebut, menunjukkan arsitektur sederhana, dan memberikan prompt yang bisa kamu pakai dengan AI app builder.

Perbandingan saluran utama

Kebanyakan aplikasi membutuhkan dalam aplikasi ditambah email. Push dan SMS layak digunakan ketika waktunya benar-benar penting, seperti pengingat pemesanan atau pesanan yang sudah siap.

Cara sistem notifikasi bekerja bersama

Buat sederhana dan terpusat:

1. Sesuatu terjadi. Komentar dikirim, pembayaran gagal, pemesanan jatuh tempo besok.
2. Server kamu memanggil satu fungsi, misalnya notify(user, type, data).
3. Fungsi itu memeriksa preferensi pengguna lalu menulis baris ke tabel notifications (untuk lonceng).
4. Kemudian mengirim ke saluran lain yang diaktifkan pengguna untuk jenis tersebut: email lewat penyedia email kamu, push lewat Push API.
5. Frontend menampilkan notifikasi yang belum dibaca dan menandainya sudah dibaca saat dibuka.

Satu titik masuk berarti kamu bisa menambah saluran, mengubah kalimat, atau menghormati preferensi tanpa mencari-cari di seluruh codebase.

Apa yang disimpan

Tabel notifikasi biasanya membutuhkan: ID pengguna, jenis (misalnya comment_reply), judul dan isi singkat, tautan ke halaman terkait, waktu dibuat, dan waktu dibaca. Tabel preferensi terpisah menyimpan saluran mana yang diinginkan setiap pengguna untuk setiap jenis.

Menampilkan notifikasi baru

• Muat saat halaman dibuka dan polling setiap 30–60 detik. Sederhana dan andal.
• Pembaruan real-time dengan WebSocket atau server-sent events terasa instan tetapi menambah bagian yang bergerak. Mulailah dengan polling kecuali pembaruan instan benar-benar penting.

Notifikasi email

Email membutuhkan penyedia pengiriman dan domain yang terverifikasi; detailnya ada di cara mengirim email dari aplikasi kamu. Untuk notifikasi secara khusus:

• Kirim dari server, jangan pernah dengan key penyedia di browser.
• Gabungkan kejadian yang ramai. "3 komentar baru" dalam satu email lebih baik daripada tiga email.
• Tawarkan ringkasan harian atau mingguan untuk aktivitas berprioritas rendah.
• Sertakan tautan berhenti berlangganan atau preferensi di email yang tidak esensial. Aturan untuk email pemasaran berbeda di tiap negara; periksa apa yang berlaku untukmu.

Web push notification

Web push memungkinkan situs kamu mengirim peringatan yang muncul seperti notifikasi aplikasi. Menurut dokumentasi Push API di MDN, cara kerjanya sebagai berikut:

1. Situs kamu mendaftarkan service worker, yaitu skrip yang bisa dijalankan browser di latar belakang.
2. Setelah pengguna setuju, service worker berlangganan melalui PushManager.subscribe(). Browser mengembalikan subscription berisi endpoint dan kunci enkripsi.
3. Server kamu menyimpan subscription tersebut dan, saat ada kejadian, mengirim pesan ke endpoint, biasanya ditandatangani dengan kunci VAPID (pasangan kunci yang mengidentifikasi server kamu).
4. Browser menjalankan service worker kamu, yang menampilkan notifikasi, bahkan saat halaman kamu tidak terbuka.

MDN juga mencatat bahwa endpoint harus dirahasiakan, karena siapa pun yang mengetahuinya sudah cukup untuk mengirim pesan ke pengguna tersebut.

iPhone dan iPad

WebKit menambahkan Web Push untuk aplikasi web di iOS dan iPadOS 16.4, dengan dua syarat dari pengumumannya: situs harus ditambahkan ke Layar Utama, dan izin harus diminta sebagai respons terhadap tindakan pengguna, seperti mengetuk tombol Subscribe. Jadi di iPhone, push hanya sampai ke pengguna yang sudah memasang aplikasi web kamu. Lihat aplikasi native vs progressive web app untuk memahami apa arti memasang aplikasi web.

Meminta izin dengan baik

Jangan meminta saat kunjungan pertama. Jelaskan manfaatnya dulu ("Dapatkan pengingat satu jam sebelum kelas kamu"), lalu tampilkan prompt browser saat pengguna mengetuk tombol. Jika seseorang menolak, browser mungkin tidak mengizinkan kamu bertanya lagi, jadi prompt yang terlalu dini bisa kehilangan mereka selamanya.

Notifikasi terjadwal membutuhkan pemicu

"Pengingat 24 jam sebelumnya" atau "ringkasan mingguan setiap Senin" membutuhkan sesuatu yang berjalan sesuai jadwal. Itu masalah background job, yang dibahas dalam cara menjalankan background job. Pola yang umum: penjadwal eksternal memanggil endpoint yang dilindungi setiap beberapa menit, dan endpoint itu mengirim apa pun yang sudah jatuh tempo.

Prompt untuk AI builder kamu

Mulai dengan dalam aplikasi:

Tambahkan notifikasi dalam aplikasi. Buat tabel notifications (user, type, title, body, link, created_at, read_at). Tambahkan fungsi server notify(userId, type, data) yang dipanggil setiap fitur. Tampilkan ikon lonceng di header dengan jumlah yang belum dibaca, dropdown untuk 20 notifikasi terbaru, dan tombol "tandai semua sudah dibaca". Lakukan polling setiap 60 detik untuk notifikasi baru.

Lalu preferensi dan email:

Tambahkan pengaturan notifikasi: untuk setiap jenis (balasan komentar, mention, tagihan), biarkan pengguna memilih dalam aplikasi, email, keduanya, atau tidak sama sekali. notify() harus menghormati pengaturan ini. Kirim email lewat [PROVIDER] menggunakan secret [ENV_NAME] hanya di server. Kelompokkan email komentar sehingga satu pengguna menerima paling banyak satu email per 15 menit.

Lalu push, jika kamu membutuhkannya:

Tambahkan web push opsional. Daftarkan service worker, buat kunci VAPID dan simpan kunci privat sebagai secret. Tambahkan tombol "Aktifkan notifikasi" di pengaturan yang meminta izin hanya saat diklik. Simpan setiap subscription per pengguna dan perangkat, kirim push dari notify() saat pengguna telah memilih ikut, dan hapus subscription yang dilaporkan kedaluwarsa oleh layanan push.

Kesalahan yang sering terjadi

• Notifikasi tersebar di seluruh kode. Setiap fitur mengirim email dengan cara sendiri, dan preferensi terabaikan. Gunakan satu fungsi notify().
• Meminta izin push saat halaman dimuat. Kebanyakan orang menolak, dan kamu mungkin tidak punya kesempatan lagi.
• Tidak ada preferensi. Pengguna yang tidak bisa mematikan peringatan yang mengganggu akan mematikan semuanya, atau pergi.
• Mengirim dari browser. Key email dan push seharusnya berada di server.
• Tidak membersihkan subscription push yang mati. Subscription kedaluwarsa menumpuk dan membuang pengiriman.
• Detail sensitif di teks notifikasi. Layar kunci menampilkannya. "Kamu punya pesan baru" lebih aman daripada isi pesannya.
• Tidak ada catatan apa yang terkirim. Saat pengguna berkata "Saya tidak pernah menerima email", log dengan ID pesan dari penyedia membantu kamu mencari tahu penyebabnya.

Checklist

• Satu fungsi notify() di sisi server yang dipakai di mana-mana
• Tabel notifikasi dengan status baca, dan lonceng dengan jumlah belum dibaca
• Preferensi saluran per jenis, dihormati oleh notify()
• Email dikirim dari server dengan domain terverifikasi; ringkasan atau pengelompokan untuk kejadian yang ramai
• Izin push diminta hanya setelah tindakan pengguna, dengan penjelasan
• Push diuji di desktop dan di iPhone dengan aplikasi ditambahkan ke Layar Utama
• Subscription push yang kedaluwarsa dihapus
• Tidak ada konten sensitif di pratinjau push atau email
• Pengingat terjadwal punya pemicu yang andal

Notifikasi di Mythex

Mythex tidak menyertakan layanan email atau push bawaan untuk aplikasi yang kamu buat, jadi kamu membawa penyedia email sendiri dan membuat kunci push sendiri, yang disimpan sebagai secret proyek. Bagian dalam aplikasi hanya membutuhkan database proyek, yang ditambahkan Mythex saat kamu memintanya. Buat dengan prompt seperti di atas, uji lonceng dan email di Preview, dan uji push di URL yang sudah dipublikasikan, karena service worker dan push membutuhkan alamat HTTPS yang nyata. Resep dokumentasi Kirim email dari aplikasi kamu memiliki prompt awal. Mythex belum mendokumentasikan job terjadwal, jadi rencanakan pengingat berwaktu dengan pemicu eksternal seperti dijelaskan di cara menjalankan background job.

Pertanyaan