Laravel :: Envío de notificaciones usando OneSignal

This post was published originally on hoclabs.com/2017/12/09/laravel-envio-de-not.. for my old blog.

¿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 onesignal.com y registrarte, una vez dentro debes poder visualizar un panel como el siguiente:

os-dashboard.png

1. Crear la aplicación

os-1.png

2. Seleccionar la plataforma (Website Push para esta práctica)

os-2.png

3. Seleccionar Google Chrome & Mozilla Firefox

os-3.png

4. Definir la configuración de nuestro sitio

os-4.png

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 localhost en el campo SITE URL. Para este ejemplo yo he utilizado “practica-o1”.

os-5.png

5. Seleccionar el SDK a utilizar:

os-6.png

Una vez configurado se mostrará la siguiente ventana:

os7.png

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: documentation.onesignal.com/docs/web-push-s.., 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>

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

os-8.png

  • 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 localhost, de igual forma podríamos crear host virtuales para utilizar urls del tipo 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!

No Comments Yet