Cara Membina Pemberitahuan Push untuk Aplikasi Web

Meningkatkan Penyertaan Pengguna dalam Aplikasi Web: Penjelasan Terperinci Pemberitahuan Push Web

Artikel ini akan meneroka bagaimana untuk meningkatkan pengalaman pengguna aplikasi web sedia ada dengan menambahkan fungsi pemberitahuan yang serupa dengan aplikasi asli. Kami akan menerangkan secara mendalam konsep pemberitahuan push web dan secara beransur-ansur menunjukkan cara mengintegrasikan ciri ini dalam aplikasi web yang sedia ada, yang meliputi spesifikasi semasa dan sokongan pelayar. Artikel itu pada asalnya diterbitkan di Sencha. Terima kasih kepada rakan kongsi yang menyokong SitePoint.

mata teras:

• Memahami asas -asas: Pemberitahuan push web membolehkan aplikasi web menghantar mesej terus ke peranti pengguna, walaupun aplikasi itu tidak aktif.
• Pendaftaran Pekerja Perkhidmatan: Pekerja Perkhidmatan bertanggungjawab untuk mengendalikan mesej push, mesti mendaftar apabila halaman dimuatkan, dan menjalankan pemeriksaan sokongan penyemak imbas yang sesuai.
• Proses langganan pengguna: Langkah -langkah utama dalam menerima pemberitahuan push termasuk mendapatkan persetujuan pengguna, menghasilkan langganan push melalui penyemak imbas, dan menghantar data ini ke pelayan aplikasi.
• Hantar mesej push: Mesej tolak hendaklah disulitkan dan dihantar melalui permintaan pos HTTP, dan gunakan parameter seperti TTL dan segera untuk menguruskan butiran penghantaran.
• Mesej pemprosesan dan interaksi pengguna: Pekerja perkhidmatan memproses mesej push masuk dan menguruskan interaksi pengguna, seperti klik pemberitahuan dan penutupan.
• UNUTSCRIPTION DAN Langganan langganan: Menyediakan kaedah untuk pengguna untuk tidak menyatukan langganan dan mengendalikan peristiwa kitaran hayat langganan, termasuk tamat tempoh dan pembaharuan.

Protokol Pemberitahuan Push Web

Protokol Pemberitahuan Push Web agak baru. Ia memberikan aplikasi web fungsi seperti aplikasi asli, yang membolehkan mereka menerima mesej push dari pelayan pada bila-bila masa, walaupun aplikasi web tidak aktif atau dimuatkan ke dalam penyemak imbas. Ini membolehkan anda berinteraksi dengan pengguna pada bila -bila masa, mendorong mereka untuk kembali ke aplikasi walaupun mereka tidak menggunakan aplikasi anda.

Nilai komersil pemberitahuan push web adalah jelas: ia dapat meningkatkan penglibatan pengguna, dengan itu meningkatkan nilai keseluruhan aplikasi, kerana pemberitahuan push menjadikan aplikasi anda lebih berguna kepada pengguna, meningkatkan kebolehgunaan aplikasi web, dan Jadikan kami lebih berguna kepada kami.

Perbandingan Web Push dan WebSockets

Sebelum masuk ke dalam butiran teknikal, mari kita mula -mula memahami perbezaan antara push web dan websocket. Pertama, mereka mempunyai beberapa perkara biasa: Web Push dan WebSockets direka untuk membolehkan komunikasi masa nyata antara aplikasi web dan pelayan aplikasi, dan menghantar data masa nyata dan kemas kini dari pelayan aplikasi ke aplikasi web.

Berikut adalah perbezaan mereka:

• WebSockets hanya gunakan apabila laman web dimuatkan dan aktif. Pemberitahuan push web boleh digunakan pada bila -bila masa, termasuk apabila aplikasinya aktif, tidak aktif, atau dipunggah, dan apabila penyemak imbas tidak aktif atau ditutup.
• Data yang dihantar menggunakan push web mesti disulitkan, dan saiz setiap mesej adalah terhad (tidak lebih daripada 4kb). Terdapat juga had pada bilangan mesej yang dihantar (nilai had tepat bergantung pada penyemak imbas). Sesetengah pelayar (seperti Chrome) juga memerlukan pemberitahuan untuk dipaparkan kepada pengguna setiap kali mereka menerima mesej. Apabila menggunakan WebSockets, anda tidak mempunyai sekatan ini: anda boleh menghantar sejumlah mesej yang tidak disenaraikan dari mana -mana saiz dan memprosesnya seperti yang diperlukan;
• Peraturan umum adalah: Apabila pengguna berinteraksi dengan aplikasi, gunakan WebSockets untuk menghantar kemas kini data biasa ke aplikasi web anda; permohonan anda pada masa itu.

Konsep Teknikal

Mari kita lihat butiran teknikal teknologi ini. Saya akan menggunakan permainan dengan peraturan khas, peserta, dan berpaling untuk menerangkan butiran ini. Saya terlebih dahulu akan menerangkan peserta dalam permainan ini yang disebut "Pemberitahuan Push Web":

• Aplikasi Web
• Pekerja Perkhidmatan
• Pelayar
• pelayan aplikasi
• Push Server

Push Server adalah perkhidmatan yang dilaksanakan oleh pengeluar penyemak imbas; Ia bertanggungjawab untuk menyampaikan mesej dari pelayan aplikasi anda ke penyemak imbas anda.

Gunakan Pemberitahuan Push Web Demo Permainan

Saya akan menggunakan permainan untuk menunjukkan cara menambah pemberitahuan push web ke aplikasi anda. Peraturan permainan ini ditakrifkan oleh pelbagai spesifikasi yang disediakan oleh World Wide Web Alliance dan Pasukan Petugas Kejuruteraan Internet:

• Komunikasi antara penyemak imbas dan aplikasi web atau pekerja perkhidmatan yang berkaitan dengannya diterangkan dalam spesifikasi API push.
• Memaparkan pelbagai jenis pemberitahuan dan pemprosesan pemberitahuan diterangkan dalam spesifikasi API pemberitahuan.
• Komunikasi antara pelayan aplikasi dan pelayan push ditakrifkan dalam spesifikasi protokol push web.
• Terdapat juga beberapa spesifikasi tambahan yang menggambarkan penyulitan mesej push dan pengesahan pelayan aplikasi, yang membolehkan pelayan aplikasi anda membuktikan bahawa ia dibenarkan menghantar mesej kepada pengguna anda.

pusingan permainan

Saya membahagikan permainan ke dalam empat pusingan dan menerangkan konsep dan matlamat setiap pusingan. Saya kemudian akan menunjukkan kepada anda bagaimana untuk melaksanakan setiap giliran dalam aplikasi anda.

Pusingan 1: Pendaftaran Pekerja Perkhidmatan

Pemberitahuan Push Web memerlukan pekerja perkhidmatan untuk memproses mesej push, jadi pusingan pertama adalah untuk mendaftarkan pekerja perkhidmatan anda. Hanya aplikasi web dan penyemak imbas anda mengambil bahagian dalam pusingan ini. Pusingan ini berlaku apabila halaman dimuatkan.

Aplikasi Web menghantar permintaan untuk mendaftarkan pekerja perkhidmatan kepada penyemak imbas.

Untuk melaksanakan pusingan ini, anda perlu menambah kod berikut ke aplikasi web anda:

if ('serviceWorker' in navigator) {
  if ('PushManager' in window) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
      // 状态初始化
    }).catch(function() {
      // 错误处理
    });
  } else {
    // 错误处理
  }
} else {
  // 错误处理
}

Pertama sekali, kita perlu menyemak sama ada pelayar menyokong pekerja perkhidmatan. Kemudian, kita perlu menyemak sama ada penyemak imbas menyokong pemberitahuan push web. Dengan sokongan penyemak imbas yang semakin meningkat, menambah kedua -dua cek ini selalu merupakan idea yang baik.

Jika kedua -duanya disokong, kami akan mendaftar untuk pekerja perkhidmatan kami. Untuk melakukan ini, kami memanggil kaedah Navigator.ServeWorker.Register () dan lulus laluan fail pekerja perkhidmatan sebagai parameter. Selepas langkah ini, penyemak imbas memuat turun fail dan menjalankannya dalam persekitaran pekerja perkhidmatan. Fail pekerja perkhidmatan adalah fail JavaScript standard, tetapi penyemak imbas akan "memberi akses" API Pekerja Perkhidmatan, termasuk Push.

Jika semuanya berjalan lancar dan tidak ada kesilapan, janji yang dikembalikan oleh daftar () akan dihuraikan. Jika apa -apa jenis kesilapan berlaku, janji akan ditolak, kita perlu menangani keadaan ini dan keadaan di mana pelayar tidak menyokong pekerja perkhidmatan. Apabila mendaftar () parses, ia mengembalikan objek ServiceWorkerRegistration yang akan digunakan pada giliran seterusnya.

(Arahan untuk pusingan berikutnya akan mengikuti struktur yang serupa dengan yang disebutkan di atas, termasuk contoh kod, gambar dan penjelasan, dan menulis semula dan menggilap teks asal untuk mengekalkan integriti maklumat dan kebolehbacaan. Tiada penerangan terperinci tentang semua pusingan diperluaskan Ringkasan

Teknologi Pemberitahuan Push Web bersedia untuk kegunaan yang meluas. Ia membantu anda berkomunikasi dengan pengguna dengan lebih berkesan, melibatkan pengguna dengan memberikan pemberitahuan segera dan relevan, dan secara amnya menjadikan aplikasi web lebih baik.

Cuba gunakannya dalam aplikasi anda. Sencha CMD 6.5 menyokong ciri -ciri aplikasi web progresif berikut: Tambah ke Banner Skrin Laman Utama dan gunakan cache pekerja perkhidmatan. Baca dokumentasi SENCHA CMD untuk maklumat lanjut, atau muat turun percubaan percuma Sencha Ext JS, di mana anda akan mempunyai akses kepada lebih daripada 115 komponen dan alat, termasuk SENCHA CMD.

(bahagian Soalan Lazim juga memerlukan penulisan semula dan penggilap yang sama, dan tidak akan diperluas di sini.)

Atas ialah kandungan terperinci Cara Membina Pemberitahuan Push untuk Aplikasi Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!