Rumah >hujung hadapan web >tutorial js >Cara membuat pemberitahuan tolak tersuai

Cara membuat pemberitahuan tolak tersuai

王林
王林asal
2024-08-25 06:38:13709semak imbas

How to make custom push notification

Untuk membina sistem pemberitahuan tolak tersuai seperti yang diterangkan, anda memerlukan pelbagai teknologi, pakej dan perpustakaan. Berikut ialah senarai komprehensif timbunan teknologi yang akan anda gunakan, dibahagikan kepada bahagian klien, bahagian pelayan dan alatan umum.

1. Sebelah Pelanggan (Frontend)

Ini ialah teknologi dan perpustakaan yang digunakan dalam penyemak imbas pengguna.

  • HTML/CSS/JavaScript:

    • Teknologi web standard untuk membina bahagian hadapan tapak web anda.
  • Pekerja Perkhidmatan:

    • Tujuan: Mengendalikan tugas latar belakang, termasuk menerima dan memaparkan pemberitahuan tolak.
    • Fail: service-worker.js.
  • Push API:

    • Tujuan: Membenarkan aplikasi web menerima mesej tolak yang dihantar daripada pelayan.
  • API Pemberitahuan:

    • Tujuan: Memaparkan pemberitahuan kepada pengguna.
  • Perpustakaan VAPID Web (Pilihan):

    • Tujuan: Utiliti untuk menukar kunci awam VAPID daripada Base64 kepada Uint8Array.
    • Pakej: Anda boleh menulis fungsi utiliti anda sendiri atau menggunakan perpustakaan sedia ada jika perlu.

2. Bahagian Pelayan (Bandar Belakang)

Ini ialah teknologi dan perpustakaan yang dijalankan pada pelayan anda, mengurus langganan, menghantar pemberitahuan dan banyak lagi.

  • Node.js:

    • Tujuan: Persekitaran masa jalan JavaScript bahagian pelayan untuk mengendalikan logik bahagian belakang.
    • Versi: Versi LTS terkini disyorkan.
  • Express.js:

    • Tujuan: Rangka kerja aplikasi web untuk Node.js membina titik akhir API anda untuk mengendalikan langganan, menghantar pemberitahuan, dsb.
    • Pakej: ekspres.
  • Perpustakaan Tolak Web:

    • Tujuan: Mengendalikan penciptaan dan penghantaran pemberitahuan tolak, termasuk penjanaan kunci VAPID.
    • Pakej: web-push.
  npm install web-push --save
  • Pangkalan Data:

    • Tujuan: Simpan langganan pengguna.
    • Pilihan:
    • PostgreSQL: Pangkalan data hubungan sumber terbuka yang berkuasa.
    • MySQL: Satu lagi pangkalan data hubungan popular.
    • SQLite: Pilihan pangkalan data tanpa pelayan yang ringan.
    • ORM (Pilihan):
    • Sekuel: ORM untuk Node.js yang menyokong pelbagai dialek SQL.
    • Pakej: sekuel untuk Sequelize.
  • Perisian Tengah Penghurai Badan:

    • Tujuan: Menghuraikan badan permintaan masuk dalam perisian tengah sebelum pengendali anda, tersedia di bawah harta req.body.
    • Pakej: penghurai badan.
  npm install body-parser --save
  • Dotenv:
    • Tujuan: Muatkan pembolehubah persekitaran daripada fail .env ke dalam process.env.
    • Pakej: dotenv.
  npm install dotenv --save

3. Alatan dan Utiliti Umum

  • Nginx atau Apache:

    • Tujuan: Pelayan web untuk menyampaikan fail statik anda dan proksi terbalik kepada aplikasi Node.js anda.
    • Persediaan: Konfigurasikan untuk menyiarkan tapak anda melalui HTTPS, yang diperlukan untuk pemberitahuan tolak.
  • Sijil SSL:

    • Tujuan: Menyediakan HTTPS untuk domain anda, yang diperlukan untuk pekerja perkhidmatan dan pemberitahuan tolak.
    • Pembekal:
    • Mari Sulitkan: Sijil SSL percuma.
    • Pembekal SSL Komersial: Pilihan berbayar tersedia.
  • Git:

    • Tujuan: Kawalan versi untuk projek anda.
  • Pengurus Pakej Nod (NPM) atau Benang:

    • Tujuan: Mengurus pakej dan perpustakaan Node.js.

4. Alat Pilihan

  • Alat Pemantauan:

    • Tujuan: Pantau prestasi pelayan dan ralat.
    • Pilihan:
    • Relik Baharu, Datadog, Prometheus.
  • Alat Penggunaan Automatik:

    • Tujuan: Saluran paip CI/CD untuk penggunaan automatik.
    • Pilihan:
    • Tindakan GitHub, Jenkins, GitLab CI.
  • Penyelesaian Sandaran Pangkalan Data:

    • Tujuan: Memastikan sandaran pangkalan data dibuat dengan kerap.

5. Persekitaran Pembangunan

  • Editor Kod:

    • Pilihan:
    • Kod Visual Studio: Pilihan popular untuk pembangunan JavaScript.
    • Teks Sublime, WebStorm.
  • Posmen atau Insomnia:

    • Tujuan: Menguji titik akhir API semasa pembangunan.

Ringkasan

Timbunan anda terutamanya akan berputar di sekitar JavaScript, Node.js dan Express pada bahagian belakang, dengan pangkalan data seperti PostgreSQL atau MySQL untuk menyimpan data langganan. Pustaka Web-Push akan mengendalikan penghantaran pemberitahuan push sebenar, dan Service Worker dan Push API pada bahagian hadapan akan menguruskan proses langganan dan paparan pemberitahuan.

Persediaan ini memberi anda kawalan sepenuhnya ke atas sistem pemberitahuan, membolehkan penyesuaian dan pengoptimuman mengikut keperluan anda.

Atas ialah kandungan terperinci Cara membuat pemberitahuan tolak tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn