API Notification Triggers

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.

Thomas Steiner

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 Avvia registrazione di 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.

Un evento di notifica pianificato è stato registrato nel riquadro Notifiche di Chrome DevTools, che si trova nel riquadro Applicazione.
Una notifica pianificata.
Un evento di notifica visualizzato è stato registrato nel riquadro Notifiche di Chrome DevTools.
Una notifica visualizzata.

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.

Uno screenshot dell'app web demo Trigger di notifica.
La demo relativa agli attivatori di notifica.

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

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.