Gli attivatori di notifica ti consentono di pianificare notifiche locali che non richiedono una connessione di rete, il che li rende ideali per casi d'uso come le app di calendario.
Che cosa sono gli attivatori 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, ad esempio eventi relativi alle ultime notizie o messaggi ricevuti. Le notifiche vengono mostrate eseguendo JavaScript sul dispositivo dell'utente.
Il problema con l'API Push è che non è affidabile per l'attivazione di notifiche che devono essere mostrate quando viene soddisfatta una determinata condizione, come l'ora o la località. Un esempio di condizione basata sull'orario è una notifica di calendario che ti ricorda una riunione importante con il tuo capo alle 14:00. Un esempio di condizione basata sulla località è una notifica che ti ricorda di acquistare il latte quando entri nelle vicinanze del tuo negozio di alimentari. La connettività di rete o le funzionalità che preservano la batteria, come la modalità sospensione, possono ritardare l'invio delle notifiche push.
Gli attivatori di notifica risolvono il problema consentendoti di pianificare in anticipo le notifiche con la loro condizione di attivazione, in modo che il sistema operativo la invii al momento giusto anche se non è disponibile una connessione di rete o se il dispositivo è in modalità di risparmio energetico.
Casi d'uso
Le applicazioni di calendario possono utilizzare trigger di notifica basati sull'orario per ricordare a un utente le riunioni imminenti. Lo schema di notifica predefinito per un'app di calendario potrebbe essere quello di mostrare una prima notifica di avviso un'ora prima della riunione e un'altra notifica più urgente cinque minuti prima.
Un'emittente TV potrebbe ricordare agli utenti che il loro programma TV preferito sta per iniziare o che sta per iniziare una conferenza in live streaming.
I siti di conversione del fuso orario possono utilizzare gli attivatori di notifica basati sull'ora per consentire agli utenti di pianificare sveglie per conferenze telefoniche o videochiamate.
Stato attuale
Passaggio | Stato |
---|---|
1. Crea messaggio esplicativo | Completato |
2. Crea la bozza iniziale delle specifiche | Non avviata |
3. Raccogli feedback e ottimizza la progettazione. | In progress |
4. Prova dell'origine | Completato |
5. Lancio | Non avviata |
Come utilizzare gli attivatori di notifica
Attivazione tramite about://flags
Per sperimentare l'API Notification Triggers localmente, senza un token di prova dell'origine, abilita il flag #enable-experimental-web-platform-features
in about://flags
.
Rilevamento delle caratteristiche
Puoi scoprire se il browser supporta i trigger di notifica controllando l'esistenza della proprietà showTrigger
:
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
Pianificazione di una notifica
La programmazione di una notifica è simile alla visualizzazione di una normale notifica push, ma 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 programmata
Per annullare le notifiche programmate, devi prima richiedere un elenco di tutte le notifiche corrispondenti a un determinato tag fino al giorno ServiceWorkerRegistration.getNotifications()
. Tieni presente che devi superare il flag includeTriggered
affinché le notifiche pianificate vengano incluse 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 riquadro Notifiche di Chrome DevTools per eseguire il debug delle notifiche. Per avviare il debug, premi Avvia registrazione eventi o Ctrl+E (Comando+E su Mac). Chrome DevTools registra tutti gli eventi di notifica, incluse le notifiche pianificate, visualizzate e chiuse, per tre giorni, anche quando DevTools è chiuso.
Demo
Puoi vedere gli attivatori di notifica in azione nella demo, che ti consente di pianificare le notifiche, elencare le notifiche programmate 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 nella sezione Controllare l'accesso a funzionalità avanzate della piattaforma web, tra cui controllo utente, trasparenza ed ergonomia. Poiché questa API richiede service worker, richiede anche un contesto sicuro. L'utilizzo dell'API richiede la stessa autorizzazione delle normali notifiche push.
Controllo utenti
Questa API è disponibile solo nel contesto di un ServiceWorkerRegistration
. Ciò implica che tutti i dati necessari sono archiviati nello stesso contesto e vengono eliminati automaticamente quando il service worker viene eliminato o l'utente elimina tutti i dati dei siti per l'origine. Il blocco dei cookie impedisce inoltre l'installazione dei service worker in Chrome e, di conseguenza, di utilizzare questa API. Le notifiche possono
sempre essere 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 per le notifiche pianificate siano necessari in anticipo tutti i dati richiesti, comprese le risorse immagine a cui fanno riferimento gli attributi badge
, icon
e image
. Ciò significa che la visualizzazione di una notifica pianificata non è osservabile dallo sviluppatore
e non comporta la riattivazione del service worker finché l'utente non interagisce con la notifica.
Di conseguenza, al momento non esiste un modo noto che lo sviluppatore possa ottenere informazioni sull'utente tramite approcci potenzialmente invasivi della privacy, come la ricerca di geolocalizzazione dell'indirizzo IP. Questo design consente inoltre
alla funzionalità di attingere facoltativamente ai 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 notifica.
Parlaci della progettazione dell'API
C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza? Invia un problema relativo alle specifiche nel repository GitHub dei trigger di notifiche o aggiungi le tue opinioni a un problema esistente.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?
Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile,
semplici istruzioni per la riproduzione e imposta i componenti su UI>Notifications
. Glitch è perfetto per condividere
riproduzioni di bug semplici e veloci.
Hai intenzione di utilizzare l'API?
Vuoi utilizzare gli attivatori di notifica sul tuo sito? Il supporto pubblico ci consente di assegnare la priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle. Invia un tweet a
@ChromiumDev usando l'hashtag
#NotificationTriggers
e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione pubblica
- Demo dei trigger di notifica | Origine demo dei trigger di notifica
- Monitoraggio del bug
- 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.