Cara Tambah Notifikasi pada Aplikasi Anda: Dalam Aplikasi, E-mel dan Push

Untuk menambah notifikasi pada aplikasi web, mulakan dengan notifikasi dalam aplikasi: jadual notifikasi dalam pangkalan data anda dan ikon loceng yang menunjukkan item yang belum dibaca. Tambah e-mel untuk perkara yang orang perlu tahu apabila mereka tiada, menggunakan pembekal e-mel, dan tambah web push hanya apabila amaran tepat pada masa penting, kerana ia memerlukan service worker, kebenaran pengguna dan, pada iPhone, aplikasi disimpan ke Skrin Utama. Apa pun saluran yang anda guna, cipta setiap notifikasi di satu tempat di pelayan dan biarkan pengguna memilih apa yang mereka terima.

Panduan ini membandingkan saluran, menunjukkan seni bina yang ringkas, dan memberi prompt yang boleh anda gunakan dengan pembina aplikasi AI.

Perbandingan saluran utama

Kebanyakan aplikasi memerlukan dalam aplikasi ditambah e-mel. Push dan SMS berberbaloi apabila masa benar-benar penting, seperti peringatan tempahan atau pesanan yang sudah siap.

Bagaimana sistem notifikasi bersatu

Kekalkan ia ringkas dan berpusat:

1. Sesuatu berlaku. Komen dihantar, bayaran gagal, tempahan esok.
2. Pelayan anda memanggil satu fungsi, seperti notify(user, type, data).
3. Fungsi itu menyemak keutamaan pengguna dan menulis baris ke jadual notifications (untuk loceng).
4. Ia kemudian menghantar ke saluran lain yang pengguna telah hidupkan untuk jenis itu: e-mel melalui pembekal anda, push melalui Push API.
5. Antara muka menunjukkan notifikasi yang belum dibaca dan menandakannya sebagai dibaca apabila dibuka.

Satu titik masuk bermaksud anda boleh menambah saluran, menukar ayat, atau menghormati keutamaan tanpa mencari di seluruh kod sumber.

Apa yang perlu disimpan

Jadual notifikasi biasanya memerlukan: ID pengguna, jenis (contohnya comment_reply), tajuk dan kandungan ringkas, pautan ke halaman berkaitan, masa dicipta, dan masa dibaca. Jadual keutamaan berasingan menyimpan saluran mana yang setiap pengguna mahu bagi setiap jenis.

Memaparkan notifikasi baharu

• Muat semasa melihat halaman dan buat pengundian setiap 30–60 saat. Mudah dan boleh dipercayai.
• Kemas kini masa nyata dengan WebSockets atau server-sent events terasa serta-merta tetapi menambah bahagian yang bergerak. Mulakan dengan pengundian melainkan kemas kini serta-merta penting.

Notifikasi e-mel

E-mel memerlukan pembekal penghantaran dan domain yang disahkan; butirannya ada dalam cara menghantar e-mel dari aplikasi anda. Untuk notifikasi khususnya:

• Hantar dari pelayan, jangan sekali-kali dengan kunci pembekal dalam pelayar.
• Kumpulkan peristiwa yang kerap. "3 komen baharu" dalam satu e-mel lebih baik daripada tiga e-mel.
• Tawarkan ringkasan harian atau mingguan untuk aktiviti berkeutamaan rendah.
• Sertakan pautan nyahlanggan atau keutamaan dalam e-mel yang tidak penting. Peraturan untuk e-mel pemasaran berbeza mengikut negara; semak apa yang terpakai kepada anda.

Notifikasi web push

Web push membolehkan laman anda menghantar amaran yang muncul seperti notifikasi aplikasi. Mengikut dokumentasi Push API MDN, ia berfungsi begini:

1. Laman anda mendaftarkan service worker, skrip yang boleh dijalankan pelayar di latar belakang.
2. Selepas pengguna setuju, service worker melanggan melalui PushManager.subscribe(). Pelayar memulangkan langganan dengan titik akhir dan kunci penyulitan.
3. Pelayan anda menyimpan langganan itu dan, apabila sesuatu berlaku, menghantar mesej ke titik akhir, biasanya ditandatangani dengan kunci VAPID (pasangan kunci yang mengenal pasti pelayan anda).
4. Pelayar memulakan service worker anda, yang memaparkan notifikasi, walaupun halaman anda tidak dibuka.

MDN juga menyatakan titik akhir itu perlu dirahsiakan, kerana mengetahuinya sudah cukup untuk menghantar mesej kepada pengguna itu.

iPhone dan iPad

WebKit menambah Web Push untuk aplikasi web dalam iOS dan iPadOS 16.4, dengan dua syarat daripada pengumumannya: laman mesti ditambah ke Skrin Utama, dan kebenaran mesti diminta sebagai respons kepada tindakan pengguna seperti ketukan pada butang Langgan. Jadi di iPhone, push hanya sampai kepada pengguna yang telah memasang aplikasi web anda. Lihat aplikasi native vs aplikasi web progresif untuk maksud memasang aplikasi web.

Meminta kebenaran dengan betul

Jangan minta pada lawatan pertama. Terangkan manfaatnya dahulu ("Dapatkan peringatan sejam sebelum kelas anda"), kemudian tunjukkan gesaan pelayar apabila pengguna mengetik butang. Jika seseorang menolak, pelayar mungkin tidak membenarkan anda bertanya lagi, jadi gesaan pramatang boleh kehilangan mereka selamanya.

Notifikasi berjadual memerlukan pencetus

"Peringatan 24 jam sebelum" atau "ringkasan mingguan setiap Isnin" memerlukan sesuatu untuk berjalan mengikut jadual. Itu masalah kerja latar belakang, dibincangkan dalam cara menjalankan kerja latar belakang. Corak biasa: penjadual luaran memanggil titik akhir yang dilindungi setiap beberapa minit, dan titik akhir itu menghantar apa sahaja yang sudah tiba masanya.

Prompt untuk diberikan kepada pembina AI anda

Mulakan dengan dalam aplikasi:

Tambah notifikasi dalam aplikasi. Cipta jadual notifikasi (pengguna, jenis, tajuk, kandungan, pautan, created_at, read_at). Tambah fungsi pelayan notify(userId, type, data) yang dipanggil oleh setiap ciri. Papar ikon loceng dalam pengepala dengan kiraan belum dibaca, menu lungsur 20 terkini, dan butang "tandakan semua sebagai dibaca". Semak notifikasi baharu setiap 60 saat.

Kemudian keutamaan dan e-mel:

Tambah tetapan notifikasi: bagi setiap jenis (balasan komen, sebutan, bil), benarkan pengguna memilih dalam aplikasi, e-mel, kedua-duanya atau tiada. notify() mesti menghormati ini. Hantar e-mel melalui [PEMBEKAL] menggunakan rahsia [NAMA_ENV] di pelayan sahaja. Kumpulkan e-mel komen supaya seorang pengguna menerima paling banyak satu e-mel setiap 15 minit.

Kemudian push, jika anda memerlukannya:

Tambah web push pilihan. Daftarkan service worker, jana kunci VAPID dan simpan kunci persendirian sebagai rahsia. Tambah butang "Dayakan notifikasi" dalam tetapan yang meminta kebenaran hanya apabila diklik. Simpan setiap langganan mengikut pengguna dan peranti, hantar push dari notify() apabila pengguna memilih untuk menerimanya, dan padam langganan yang dilaporkan tamat tempoh oleh perkhidmatan push.

Kesilapan biasa

• Notifikasi bertebaran dalam kod. Setiap ciri menghantar e-mel sendiri dengan cara berbeza, dan keutamaan diabaikan. Gunakan satu fungsi notify().
• Meminta kebenaran push semasa halaman dimuatkan. Kebanyakan orang menolak, dan anda mungkin tidak dapat peluang kedua.
• Tiada keutamaan. Pengguna yang tidak boleh mematikan amaran bising akan mematikan semuanya, atau pergi.
• Menghantar dari pelayar. Kunci e-mel dan push tergolong di pelayan.
• Tidak membersihkan langganan push yang mati. Langganan tamat tempoh bertimbun dan membazirkan penghantaran.
• Butiran sensitif dalam kandungan notifikasi. Skrin kunci memaparkannya. "Anda ada mesej baharu" lebih selamat daripada mesej itu sendiri.
• Tiada rekod apa yang dihantar. Apabila pengguna berkata "saya tidak pernah terima e-mel", log dengan ID mesej pembekal membantu anda mengetahui sebabnya.

Senarai semak

• Satu fungsi notify() di sebelah pelayan digunakan di mana-mana
• Jadual notifikasi dengan status baca, dan loceng dengan kiraan belum dibaca
• Keutamaan saluran mengikut jenis, dihormati oleh notify()
• E-mel dihantar dari pelayan dengan domain yang disahkan; ringkasan atau kumpulan untuk peristiwa yang kerap
• Kebenaran push diminta hanya selepas tindakan pengguna, dengan penjelasan
• Push diuji pada desktop dan pada iPhone dengan aplikasi ditambah ke Skrin Utama
• Langganan push yang tamat tempoh dialih keluar
• Tiada kandungan sensitif dalam pratonton push atau e-mel
• Peringatan berjadual mempunyai pencetus yang boleh dipercayai

Notifikasi dalam Mythex

Mythex tidak menyertakan perkhidmatan e-mel atau push terbina dalam untuk aplikasi yang anda bina, jadi anda membawa pembekal e-mel sendiri dan menjana kunci push sendiri, yang disimpan sebagai rahsia projek. Bahagian dalam aplikasi hanya memerlukan pangkalan data projek, yang Mythex tambahkan apabila anda memintanya. Bina dengan prompt seperti di atas, uji loceng dan e-mel dalam Pratonton, dan uji push pada URL yang diterbitkan, kerana service worker dan push memerlukan alamat HTTPS sebenar. Resipi dokumentasi Hantar e-mel dari aplikasi anda mempunyai prompt permulaan. Mythex tidak mendokumentasikan kerja berjadual, jadi rancang peringatan bermasa dengan pencetus luaran seperti yang diterangkan dalam cara menjalankan kerja latar belakang.

Soalan lazim