# Notificaciones push web para sitios HTTP en Chrome y Firefox
## Configuración
1. Seleccione la opción Web push al crear un proyecto.
2. Elija http, ingrese la URL de su sitio y el nombre del proyecto.
3. Configure tanto Chrome como Firefox con sus credenciales del proyecto FCM.
## Integración
**1.** Cree el archivo **pushwoosh-web-pushes-http-sdk.js** en el directorio raíz de su sitio web con el siguiente contenido:
```javascript
var pushwoosh = {
PUSHWOOSH_APPLICATION_CODE: 'XXXX-XXXX',
PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER: 'pw_application_code',
init: function (applicationCode) {
this.PUSHWOOSH_APPLICATION_CODE = applicationCode;
window.addEventListener('message', this.pwReceiveMessage, false);
},
tryInitUsingGetParameter: function () {
var applicationCode = this.getQueryVariable(this.PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER);
console.log(applicationCode);
if (applicationCode) {
this.init(applicationCode);
}
},
pwReceiveMessage: function (event) {
if (event.data == 'allowPushNotifications') {
localStorage.setItem('pwAllowPushNotifications', true);
}
},
isBrowserChrome: function () {
return navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
},
isBrowserFirefox: function () {
return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
},
isBrowserSafari: function () {
return navigator.userAgent.toLowerCase().indexOf('safari') > -1 && !this.isBrowserChrome();
},
isBrowserSupported: function () {
return this.isBrowserChrome() || this.isBrowserFirefox();
},
subscribeAtStart: function () {
if (this.isBrowserSupported()) {
if (null === localStorage.getItem('pwAllowPushNotifications')) {
this.showSubscriptionWindow();
}
}
},
isSubscribedForPushNotifications: function () {
return true == localStorage.getItem('pwAllowPushNotifications');
},
showSubscriptionWindow: function () {
if (this.isBrowserSupported()) {
var windowWidth = screen.width / 2;
var windowHeight = screen.height / 2;
var windowLeft = screen.width / 2 - windowWidth / 2;
var windowRight = screen.height / 2 - windowHeight / 2;
var URL = 'https://' + this.PUSHWOOSH_APPLICATION_CODE + '.chrome.pushwoosh.com/';
var pwSubscribeWindow = window.open(URL, '_blank', 'width=' + windowWidth + ',height=' + windowHeight + ',resizable=yes,scrollbars=yes,status=yes,left=' + windowLeft + ',top=' + windowRight);
}
},
getQueryVariable: function (variable) {
// document.currentScript won't work if this code is called from function in event lister
if (document.currentScript) {
var urlParts = document.currentScript.src.split('?');
if (typeof urlParts[1] !== 'undefined') {
var vars = urlParts[1].split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];
}
}
}
}
else {
console.error('Cannot get current script address');
}
return null;
}
};
pushwoosh.tryInitUsingGetParameter();
```
**2.** Incluya el archivo anterior en su sitio web e inicialícelo usando el **código de aplicación** en lugar de XXXXX-XXXXX
```javascript
```
**3.** Para crear un botón de Suscripción a Notificaciones Push, use lo siguiente:
```txt
```
**4.** Alternativamente, si desea que las Suscripciones a Notificaciones aparezcan automáticamente (a diferencia del punto 4 anterior), use lo siguiente:
```javascript
```
Como resultado, se le pedirá al usuario que se suscriba a las notificaciones push del sitio web:
2. Elija http, ingrese la URL de su sitio y el nombre del proyecto.
3. Configure tanto Chrome como Firefox con sus credenciales del proyecto FCM.
## Integración
**1.** Cree el archivo **pushwoosh-web-pushes-http-sdk.js** en el directorio raíz de su sitio web con el siguiente contenido:
```javascript
var pushwoosh = {
PUSHWOOSH_APPLICATION_CODE: 'XXXX-XXXX',
PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER: 'pw_application_code',
init: function (applicationCode) {
this.PUSHWOOSH_APPLICATION_CODE = applicationCode;
window.addEventListener('message', this.pwReceiveMessage, false);
},
tryInitUsingGetParameter: function () {
var applicationCode = this.getQueryVariable(this.PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER);
console.log(applicationCode);
if (applicationCode) {
this.init(applicationCode);
}
},
pwReceiveMessage: function (event) {
if (event.data == 'allowPushNotifications') {
localStorage.setItem('pwAllowPushNotifications', true);
}
},
isBrowserChrome: function () {
return navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
},
isBrowserFirefox: function () {
return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
},
isBrowserSafari: function () {
return navigator.userAgent.toLowerCase().indexOf('safari') > -1 && !this.isBrowserChrome();
},
isBrowserSupported: function () {
return this.isBrowserChrome() || this.isBrowserFirefox();
},
subscribeAtStart: function () {
if (this.isBrowserSupported()) {
if (null === localStorage.getItem('pwAllowPushNotifications')) {
this.showSubscriptionWindow();
}
}
},
isSubscribedForPushNotifications: function () {
return true == localStorage.getItem('pwAllowPushNotifications');
},
showSubscriptionWindow: function () {
if (this.isBrowserSupported()) {
var windowWidth = screen.width / 2;
var windowHeight = screen.height / 2;
var windowLeft = screen.width / 2 - windowWidth / 2;
var windowRight = screen.height / 2 - windowHeight / 2;
var URL = 'https://' + this.PUSHWOOSH_APPLICATION_CODE + '.chrome.pushwoosh.com/';
var pwSubscribeWindow = window.open(URL, '_blank', 'width=' + windowWidth + ',height=' + windowHeight + ',resizable=yes,scrollbars=yes,status=yes,left=' + windowLeft + ',top=' + windowRight);
}
},
getQueryVariable: function (variable) {
// document.currentScript won't work if this code is called from function in event lister
if (document.currentScript) {
var urlParts = document.currentScript.src.split('?');
if (typeof urlParts[1] !== 'undefined') {
var vars = urlParts[1].split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];
}
}
}
}
else {
console.error('Cannot get current script address');
}
return null;
}
};
pushwoosh.tryInitUsingGetParameter();
```
**2.** Incluya el archivo anterior en su sitio web e inicialícelo usando el **código de aplicación** en lugar de XXXXX-XXXXX
```javascript
```
**3.** Para crear un botón de Suscripción a Notificaciones Push, use lo siguiente:
```txt
```
**4.** Alternativamente, si desea que las Suscripciones a Notificaciones aparezcan automáticamente (a diferencia del punto 4 anterior), use lo siguiente:
```javascript
```
Como resultado, se le pedirá al usuario que se suscriba a las notificaciones push del sitio web:
