Notifiche del browser invocate al sito web

Question

Quindi ultimamente su alcuni siti Web ho visto queste notifiche richiamate a livello di browser che popup anche se non hai aperto quel determinato sito web. Devi consentire la visualizzazione di tali notifiche e poi sono praticamente ovunque, anche quando apri per la prima volta un browser senza schede.

Non so come utilizzare per queste notifiche a livello di browser invocate dal mio sito web. Un nome e alcuni esempi di codice sarebbero apprezzati, non so nemmeno in che linguaggio di programmazione sia scritto (assumendo Javascript).

Questo è uno screenshot di quello che sto parlando (in alto a destra):

Come vedete, appaiono ancora anche se il il browser è ridotto al minimo!

Answer 1

Questi sono implementati utilizzando l'API di notifica - una documentazione recente può essere trovato qui:

https://developer.mozilla.org/en-US/docs/Web/API/notification

Si può facilmente provare dalla console della maggior parte dei browser attuali -

Notification.requestPermission(); 

Approva l'autorizzazione di notifica e quindi provare

new Notification('Hello, you have been notified!'); 

La documentazione contiene esempi di utilizzo più dettagliati.

Answer 2

Come detto pvg, esiste un'API browser denominata Notification, che consente di inviare notifiche ai propri utenti. È necessario prima richiedere l'autorizzazione e, se granted, creare un nuovo Notification.

ho costruito un micro libreria in JavaScript che fa exactl che, come un oggetto, andare check it out qui: https://github.com/jsmrcaga/miniNotif

L'uso è semplice, si effettua una nuova notifica come un oggetto in questo modo:

var yourNotif = new miniNotif.notification('title', {body: 'your body', icon: 'URL'});

e chiamare yourNotif.show() ogni volta che si desidera che venga visualizzato.

Credo che il readme su GitHub non è aggiornato se

Answer 3

Se si desidera implementare le notifiche normali, le risposte che avete ricevuto sono tutti corretti.

Se si desidera implementare notifiche PUSH, la risposta che si aspetta è nel post this (con spiegazione e un tutorial che spiega come è possibile implementarlo).