La funzionalità Attiva notifiche ti consente 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.
Cosa sono gli attivatori di notifica?
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 dell'ultima ora o messaggi ricevuti. Le notifiche vengono mostrate eseguendo JavaScript sul dispositivo dell'utente.
Il problema dell'API Push è che non è affidabile per l'attivazione delle notifiche, che deve essere mostrate quando viene soddisfatta una determinata condizione, come l'ora o la località. Un esempio di condizione basata sul tempo è una notifica di calendario che ti ricorda di 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 di un tuo negozio di alimentari. La connettività di rete o le funzionalità per il risparmio della batteria, come la modalità di sospensione, possono ritardare l'invio delle notifiche push.
Gli attivatori di notifica risolvono questo problema consentendoti di pianificare in anticipo le notifiche con la relativa condizione di attivazione, in modo che il sistema operativo invii la notifica al momento giusto anche se non è disponibile alcuna connettività di rete o se il dispositivo è in modalità di risparmio energetico.
Casi d'uso
Le applicazioni di calendario possono utilizzare attivatori di notifica basati sull'ora per ricordare a un utente le riunioni imminenti. Lo schema di notifica predefinito per un'app di calendario potrebbe essere mostrare una prima notifica un'ora prima della riunione e un'altra notifica più urgente cinque minuti prima.
Una rete TV potrebbe ricordare agli utenti che sta per iniziare il loro programma TV preferito o che sta per iniziare una conferenza in live streaming.
I siti di conversione del fuso orario possono utilizzare attivatori di notifica basati sull'ora per consentire agli utenti di programmare sveglie per conferenze telefoniche o videochiamate.
Stato attuale
| Passaggio | Stato |
|---|---|
| 1. Crea messaggio esplicativo | Completato |
| 2. Crea bozza iniziale della specifica | Not started |
| 3. Raccogli feedback e ottimizza il design. | In progress |
| 4. Prova dell'origine | Completata |
| 5. Avvia | Not started |
Come utilizzare gli attivatori di notifica
Attivazione tramite about://flags
Per sperimentare localmente l'API Notification Triggers, senza un token di prova dell'origine, abilita il flag #enable-experimental-web-platform-features in about://flags.
Rilevamento delle funzionalità
Puoi scoprire se il browser supporta gli attivatori di notifica verificando 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, ad eccezione del fatto che devi passare una proprietà della 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 che corrispondono a un determinato tag tramite ServiceWorkerRegistration.getNotifications(). Tieni presente che devi passare il flag includeTriggered affinché le notifiche programmate siano 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 la registrazione degli eventi
o Ctrl + E (Comando + E su Mac). Chrome DevTools registra tutti gli eventi di notifica, incluse quelle programmate, 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 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 Controllo dell'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo dell'utente, trasparenza ed ergonomia. Poiché questa API richiede i service worker, richiede 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 sono archiviati nello stesso contesto e vengono eliminati automaticamente quando il service worker viene eliminato o l'utente elimina tutti i dati del sito per l'origine. Il blocco dei cookie impedisce inoltre l'installazione dei service worker in Chrome e, di conseguenza, l'utilizzo di 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 significa che le notifiche programmate richiedono in anticipo tutti i dati richiesti, incluse le risorse immagine a cui fanno riferimento gli attributi badge, icon e image. Ciò significa che mostrare una notifica programmata non è osservabile dallo sviluppatore e non prevede la riattivazione del service worker fino a quando l'utente non interagisce con la notifica.
Di conseguenza, al momento non esiste un modo noto per lo sviluppatore di ottenere informazioni sull'utente
tramite approcci potenzialmente invadenti per la privacy, come la ricerca di geolocalizzazione dell'indirizzo IP. Questo design consente inoltre alla funzionalità di attingere ai meccanismi di programmazione forniti dal sistema operativo come AlarmManager di Android, che aiuta a risparmiare batteria.
Feedback
Il team di Chrome vuole conoscere le tue esperienze con Attivatori di notifiche.
Parlaci della progettazione 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 un problema di specifica nel repo di GitHub degli attivatori di notifiche o aggiungi la tua opinione su 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 possibile di dettagli, di semplici istruzioni per la riproduzione e di impostare Componenti su UI>Notifications. Glitch funziona benissimo
per condividere riproduzioni di bug rapide e semplici.
Pensi di utilizzare l'API?
Stai pensando di utilizzare Attivatori di 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 usando l'hashtag
#NotificationTriggers
e facci sapere dove e come lo utilizzi.
Link utili
- Messaggio esplicativo pubblico
- Demo sugli attivatori di notifiche | Origine demo sugli attivatori di notifiche
- Bug di monitoraggio
- Voce ChromeStatus.com
- Componente lampeggiamento:
UI>Notifications
Ringraziamenti
Notifiche Triggers è stato implementato da Richard Knoll e nel video esplicativo scritto da Peter Beverloo, con il contributo di Richard. Le seguenti persone hanno esaminato l'articolo: Joe Medley, Pete LePage, nonché Richard e Peter. Immagine hero di Lukas Blazek su Unsplash.