La activación de notificaciones push en sitios web se realiza con un solo clic desde el navegador, aquí te mostramos como hacerlo sin pagar nada

Las notificaciones push en sitios web se realiza con un solo clic desde el navegador, aquí te mostramos como agregarlo en tu sitio web sin pagar nada, actualmente este método es compatible con todas las versiones de navegadores tanto para teléfonos como para equipos de escritorio.

Para implementar las notificaciones push en tu página es necesario tener conocimiento básico en HTML y JavaScript y seguir los siguientes pasos.

1-Se usará la librería push.js.
2-Para el ejemplo se usará para le ejemplo la librería JQuery.
3-Deberan crear un archivo llamado sw.js y colocarlo en el directorio raíz (Donde se ubica el archivo index.*).

Archivo sw.js

self.addEventListener('install',function(event){});
self.addEventListener('fetch',function(event){});
self.addEventListener('activate',function(event){});

Aquí les muestro un ejemplo básico con el código completo para activar la notificación con un botón

Archivo index.html

<script src='https://code.jquery.com/jquery-latest.min.js' type="text/javascript"></script>
<script type="text/javascript" src='/{DirectorioJS}/bin/push.min.js'></script>
<script>

        if ('serviceWorker' in navigator) {
            console.log('SERVICE WORKER -> REGISTER -> Try to register the service worker');
            navigator.serviceWorker.register('/sw.js')
                .then(function(reg){
                    console.log('SERVICE WORKER -> REGISTER -> Successfully registered!');
                }).catch(function(err) {
                console.log("'SERVICE WORKER -> REGISTER -> Registration failed! This happened: ", err)
            });
        }

(function() {
            let deferredInstall;
            let promptTriggered = false;
            let canPromptPromiseResolved;
            const canPromptPromise = new Promise(function(resolve, reject) {
                canPromptPromiseResolved = resolve;
            });

            window.addEventListener('beforeinstallprompt', function(e) {
                promptTriggered = true;
                e.preventDefault();
                deferredInstall = e;
                canPromptPromiseResolved();
                return false;
            });

            const install = {};

            Object.defineProperty(install, 'isAvailable', {get: function() {
                    return promptTriggered;
                }});

            install.canPrompt = function() {
                return canPromptPromise;
            };

            install.prompt = function() {
                return new Promise(function(resolve, reject) {
                    if (promptTriggered === false) {
                        reject('User Agent decided not to prompt');
                    }
                    deferredInstall.prompt().then(function() {
                        return deferredInstall.userChoice;
                    }).then(function(choice) {
                        resolve(choice.outcome);
                    }).catch(function(reason) {
                        reject(reason);
                    });
                });
            };
            window.install = install;
        })();

</script>
<a id="boton-activador" href="#" class="button"> Click para mostrar el mensaje </a>
<script>

function demo_funcion() {
    Push.create('¡Hola mundo!', {
        body: '¿En qué podemos ayudarte?',
        icon: '/images/icon.png',
        link: '/#linkEnlace',
        timeout: 4000,
        onClick: function () {
            console.log("Fired!");
            window.focus();
            this.close();
        },
        vibrate: [200, 100, 200, 100, 200, 100, 200]
    });
}

$(document).ready(function() {
    $("#boton-activador").click(demo_funcion);
});
</script>

Con este ejemplo las notificaciones estarán funcionando en todos los navegadores tanto en PC como en dispositivos móviles, espero les sirva de ayuda el ejemplo mostrado, cualquier duda espero sus comentarios.