In questo codelab utilizzerai le funzionalità di base dell'API Notifications per:
- Richiedere l'autorizzazione per inviare notifiche
- Inviare notifiche
- Sperimenta le opzioni di notifica
Remixa l'app di esempio e visualizzala in una nuova scheda
Le notifiche vengono bloccate automaticamente dall'app Glitch incorporata, pertanto non potrai visualizzare l'anteprima dell'app in questa pagina. Ecco cosa devi fare:
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero .
Il Glitch dovrebbe aprirsi in una nuova scheda di Chrome:
Mentre svolgi questo codelab, apporta modifiche al codice nel Glitch incorporato in questa pagina. Aggiorna la nuova scheda con l'app pubblicata per visualizzare le modifiche.
Acquisisci familiarità con l'app iniziale e il relativo codice
Per iniziare, dai un'occhiata all'app in tempo reale nella nuova scheda di Chrome:
Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools. Fai clic sulla scheda Console.
Nella console dovresti vedere il seguente messaggio:
Notification permission is default
Se non sai cosa significa, non preoccuparti: a breve verrà svelato tutto.
Fai clic sui pulsanti nell'app pubblicata: Richiedi autorizzazione per inviare notifiche e Invia una notifica.
La console stampa messaggi "DA FARE" da un paio di stub di funzione:
requestPermission
esendNotification
. Queste sono le funzioni che implementerai in questo codelab.
Ora diamo un'occhiata al codice dell'app di esempio in Glitch incorporato in questa pagina.
Apri public/index.js
e dai un'occhiata ad alcune parti importanti del codice esistente:
La funzione
showPermission
utilizza l'API Notifications per recuperare lo stato corrente delle autorizzazioni del sito e registrarlo nella console:// Print current permission state to console;
// update onscreen message.
function showPermission() {
let permission = Notification.permission;
console.log('Notification permission is ' + permission);
let p = document.getElementById('permission');
p.textContent = 'Notification permission is ' + permission;
}Prima di richiedere l'autorizzazione, lo stato dell'autorizzazione è
default
. Nello stato di autorizzazionedefault
, un sito deve richiedere l'autorizzazione e ottenerla prima di poter inviare notifiche.La funzione
requestPermission
è uno stub:// Use the Notification API to request permission to send notifications.
function requestPermission() {
console.log('TODO: Implement requestPermission()');
}Implementerai questa funzione nel passaggio successivo.
La funzione
sendNotification
è uno stub:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
console.log('TODO: Implement sendNotification()');
}Implementerai questa funzione dopo aver implementato
requestPermission
.L'ascoltatore di eventi
window.onload
chiama la funzioneshowPermission
al caricamento della pagina, visualizzando lo stato corrente dell'autorizzazione nella console e nella pagina:window.onload = () => { showPermission(); };
Richiedere l'autorizzazione per inviare notifiche
In questo passaggio, aggiungerai la funzionalità per richiedere all'utente l'autorizzazione per inviare notifiche.
Utilizzerai il metodo Notification.requestPermission()
per attivare un popup che chiede all'utente di consentire o bloccare le notifiche del tuo sito.
Sostituisci lo stub della funzione
requestPermission
in public/index.js con il seguente codice:// Use the Notification API to request permission to send notifications.
function requestPermission() {
Notification.requestPermission()
.then((permission) => {
console.log('Promise resolved: ' + permission);
showPermission();
})
.catch((error) => {
console.log('Promise was rejected');
console.log(error);
});
}Ricarica la scheda di Chrome in cui stai visualizzando l'app in tempo reale.
Nell'interfaccia dell'app in tempo reale, fai clic su Richiedi autorizzazione per l'invio di notifiche. Viene visualizzato un popup.
L'utente può scegliere una di tre risposte al popup di autorizzazione.
Risposta dell'utente | Stato dell'autorizzazione di notifica |
---|---|
L'utente seleziona Consenti. | granted |
L'utente seleziona Blocca. | denied |
L'utente chiude il popup senza effettuare una selezione | default |
Se l'utente fa clic su Consenti:
L'opzione
Notification.permission
è impostata sugranted
.Il sito potrà visualizzare le notifiche.
Le chiamate successive a
Notification.requestPermission
verranno risolte ingranted
senza un popup.
Se l'utente fa clic su Blocca:
L'opzione
Notification.permission
è impostata sudenied
.Il sito non potrà mostrare notifiche all'utente.
Le chiamate successive a
Notification.requestPermission
verranno risolte indenied
senza un popup.
Se l'utente ignora il popup:
Mancano
Notification.permission
giornidefault
.Il sito non potrà mostrare notifiche all'utente.
Le chiamate successive a
Notification.requestPermission
produrranno altri popup.Tuttavia, se l'utente continua a ignorare i popup, il browser potrebbe bloccare il sito, impostando
Notification.permission
sudenied
. Di conseguenza, all'utente non verranno mostrati né i popup di richiesta di autorizzazione né le notifiche.Al momento della stesura di questo articolo, il comportamento del browser in risposta ai popup di autorizzazione per le notifiche ignorati è ancora soggetto a modifiche. Il modo migliore per gestire questo problema è richiedere sempre l'autorizzazione di notifica in risposta a un'interazione avviata dall'utente, in modo che se la aspetti e sappia cosa sta succedendo.
Invia una notifica
In questo passaggio, invierai una notifica all'utente.
Utilizzerai il costruttore Notification
per creare una nuova notifica e tentare di visualizzarla.
Se lo stato dell'autorizzazione è granted
, la notifica verrà visualizzata.
Sostituisci lo stub della funzione
sendNotification
in index.js con il seguente codice:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
}Il costruttore
Notification
accetta due parametri:title
eoptions
.options
è un oggetto con proprietà che rappresentano le impostazioni visive e i dati che puoi includere in una notifica. Per ulteriori informazioni, consulta la documentazione MDN sui parametri di notifica.Aggiorna la scheda di Chrome in cui stai visualizzando l'app in tempo reale e fai clic sul pulsante Invia notifica. Dovresti visualizzare una notifica con il testo
Test body
.
Che cosa succede quando invii notifiche senza autorizzazione?
In questo passaggio, aggiungerai un paio di righe di codice che ti consentiranno di vedere cosa succede quando provi a visualizzare una notifica senza l'autorizzazione dell'utente.
- In
public/index.js
, alla fine della funzionesendNotification
, definisci il gestore eventionerror
della nuova notifica:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
Per rilevare un errore di autorizzazione alle notifiche:
Fai clic sull'icona a forma di lucchetto accanto alla barra degli URL di Chrome e reimposta l'impostazione di autorizzazione per le notifiche del sito su quella predefinita.
Fai clic su Richiedi autorizzazione per inviare notifiche e questa volta seleziona Blocca dal popup.
Fai clic su Invia notifica e controlla cosa succede. Il testo dell'errore (
Could not send notification
) e l'oggetto evento vengono registrati nella console.
Se vuoi, reimposta le autorizzazioni di notifica del sito. Puoi provare a richiedere l'autorizzazione e a ignorare il popup più volte per vedere cosa succede.
Sperimenta le opzioni di notifica
Ora hai appreso le nozioni di base su come richiedere l'autorizzazione e inviare notifiche. Hai anche visto l'impatto delle risposte degli utenti sulla capacità della tua app di mostrare le notifiche.
Ora puoi provare le numerose opzioni di visualizzazione e dati disponibili durante la creazione di una notifica. Di seguito è riportato l'elenco completo delle opzioni disponibili. Per ulteriori informazioni su queste opzioni, consulta la documentazione relativa alle notifiche su MDN.
Tieni presente che i browser e i dispositivi implementano queste opzioni in modo diverso, quindi vale la pena testare le notifiche su piattaforme diverse per vedere come appaiono.
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
Per altre idee, consulta il Notification Generator di Peter Beverloo.
Se hai riscontrato un problema, ecco il codice completo per questo codelab: glitch.com/edit/#!/codelab-notifications-get-started-completed
Per saperne di più, dai un'occhiata al prossimo codelab di questa serie, Gestire le notifiche con un service worker.