API Notification Triggers

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.

Thomas Steiner

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, ad esempio 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à di risparmio 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 video esplicativo 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 pianificazione di una notifica è simile alla visualizzazione di una normale notifica push, tranne per il fatto che devi passare una proprietà 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 Avvia la registrazione di 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.

Nel riquadro Notifiche di Strumenti per sviluppatori di Chrome è stato registrato un evento di notifica pianificata, che si trova nel riquadro Applicazione.
Una notifica programmata.
Nel riquadro Notifiche di Chrome DevTools è stato registrato un evento di notifica visualizzato.
Una notifica visualizzata.

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.

Uno screenshot dell'app web di demo degli attivatori di notifiche.
Demo degli attivatori di notifica.

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 contribuisce 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 dei 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

Ringraziamenti

Gli attivatori di notifica sono stati implementati da Richard Knoll e la spiegazione è stata scritta da Peter Beverloo, con contributi di Richard. L'articolo è stato esaminato da: Joe Medley, Pete LePage, nonché da Richard e Peter. Immagine hero di Lukas Blazek su Unsplash.