Konfigurasikan Pemberitahuan Dorong Web menggunakan pywebpush langkah demi langkah

Mengapa panduan lain?

Ketika saya ditugaskan membuat draft pemberitahuan push, pencarian cepat menunjukkan bahwa sudah ada banyak artikel tentang pengaturan pemberitahuan push di hub. Berikut ini yang paling cocok, menurut saya:

Cara Kerja JS: Pemberitahuan Dorong Web
Notifikasi PUSH Web Cepat dan Mudah 924 /
Pekerja Layanan. Dorong web dan di mana mereka tinggal

Ini semua baik-baik saja, tetapi secara pribadi saya benar-benar tidak memiliki panduan sederhana dan dapat dimengerti yang akan memungkinkan saya untuk segera, praktis dengan copy-paste, membuat semuanya segera bekerja. Nah, selain itu, di antara manual tidak ada python yang disesuaikan untuk dukungan.

Menyiapkan notifikasi pada akhirnya membutuhkan waktu tiga hari dan bagi saya sepertinya ini terlalu banyak. Semoga artikel saya akan membantu seseorang mengatur pemberitahuan push dalam tiga jam, bukan tiga hari.
Proyek yang sedang saya kerjakan diimplementasikan pada Django dan saya akan menjelaskan kemajuan pekerjaan terkait dengan kerangka kerja ini, tetapi mereka yang ingin dapat dengan mudah mengadaptasinya ke Flask atau yang lainnya.

Jadi, ayo pergi.

Kami mendapatkan kuncinya

Tanpa kunci, tentu saja, mereka tidak akan membiarkan kita di mana pun, jadi mari kita mulai dengan itu. Untuk menghasilkan kunci, saya menggunakan py_vapid . Ini diinstal secara otomatis bersama dengan pywebpush , yang masih akan kita butuhkan nanti, jadi untuk menghindari bangun dua kali, kita akan mulai dengan pywebpush:

> bin/pip install pywebpush <   > > bin/vapid --applicationServerKey No private_key.pem file found. Do you want me to create one for you? (Y/n)Y Generating private_key.pem Generating public_key.pem Application Server Key = < Server Key> 

Nilai Application Server Key yang dihasilkan ditambahkan ke file settings.py.

 NOTIFICATION_KEY = < Server Key> 

Selain itu, kami harus meneruskan NOTIFICATION_KEY ke konteks. Cara termudah untuk melakukannya adalah dengan menulis context_processor Anda .

Menjadikan pekerja layanan

Pekerja layanan, yang tidak tahu - ini adalah file khusus yang berjalan di latar belakang. Kami membutuhkannya untuk menampilkan pemberitahuan kami.

Kode pekerja layanan paling sederhana akan terlihat seperti ini:

 self.addEventListener('push', function(event) { var message = JSON.parse(event.data.text()); // event.waitUntil( self.registration.showNotification(message.title, { body: message.body, }) ); }); 

Dan sekarang kita perlu mendaftarkan pekerja layanan kita. Prosesnya, pada prinsipnya, dijelaskan di sini . Karena itu, secara singkat:

 function checkWorkerAndPushManager () { if (!('serviceWorker' in navigator)) { console.log('Workers are not supported.'); return; } if (!('PushManager' in window)) { console.log('Push notifications are not supported.'); return; } } function registerWorker () { window.addEventListener('load', function () { navigator.serviceWorker.register('/static/js/sw.js').then(function (registration) { console.log('ServiceWorker registration successful'); }, function (err) { console.log('ServiceWorker registration failed: ', err); return; }); }); return true; } var supported = checkWorkerAndPushManager(); if (supported){ var worker = registerWorker (); } 

Hebat, Anda dapat memeriksa pekerjaan pekerja layanan kami. Untuk melakukan ini, pergi ke Alat Pengembang di browser, pastikan bahwa pesan muncul di konsol tentang pendaftaran sukses woker dan pergi ke tab Aplikasi dan pilih Pekerja Layanan di sebelah kiri.



Jika notifikasi tidak muncul, periksa apakah notifikasi diaktifkan di browser Anda.

Yah, kita sudah tahu cara mengirim notifikasi ke diri kita sendiri. Keren, mari kita lanjutkan.

Dapatkan izin pengguna untuk menampilkan notifikasi

Setelah woker terdaftar, minta izin kepada pengguna untuk menampilkan pemberitahuan.

 function requestPermission() { return new Promise(function(resolve, reject) { const permissionResult = Notification.requestPermission(function(result) { //       . resolve(result); }); if (permissionResult) { permissionResult.then(resolve, reject); } }) .then(function(permissionResult) { if (permissionResult !== 'granted') { console.log(permissionResult); throw new Error('Permission not granted.'); } }); return true; } 

Tidak diperlukan komentar untuk kode ini, hanya berfungsi.

Berlangganan dan simpan langganan Anda

Berlangganan juga ada di depan. Anda dapat menemukan kode berlangganan di sini , tetapi tidak ada fungsi urlBase64ToUint8Array yang digunakan, jadi saya kode dengan itu.

 NOTIFICATION_KEY = '{{ NOTIFICATION_KEY }}; function urlBase64ToUint8Array(base64String) { const padding = '='.repeat((4 - base64String.length % 4) % 4); const base64 = (base64String + padding) .replace(/\-/g, '+') .replace(/_/g, '/') ; const rawData = window.atob(base64); return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0))); } function subscribeUserToPush(key) { return navigator.serviceWorker.register('/static/path/to/js/sw.js') .then(function(registration) { var subscribeOptions = { userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(key), }; return registration.pushManager.subscribe(subscribeOptions) }) .then(function(pushSubscription) { sendSubscriptionToBackEnd(pushSubscription); }); } 

(UrlBase64ToUint8Array yang digunakan di sini mungkin berasal dari kategori kruk dan sepeda, tetapi upaya untuk mentranskode data menggunakan btoa tidak berhasil, saya tidak tahu mengapa. Mungkin seseorang akan memberi tahu Anda).

Kemudian kami mengirim data yang diterima ke server. Saya sudah mengimplementasikannya seperti ini:

 function sendSubscriptionToBackEnd(subscription) { $.post( SAVE_REGISTRATION_URL, { 'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(), //,     {% csrf_token %}. 'registration_data': JSON.stringify(subscription) } ); } 

Nah, kalau begitu kita simpan ini di server. Anda bisa langsung ke garis. Ya, jangan mencoba membuat hubungan langganan pengguna satu-ke-satu. Tampaknya sudah jelas, tetapi tiba-tiba ada orang yang mau.
Saya telah menggunakan model simpel untuk menabung, nanti akan digunakan, jadi saya akan berikan:

 class UserSubscription(models.Model): subscription = models.CharField(max_length=500) user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='subscriptions') 

Langkah terakhir. Mengirim pesan menggunakan pywebpush

Semuanya ada di tutorial, tidak ada kehalusan khusus. Yah, kecuali bahwa pesan dibuat dalam struktur sedemikian rupa sehingga pekerja layanan kami dapat menguraikannya.

 import json from pywebpush import webpush, WebPushException from django.conf import settings from .models import UserSubscription def push_notification(user_id): user_subscriptions = UserSubscription.objects.filter(user_id=notification.user_id) for subscription in user_subscriptions: data = json.dumps({ 'title': 'Hello', 'body': 'there', }) try: webpush( subscription_info=json.loads(subscription.subscription), data=data, vapid_private_key='./private_key.pem', vapid_claims={ 'sub': 'mailto:{}'.format(settings.ADMIN_EMAIL), } ) notification.sent = True notification.save() except WebPushException as ex: print('I\'m sorry, Dave, but I can\'t do that: {}'.format(repr(ex))) print(ex) # Mozilla returns additional information in the body of the response. if ex.response and ex.response.json(): extra = ex.response.json() print('Remote service replied with a {}:{}, {}', extra.code, extra.errno, extra.message ) 

Sebenarnya, Anda sudah bisa memanggil push_notification dari django shell dan mencoba memulai.
Dalam kode ini, alangkah baiknya untuk mencegat respons dengan status 410. Jawaban seperti itu mengatakan bahwa langganan telah dibatalkan, dan alangkah baiknya untuk menghapus langganan semacam itu dari basis data.

Kesimpulannya

Bahkan, ada perpustakaan django-webpush besar lainnya. Mungkin mereka yang bekerja dengan Django harus memulainya.

Hari PS Selamat Programmer!