वेब पुश सूचनाओं को चरण दर चरण pywebpush का उपयोग करके कॉन्फ़िगर करें

एक और गाइड क्यों?

जब मुझे ड्राफ्ट पुश नोटिफिकेशन बनाने का काम सौंपा गया, तो एक त्वरित खोज से पता चला कि हब पर पुश नोटिफिकेशन स्थापित करने पर पहले से ही बहुत सारे लेख थे। यहाँ मेरी राय में, सबसे उपयुक्त हैं:

जेएस कैसे काम करता है: वेब पुश सूचनाएं
वेब PUSH अधिसूचनाएं तेज और आसान 924 /
सेवा कार्यकर्ता। वेब पुश और वे कहाँ रहते हैं

यह सब ठीक है, लेकिन व्यक्तिगत रूप से मेरे पास वास्तव में एक सरल और समझने योग्य मार्गदर्शिका का अभाव था जो मुझे तुरंत कॉपी-पेस्ट द्वारा व्यावहारिक रूप से अनुमति देगा, सब कुछ तुरंत काम कर देगा। ठीक है, इसके अलावा, मैनुअल के बीच में बैकिंग के लिए अनुकूल कोई अजगर नहीं है।

अंत में सूचनाओं को स्थापित करने में तीन दिन लगे और मुझे ऐसा लगता है कि यह बहुत अधिक है। उम्मीद है कि मेरा लेख किसी को तीन दिनों के बजाय तीन घंटे में पुश नोटिफिकेशन सेट करने में मदद करेगा।
मैं जिस परियोजना पर काम कर रहा हूं, वह Django पर कार्यान्वित की गई है और मैं इस रूपरेखा के संबंध में काम की प्रगति का वर्णन करूंगा, लेकिन जो लोग आसानी से इसे फ्लास्क या कुछ और के लिए अनुकूलित कर सकते हैं।

तो, चलो चलते हैं।

हमें चाबी मिल जाती है

बिना चाबी के, स्वाभाविक रूप से, उन्होंने हमें कहीं नहीं जाने दिया, तो चलिए उनके साथ शुरू करते हैं। कुंजियों को उत्पन्न करने के लिए, मैंने py_vapid का उपयोग किया। यह स्वचालित रूप से pywebpush के साथ स्थापित किया गया है, जिसे हमें अभी भी बाद में आवश्यकता होगी, इसलिए, दो बार नहीं उठने के लिए, हम 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> 

परिणामस्वरूप अनुप्रयोग सर्वर कुंजी मान सेटिंग्स फ़ाइल में जोड़ा जाता है।

 NOTIFICATION_KEY = < Server Key> 

इसके अलावा, हमें संदर्भ के लिए NOTIFICATION_KEY पास करना होगा। ऐसा करने का सबसे आसान तरीका है कि आप अपना संदर्भ_प्रोसेसर लिखें।

सेवा कर्मी बनाना

सेवा कार्यकर्ता, जो नहीं जानता है - यह एक विशेष फ़ाइल है जो पृष्ठभूमि में चलती है। हमें अपनी सूचनाएं प्रदर्शित करने की आवश्यकता है।

सबसे सरल सेवा कार्यकर्ता कोड इस तरह दिखेगा:

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

और अब हमें अपने सेवा कार्यकर्ता को पंजीकृत करने की आवश्यकता है। प्रक्रिया, सिद्धांत रूप में, यहाँ वर्णित है । इसलिए, संक्षेप में:

 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 (); } 

महान, आप हमारे सेवा कार्यकर्ता के काम की जांच कर सकते हैं। ऐसा करने के लिए, एक ब्राउज़र में डेवलपर टूल पर जाएं, सुनिश्चित करें कि एक संदेश कंसोल पर वोकर के सफल पंजीकरण के बारे में दिखाई देता है और एप्लिकेशन टैब पर जाएं और बाईं ओर सर्विस वर्कर का चयन करें।



यदि अधिसूचना दिखाई नहीं देती है, तो जांचें कि सूचनाएं आपके ब्राउज़र में सक्षम हैं।

ठीक है, हम पहले से ही जानते हैं कि खुद को सूचनाएं कैसे भेजें। कूल, चलो आगे बढ़ते हैं।

सूचनाएं दिखाने के लिए उपयोगकर्ता की अनुमति प्राप्त करें

वोकर पंजीकृत होने के बाद, उपयोगकर्ता को सूचनाएं दिखाने की अनुमति के लिए कहें।

 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; } 

इस कोड के लिए किसी टिप्पणी की आवश्यकता नहीं है, यह सिर्फ काम करता है।

सदस्यता लें और अपनी सदस्यता को बचाएं

सदस्यता भी सबसे आगे है। आप यहां सदस्यता कोड पा सकते हैं , लेकिन कोई urlBase64ToUint8Array फ़ंक्शन का उपयोग नहीं किया गया है, इसलिए मैं इसके बारे में कोड करता हूं।

 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 शायद बैसाखी और साइकिल की श्रेणी से है, लेकिन डेटा का उपयोग करने के लिए btoa का उपयोग करने का प्रयास सफल नहीं हुआ, मुझे पता नहीं है। शायद कोई आपको बताएगा)।

फिर हम प्राप्त डेटा को सर्वर पर भेजते हैं। मैंने इसे इस तरह लागू किया है:

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

खैर, फिर हम इसे सर्वर पर सहेजते हैं। आप लाइन द्वारा सही कर सकते हैं। हां, एक-से-एक उपयोगकर्ता-सदस्यता संबंध बनाने का प्रयास न करें। यह स्पष्ट प्रतीत होता है, लेकिन अचानक किसी को भी पसंद आएगा।
मैंने बचत के लिए इस तरह के एक सरल मॉडल का उपयोग किया है, इसे बाद में उपयोग किया जाएगा, इसलिए मैं इसे दूंगा:

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

अंतिम चरण। Pywebpush का उपयोग करके संदेश भेजना

सब कुछ ट्यूटोरियल में है, कोई विशेष सूक्ष्मता नहीं। ठीक है, सिवाय इसके कि संदेश ऐसी संरचना में बनाया गया है कि हमारे सेवा कार्यकर्ता इसे पार्स कर सकते हैं।

 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 ) 

दरअसल, आप पहले से ही django शेल से push_notification कह सकते हैं और शुरू करने का प्रयास कर सकते हैं।
इस कोड में, 410 की स्थिति के साथ प्रतिक्रिया को रोकना अच्छा होगा। ऐसा उत्तर कहता है कि सदस्यता रद्द कर दी गई है, और डेटाबेस से ऐसी सदस्यता को हटाना अच्छा होगा।

निष्कर्ष में

वास्तव में, एक और महान django-webpush पुस्तकालय है । शायद जो लोग Django के साथ काम करते हैं, उन्हें इसके साथ शुरू करना चाहिए।

PS हैप्पी प्रोग्रामर डे!