Ya, laman web HTML5 boleh melaksanakan pemberitahuan push melalui API web moden, tetapi mereka memerlukan kerjasama dari JavaScript, pekerja perkhidmatan dan pelayan backend. Langkah -langkah khusus adalah seperti berikut: 1. Periksa status sokongan penyemak imbas dan pastikan terdapat pekerja perkhidmatan dan pushmanager; 2. Daftar pekerja perkhidmatan untuk menguruskan acara push; 3. Permintaan kebenaran pengguna melalui pemberitahuan.requestPermission (); 4. Gunakan perpustakaan Web-Push untuk menghasilkan kunci Vapid untuk pengenalan identiti; 5. Selepas kebenaran pengguna, gunakan kaedah pushmanager. 6. Dengarkan acara push di pekerja perkhidmatan dan hubungi paparan untuk memaparkan pemberitahuan; 7. Backend menggunakan perpustakaan web-push dan kekunci VAPID untuk menghantar mesej push kepada pengguna.

Pemberitahuan push di HTML5 bukan sesuatu yang anda boleh melaksanakan secara langsung dengan hanya HTML - ia memerlukan gabungan JavaScript, pekerja perkhidmatan, dan pelayan backend. Tetapi ya, anda boleh mengaktifkan pemberitahuan push di laman web menggunakan API web moden.

Inilah caranya untuk melangkah langkah demi langkah.

1. Periksa sokongan penyemak imbas

Sebelum menyelam ke dalam kod, pastikan pemberitahuan sokongan penyemak imbas pengguna. Kebanyakan pelayar moden seperti Chrome, Firefox, Edge, dan Safari menyokong mereka, tetapi beberapa pelayar mudah alih (terutamanya pada iOS) mempunyai sokongan terhad atau tidak.

Anda boleh menyemak sokongan seperti ini:

 jika ('ServiceWorker' di Navigator && 'PushManager' di Window) {
  // disokong!
} else {
  Console.log ('Pemberitahuan push tidak disokong dalam penyemak imbas ini.');
}

Perlu diingat:

• Safari Mempunyai Cara Mengendalikan Tekan Sendiri Melalui Perkhidmatan Pemberitahuan Push Apple (APNS)
• IOS Safari hanya membenarkan pemberitahuan push untuk aplikasi web yang dipasang (ditambahkan ke skrin utama)

2. Daftar Pekerja Perkhidmatan

Pemberitahuan push bergantung kepada pekerja perkhidmatan - skrip latar belakang yang menguruskan permintaan rangkaian dan bertindak sebagai proksi antara aplikasi dan rangkaian anda.

Buat fail yang dipanggil sw.js dan daftarkannya dalam fail JavaScript utama anda:

 Navigator.ServiceWorker.Register ('/sw.js')
  .tua (fungsi (pendaftaran) {
    Console.log ('Pekerja perkhidmatan yang berdaftar dengan skop:', pendaftaran.scope);
  })
  .catch (fungsi (err) {
    Console.log ('Pendaftaran pekerja perkhidmatan gagal:', err);
  });

Di dalam sw.js , biarkan ia kosong buat masa ini - kami akan menggunakannya kemudian untuk mengendalikan acara push.

3. Permintaan kebenaran daripada pengguna

Sebelum menghantar sebarang pemberitahuan, anda mesti meminta pengguna untuk kebenaran. Ini dilakukan dengan menggunakan kaedah Notification.requestPermission() .

 Pemberitahuan.requestPermission (). Kemudian (fungsi (hasil) {
  jika (hasil === 'diberikan') {
    Console.log ('Kebenaran diberikan!');
    // Sekarang langgan untuk menolak pemberitahuan
  } else {
    Console.log ('Kebenaran ditolak atau ditolak.');
  }
});

?? PENTING: Anda tidak boleh mencetuskan auto ini-biarkan pengguna memulakannya dengan klik butang atau tindakan yang serupa. Jika tidak, mereka boleh menghalangnya daripada kebiasaan.

4. Menjana kunci vapid

Untuk menggunakan pemberitahuan push, anda memerlukan satu set kekunci yang dikenali sebagai VAPID (Pengenalan Pelayan Aplikasi Sukarela). Ini digunakan untuk mengenal pasti aplikasi anda apabila pelanggan.

Anda boleh menjana kunci ini menggunakan perpustakaan seperti web-push di node.js:

 NPM Pasang Web-PUSH

Kemudian jalankan:

 const WebPush = memerlukan ('web-push');
const vacuumKeys = WebPush.GenerateVapidKeys ();
Console.log (VapidKeys);

Simpan kunci awam dan peribadi - anda akan menggunakan kunci awam apabila melanggan pengguna dan yang peribadi di pelayan anda.

5. Langgan pengguna

Sebaik sahaja pekerja perkhidmatan didaftarkan dan kebenaran diberikan, anda boleh melanggan pengguna untuk menolak pemberitahuan:

 Navigator.ServiceWorker.ready.THEN (fungsi (pendaftaran) {
  Pulangan Pendaftaran.PushManager.Subscribe ({
    USERVISIBLEOnly: Benar,
    ApplicationserVerKey: urlBase64TouInt8Array (publicVapidKey)
  });
});

Anda memerlukan fungsi penolong ini untuk menukar kunci awam yang dikodkan oleh Base64:

 fungsi urlbase64touint8Array (base64string) {
  const padding = '='. Ulang ((4 - base64string.length % 4) % 4);
  const base64 = (base64string padding)
    .Replace (/-/g, '')
    .replace (/_/g, '/');
  const rawData = window.atob (base64);
  const outputArray = new uint8Array (RawData.Length);
  untuk (biarkan i = 0; i <rawdata.length; i) {
    outputArray [i] = RawData.CharCodeat (i);
  }
  kembali outputArray;
}

Selepas langganan, hantar titik akhir dan kunci ke backend anda supaya anda boleh menghantar mesej yang disasarkan.

6. Mengendalikan acara push di Pekerja Perkhidmatan

Sekarang bahawa pengguna dilanggan, pekerja perkhidmatan anda perlu mengendalikan mesej push masuk.

Tambahkan ini ke sw.js anda:

 self.addeventListener ('push', fungsi (acara) {
  const data = event.data.json ();
  self.registration.shownotification (data.title, {
    badan: data.body,
    ikon: data.icon || '/icon.png'
  });
});

Ini mendengarkan untuk peristiwa push dan memaparkan pemberitahuan berdasarkan muatan.

7. Hantar mesej tolak dari backend anda

Akhirnya, untuk mencetuskan pemberitahuan, anda perlu menghantar permintaan pos ke titik akhir yang disediakan semasa langganan, menggunakan kunci vapid peribadi dan butiran langganan pengguna.

Menggunakan perpustakaan web-push sekali lagi:

 const WebPush = memerlukan ('web-push');

WebPush.SetVapidDetails (
  'Mailto: you@example.com',
  publicvapidkey,
  Privatevapidkey
);

WebPush.SendNotification (langganan, json.stringify ({
  Tajuk: 'Hello!',
  Badan: 'Ini adalah pemberitahuan push.',
  Ikon: '/icon.png'
}));

Di mana subscription adalah objek yang anda simpan lebih awal dari pushManager.subscribe .

Itu pada dasarnya. Ia kelihatan rumit pada mulanya, tetapi apabila anda memecahkannya ke langkah -langkah, melaksanakan pemberitahuan push di HTML5 menjadi terkawal.

Ia tidak rumit - hanya melibatkan beberapa bahagian bergerak yang bekerja bersama -sama.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemberitahuan push di HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!