Gli attivatori di notifiche ti consentono di pianificare notifiche locali che non richiedono una connessione di rete, il che le rende ideali per casi d'uso come le app di calendario.
Che cosa sono le condizioni di attivazione delle notifiche?
Gli sviluppatori web possono visualizzare le notifiche utilizzando l'API Web Notifications. Questa funzionalità viene spesso utilizzata con l'API Push per informare l'utente di informazioni urgenti, come notizie di cronaca o messaggi ricevuti. Le notifiche vengono mostrate eseguendo JavaScript sul dispositivo dell'utente.
Il problema con l'API Push è che non è affidabile per attivare le notifiche che devono essere mostrate quando viene soddisfatta una determinata condizione, ad esempio l'ora o la posizione. Un esempio di condizione basata sul tempo è una notifica del calendario che ti ricorda una riunione importante con il tuo capo alle 14:00. Un esempio di condizione basata sulla posizione è una notifica che ti ricorda di acquistare il latte quando entri nelle vicinanze del tuo supermercato. La connettività di rete o le funzionalità che preservano la batteria, come la modalità sospensione, possono ritardare l'invio delle notifiche push.
Gli attivatori delle notifiche risolvono questo problema consentendoti di pianificare le notifiche con la relativa condizione di attivazione in anticipo, in modo che il sistema operativo invii la notifica al momento giusto anche se non è presente connettività di rete o se il dispositivo è in modalità di risparmio batteria.
Casi d'uso
Le applicazioni di calendario possono utilizzare attivatori di notifiche basati sul tempo per ricordare a un utente le riunioni imminenti. Lo schema di notifica predefinito per un'app di calendario potrebbe essere mostrare una prima notifica di avviso un'ora prima di una riunione e un'altra notifica più urgente cinque minuti prima.
Una rete televisiva potrebbe ricordare agli utenti che sta per iniziare il loro programma TV preferito o un live streaming di una conferenza.
I siti di conversione dei fusi orari possono utilizzare attivatori di notifiche basati sul tempo per consentire agli utenti di pianificare sveglie per conferenze telefoniche o videochiamate.
Stato attuale
Passaggio | Stato |
---|---|
1. Creare un'animazione esplicativa | Completato |
2. Creare una bozza iniziale della specifica | Non avviato |
3. Raccogliere feedback e apportare modifiche al design. | In progress |
4. Prova dell'origine | Completa |
5. Lancio | Non avviato |
Come utilizzare gli attivatori di notifiche
Attivazione tramite about://flags
Per eseguire esperimenti con l'API Notification Triggers localmente, senza un token di prova dell'origine, attiva il flag #enable-experimental-web-platform-features
in about://flags
.
Rilevamento di funzionalità
Per scoprire se il browser supporta gli attivatori di notifiche, controlla l'esistenza della proprietàshowTrigger
:
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
Pianificare una notifica
La programmazione di una notifica è simile alla visualizzazione di una normale notifica push, con la differenza che devi passare una proprietà di condizione showTrigger
con un oggetto TimestampTrigger
come valore all'oggetto options
della notifica.
const createScheduledNotification = async (tag, title, timestamp) => {
const registration = await navigator.serviceWorker.getRegistration();
registration.showNotification(title, {
tag: tag,
body: 'This notification was scheduled 30 seconds ago',
showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
});
};
Annullare una notifica pianificata
Per annullare le notifiche programmate, richiedi prima un elenco di tutte le notifiche che corrispondono a un determinato
tag tramite ServiceWorkerRegistration.getNotifications()
. Tieni presente che devi passare il flag includeTriggered
per includere le notifiche pianificate nell'elenco:
const cancelScheduledNotification = async (tag) => {
const registration = await navigator.serviceWorker.getRegistration();
const notifications = await registration.getNotifications({
tag: tag,
includeTriggered: true,
});
notifications.forEach((notification) => notification.close());
};
Debug
Puoi utilizzare il pannello Notifiche di Chrome DevTools per eseguire il debug delle notifiche. Per avviare il debugging, premi Avvia registrazione eventi o Ctrl+E (Comando+E su Mac). DevTools di Chrome registra tutti gli eventi di notifica, tra cui le notifiche programmate, visualizzate e chiuse, per tre giorni, anche quando DevTools è chiuso.
Demo
Puoi vedere gli attivatori di notifiche in azione nella demo, che ti consente di pianificare le notifiche, elencarle e annullarle. Il codice sorgente è disponibile su Glitch.
Sicurezza e autorizzazioni
Il team di Chrome ha progettato e implementato l'API Notification Triggers utilizzando i principi fondamentali definiti in Controllo dell'accesso a potenti funzionalità della piattaforma web, tra cui il controllo dell'utente, la trasparenza e l'ergonomia. Poiché questa API richiede i worker di servizio, è necessario anche un contesto sicuro. L'utilizzo dell'API richiede la stessa autorizzazione delle normali notifiche push.
Controllo utente
Questa API è disponibile solo nel contesto di un ServiceWorkerRegistration
. Ciò implica che tutti
i dati richiesti vengono archiviati nello stesso contesto e vengono eliminati automaticamente quando viene eliminato il servizio worker o l'utente elimina tutti i dati del sito per l'origine. Il blocco dei cookie impedisce inoltre l'installazione di service worker in Chrome e, di conseguenza, l'utilizzo di questa API. Le notifiche possono essere sempre disattivate dall'utente per il sito nelle impostazioni del sito.
Trasparenza
A differenza dell'API Push, questa API non dipende dalla rete, il che implica che le notifiche programmate necessitano di tutti i dati richiesti in anticipo, incluse le risorse immagine a cui fanno riferimento gli attributi badge
, icon
e
image
. Ciò significa che la visualizzazione di una notifica programmata non è osservabile dallo sviluppatore
e non comporta l'attivazione del servizio worker finché l'utente non interagisce con la notifica.
Di conseguenza, al momento non è noto alcun modo in cui lo sviluppatore possa ottenere informazioni sull'utente tramite approcci potenzialmente invasivi della privacy come la ricerca della geolocalizzazione dell'indirizzo IP. Questo design consente inoltre alla funzionalità di utilizzare facoltativamente i meccanismi di pianificazione forniti dal sistema operativo, come AlarmManager
di Android, che aiuta a preservare la batteria.
Feedback
Il team di Chrome vuole conoscere la tua esperienza con gli attivatori di notifiche.
Fornisci informazioni sul design dell'API
C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Invia una segnalazione relativa alle specifiche nel repository GitHub degli attivatori di notifiche o aggiungi il tuo parere a un problema esistente.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalla specifica?
Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e imposta Componenti su UI>Notifications
. Glitch è ideale per condividere riproduzioni rapide e semplici di bug.
Hai intenzione di utilizzare l'API?
Hai intenzione di utilizzare le condizioni di attivazione delle notifiche sul tuo sito? Il tuo supporto pubblico ci aiuta a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle. Invia un tweet a
@ChromiumDev utilizzando l'hashtag
#NotificationTriggers
e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione pubblica
- Demo di Trigger di notifica | Origine demo di Trigger di notifica
- Bug di monitoraggio
- Voce ChromeStatus.com
- Componente lampeggiante:
UI>Notifications
Ringraziamenti
La funzionalità Notification Triggers è stata implementata da Richard Knoll e nel video esplicativo scritto da Peter Beverloo, con il contributo di Richard. Le seguenti persone hanno letto l'articolo: Joe Medley, Pete LePage, nonché Richard e Peter. Immagine hero di Lukas Blazek su Unsplash.