OneSignal | abr4xas.org

OneSignal es un servicio de notificación push de alto volumen y confiable para sitios web y aplicaciones móviles. Apoyan a todas las principales plataformas nativas y móviles proporcionando SDKs dedicados para cada plataforma, una API de servidor RESTful y un panel de control en línea para poder diseñar y enviar las notificaciones push.

Web Push SDK Setup (HTTPS)

OneSignal SDK Setup Guide for HTTPS websites. Works with all WEB PUSH platforms (CHROME, FIREFOX, SAFARI)

En este pequeño tutorial voy a explicar como realizar la integración de OneSignal en una aplicación web.

Requerimientos previos:

  1. Crear una cuenta en onesignal.com
  2. Obtener OneSignal App ID

1. Configurar los settings para OneSignal

Acá debemos determinar que plataforma vamos a usar, en esta oportunidad vamos a usar la opción para Chrome y Firefox

Configurar los settings para OneSignal | abr4xas.org

Debemos seguir todas las indicaciones que nos aparecen en la pantalla.

NOTA: Si tu web se encuentra en una carpeta por ejemplo: example.com/blog debes incluir solamente example.com

2. Archivos necesarios para que OneSignal funcione

Se necesitan 3 archivos para poner a funcionar OneSignal:

  • manifest.json
  • OneSignalSDKWorker.js
  • OneSignalSDKUpdaterWorker.js

Esos archivos los descargas desde acá.

El unico archivo que debemos modificar es manifest.json el contenido de ese archivo es algo como esto:

{
  "name": "OneSignal Example",
  "short_name": "OneSignalExample",
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "482941778795",
  "DO_NOT_CHANGE_GCM_SENDER_ID": "Do not change the GCM Sender ID",
}

Como ven, lo unico que hay que modificar son las llaves name y short_name. Luego de modificar hay que subir estos tres archivos a la carpeta raiz de nuestra web.

Luego de subir los archivos hay que hacer referencia al archivo manifest.json en el header de nuestra web de la siguiente forma:

<link rel="manifest" href="/manifest.json">

Los archivos necesitan estar visibles para poder acceder a ellos es decir, deben quedar de esta forma:

https://yoursite.com/manifest.json
https://yoursite.com/OneSignalSDKWorker.js
https://yoursite.com/OneSignalSDKUpdaterWorker.js

Y para finalizar:

Y ya para que todo funcione debemos agregar el siguiente código a nuestra web:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID", // esto lo obtenemos en el momento de crear la app
      autoRegister: false,
      notifyButton: {
        enable: true /* Set to false to hide */
      }
    }]);
</script>