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:
- Crear una cuenta en onesignal.com
- 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
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>