En la publicación anterior abarcamos el envío de correos para pruebas, ahora vamos a aprender a utilizar la herramienta OneSignal para el envío de notificaciones push.
¿Qué es OneSignal?
De acuerdo a la documentación oficial, OneSignal es un servicio de notificaciones push de envío masivo y confiable para sitios web y aplicaciones móviles. Dan soporte a las plataformas más importante proveyendo SDK dedicados para cada plataforma, además de una API Restful y un panel de administración para que los mercadologos puedan diseñar y enviar notificaciones.
Para realizar esta práctica debes ir al sitio https://onesignal.com y registrarte, una vez dentro debes poder visualizar un panel como el siguiente:
Paso #1: Crear la aplicación:
Paso #2: Seleccionar la plataforma (Website Push para esta práctica)
Paso #3: Seleccionar Google Chrome & Mozilla Firefox
Paso #4: Definir la configuración de nuestro sitio
Hasta abajo de la misma ventana debemos elegir un dominio único que no haya sido tomado por alguien más; este paso solo se realiza si estamos utilizando la dirección http://localhost en el campo SITE URL. Para este ejemplo yo he utilizado “practica-o1”.
Paso #5: Seleccionar el SDK a utilizar:
Una vez configurado se mostrará la siguiente ventana:
Ahora para finalizar la aplicación debemos tener al menos a un usuario suscrito, y para ello debemos continuar con la instalación del SDK en nuestro sitio.
Si vamos a la siguiente dirección: https://documentation.onesignal.com/docs/web-push-sdk-setup-http#section-2-add-code-to-your-site, OneSignal nos dirá el bloque de código Javascript que debemos utilizar en nuestro vista principal para poder solicitar las notificaciones, (debes introducir el APP_ID obtenido al momento de realizar la configuración, si no la apuntaste la puedes volver a encontrar en APP > SETTINGS > KEYS & IDS > OneSignal APP ID):
<head>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "YOUR_APP_ID",
autoRegister: false, /* Set to true to automatically prompt visitors */
notifyButton: {
enable: true /* Set to false to hide */
}
}]);
</script>
</head>
Una vez que insertemos el objeto de OneSignal en nuestro plantilla master de Laravel, al ir a la ruta “/home” se nos debe mostrar una pantalla con el icono de OneSignal:
Cuando veamos nuestra notificación en pantalla significa que nuestro navegador ya esta suscrito a la aplicación. A partir de aquí hay dos formas de enviar notificaciones a nuestros suscriptores:
-
La primera es utilizar el Dashboard que nos provee OneSignal al acceder a nuestra app en la página:
-
La segunda opción es enviar notificaciones utilizando la API REST proveída por OneSignal.
Los dos casos anteriores los veremos en la 2da parte de esta serie de notificaciones con OneSignal; mientras tanto te invito a que intentes enviar una notificación utilizando el Dashboard el cuál es muy sencillo de utilizar.
Aclaraciones:
Para esta practica hemos configurado nuestra aplicación para funcionar desde http://localhost, de igual forma podríamos crear host virtuales para utilizar urls del tipo http://practica.dev, de esta forma no tendríamos que definir un subdominio como hemos hecho. Además, si ya tenemos un dominio con SSL y un servidor en producción la configuración del SDK es diferente. Para mayor información te recomiendo usar la documentación oficial en donde puedes encontrar como configurar sitios http o https, o cualquier otro SDK como Android, iOS, entre otros.
Este práctica puede ser reproducida en sitios realizados solo con PHP sin utilizar ningún framework, en la segunda parte abarcaremos como realizar un panel para envío de notificaciones utilizando Laravel.
Si tienes alguna duda o aclaración por favor escríbenos en los comentarios!
2 comments. Leave new
Hola, hago lo mismo, envio de notifiaciones con oneSignal utilizando codeigniter, lo que quiero hacer es al abrir la notificacion me abra una vista especifica. lo ocupo para chat en tiempo real. Tienes alguna respuesta.
Tendrias que revisar la api, me parece que todo eso es configurable tanto desde el dashboard como desde la api amigo.