2011-05-23 11 views
29

Lo que me gustaría hacer es mostrar una notificación tipo tostadora preferiblemente, pero cualquier método para "presionar" las actualizaciones en el escritorio es interesante.¿Qué formas hay para mostrar una notificación de escritorio desde una aplicación web?

Gracias

+0

Para mostrar la notificación de un sitio web como una ventana emergente, puede utilizar *** alert ***. –

+1

@harry. Gracias, pero estoy buscando una solución que también sea buena práctica. – reshefm

+0

¿cómo hacer lo mismo con windowsforms en asp.net? @reshefm –

Respuesta

120

A continuación se muestra un ejemplo de trabajo de notificaciones en el escritorio de Chrome, Firefox, Opera y Safari, copiados de Chrome desktop notification example.
Pruébalo en vivo on JSBin.

// request permission on page load 
document.addEventListener('DOMContentLoaded', function() { 
    if (Notification.permission !== "granted") 
    Notification.requestPermission(); 
}); 

function notifyMe() { 
    if (!Notification) { 
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return; 
    } 

    if (Notification.permission !== "granted") 
    Notification.requestPermission(); 
    else { 
    var notification = new Notification('Notification title', { 
     icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png', 
     body: "Hey there! You've been notified!", 
    }); 

    notification.onclick = function() { 
     window.open("https://stackoverflow.com/a/13328397/1269037");  
    }; 

    } 

} 
<button onclick="notifyMe()">Notify me!</button> 

Más información acerca de cómo funciona esto en mi respuesta a Chrome desktop notification example.

+1

Su nota sobre Chrome 24 fue muy útil, ¡gracias! –

+0

@Dan: Usando 'window.open' está pasando una URL específica que se abrirá al hacer clic. ¿Hay algún método para abrir la pestaña que arroja la notificación? –

+2

Esto estaba obsoleto. El mejor ejemplo sería en [Mozilla Developer Network] (https://developer.mozilla.org/en-US/docs/Web/API/notification). –

Cuestiones relacionadas