Cómo enviar notificaciones a su aplicación web usando Python

Las aplicaciones nativas se han vuelto muy populares recientemente, principalmente debido a características como trabajar sin conexión, transiciones, fácil distribución y, por supuesto, notificaciones push. Pero, desafortunadamente, necesita un buen conocimiento de lenguajes como Java o Swift para crear una valiosa aplicación nativa.

Aplicaciones web progresivas

Las aplicaciones web progresivas (PWA) son aplicaciones JavaScript que se ejecutan en el navegador. Hacen el esfuerzo de llevar algunas de las funciones nativas de la aplicación a la web. Las PWA son fáciles de desarrollar si tiene un conocimiento fundamental de HTML, CSS y, en particular, JavaScript. Además, si su servicio ya es accesible para dispositivos de escritorio en un sitio web, es más fácil agregar las funcionalidades de una aplicación web, en lugar de desarrollar una aplicación móvil nativa.

Notificaciones

Las notificaciones mantienen a los usuarios informados sobre nuevos mensajes, les informan sobre una nueva publicación de blog, etc.

Muchas aplicaciones nativas envían notificaciones automáticas al usuario. Pero esto también es posible usando PWA y la API de notificaciones.

OneSignal

En este tutorial, usaremos OneSingal para enviar notificaciones a nuestra aplicación web. OneSignal es una herramienta poderosa que proporciona una interfaz sencilla para enviar notificaciones. También proporcionan una API Rest, que usaremos para enviar notificaciones.

Configurar OneSignal

Para enviar notificaciones automáticas, primero debe configurar OneSignal. Por lo tanto, necesita una cuenta en OneSignal. Dirígete a su sitio web y presiona "Iniciar sesión" en la esquina superior derecha.

A continuación, deberá crear una aplicación. Asígnele un nombre y elija "Plataforma de instalación". Aquí selecciona "Todos los navegadores". Después de eso, elige "código personalizado" como la integración. Luego, debe proporcionar información sobre su sitio web.

En el área de configuración de su aplicación, hay una pestaña llamada "Claves e ID". Copie ambas claves para más tarde.

Importante: No comparta su clave de API REST. ¡Mantenlo en privado!

Eso es todo para configurar OneSignal. ¡Eso fue fácil!

Configurar nuestro sitio web

En la siguiente parte, agregaremos la funcionalidad de notificación a nuestro sitio web. El sitio web tendrá que esperar las notificaciones enviadas por OneSignal y mostrárselas al usuario.

Para que el navegador sepa que está creando una aplicación web progresiva, agregaremos un archivo llamado manifest.json a la raíz de nuestro proyecto.

{ "name": "My Application", "short_name": "Application", "start_url": ".", "display": "standalone", "background_color" : "#fff" , "description": "We send notifications to you", "gcm_sender_id": "482941778795", "gcm_sender_id_comment": "Do not change the GCM Sender ID"}

Los primeros seis pares clave-valor describen la apariencia de la aplicación. El gcm_send_id es importante para enviar notificaciones. Si desea saber más sobre manifest.json , puede consultar la documentación de Mozilla.

Su navegador no busca automáticamente el manifiesto. Debe poner la ruta en cada documento HTML en la etiqueta & lt; h e ad>.

 ...  ...

Además, necesitamos código JavaScript para conectar nuestro sitio web a OneSignal.

Puede poner el código para eso en una etiqueta de secuencia de comandos en la parte & lt; h e ad>. No olvide reemplazar my -app-id con su propia identificación de aplicación OneSignal.

   var OneSignal = window.OneSignal || []; OneSignal.push(function () { OneSignal.init({ appId: "my-app-id", autoRegister: false, notifyButton: { enable: true, }, }); }); 

Cuando desee solicitar al usuario que se suscriba a sus notificaciones, ejecute este fragmento de código.

OneSignal.push(function () { OneSignal.showHttpPrompt();});

Además, necesita un trabajador del servicio, que escucha en segundo plano las notificaciones. Por lo tanto, necesita dos archivos en el directorio raíz de su proyecto.

OneSignalSDKUpdaterWorker.js

importScripts('//cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

OneSignalSDKWorker.js

importScripts('//cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

Accede a la API usando Python

OneSignal tiene una API Rest fácil de usar. Los puntos finales están documentados en la documentación para desarrolladores de OneSignal.

Para acceder a él, necesitamos enviar solicitudes HTTP. Por lo tanto, usaremos una biblioteca llamada solicitudes . Para instalarlo, puede usar pip, el administrador de paquetes de Python.

pip install requests

Este es el punto final de la API que necesitamos para enviar una notificación: //onesignal.com/api/v1/notifications.

El protocolo HTTP tiene varios métodos. En este caso, queremos realizar una solicitud POST. Para hacerlo, necesitamos importar solicitudes y ejecutar una función.

import requests
requests.post("//onesignal.com/api/v1/notifications")

OneSignal desea verificar que solo usted puede enviar notificaciones a su sitio web. Por lo tanto, debe agregar un encabezado HTTP con su clave de API Rest de OneSignal.

requests.post( "//onesignal.com/api/v1/notifications", headers={"Authorization": "Basic my-rest-api-key"})

Recuerde reemplazar my-rest-api-key con su clave de API Rest.

Además, necesita información básica sobre su notificación.

data = { "app_id": "my-app-id", "included_segments": ["All"], "contents": {"en": "Hello"}}
requests.post( "//onesignal.com/api/v1/notifications", headers={"Authorization": "Basic my-rest-api-key"}, json=data)

Reemplace my-app-id con su propia identificación de aplicación. A continuación, elige quién recibirá sus notificaciones. Los valores de ejemplo son "All", "Active Users", "Inactive Users”. Pero también puede crear sus propios segmentos. Y para el último, agregas algún contenido del mensaje en inglés. Si necesita otro idioma, puede agregarlo aquí también.

That’s it! If you subscribed to the notifications, you should get a push notification.

Send notifications using an API Wrapper

Because my code became kind of messy with many different notifications, I created an API wrapper for OneSignal.

API Wrapper

But what is an API wrapper? An API wrapper makes it easier for you to access an API. You can say that it is an API for an API. You call the API wrapper instead of the API directly.

You can install the wrapper called OneSignal-Notifications from pip.

pip install onesignal-notifications

Now you can import it and setup your client.

from onesignal import OneSignal, SegmentNotificationclient = OneSignal("MY_APP_ID", "MY_REST_API_KEY")

To send a Notification, you have to initialize the class SegmentNotificationand use the method send.

notification_to_all_users = SegmentNotification( { "en": "Hello from OneSignal-Notifications" }, included_segments=SegmentNotification.ALL)client.send(notification_to_all_users)

Maybe this looks kind of unnecessary to you, because it takes even more lines of code. But if you have several notifications, it makes the process much easier and your code more beautiful.

For example if you want to send a notification, which is based on some conditions, the API wrapper has a custom class for that.

from onesignal import OneSignal, FilterNotification, Filterclient = OneSignal("MY_APP_ID", "MY_REST_API_KEY")
filter_notification = FilterNotification( { "en": "Hello from OneSignal-Notifications" }, filters=[ Filter.Tag("my_key", "", "5"), "OR", Filter.LastSession(">", "1"), ])

There are many custom parameters you can provide to adapt your notification. For example, you can add buttons to the notification. All list of all parameters can be found here.

from onesignal import OneSignal, FilterNotification, Filterclient = OneSignal("MY_APP_ID", "MY_REST_API_KEY")
filter_notification = SegmentNotification( { "en": "Hello from OneSignal-Notifications" }, web_buttons=[ { "id": "like-button", "text": "Like", "icon": "//i.imgur.com/N8SN8ZS.png", "url": "//github.com/Lanseuo/onesignal-notifications"} ], included_segments=SegmentNotification.ALL)

If you want to find out more about OneSignal-Notifications, you can have a look in the GitHub Repository or in the docs.