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 il API Web Notifications. Questa funzione viene spesso utilizzata con API Push per informare l'utente di informazioni urgenti, ad esempio come eventi di ultime notizie o messaggi ricevuti. Le notifiche vengono mostrate eseguendo JavaScript nella dal 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 un'ora o un luogo. Un esempio di modello basato sul tempo è una notifica di calendario che ti ricorda una riunione importante con il tuo superiore 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. Connettività di rete o risparmio energetico come la modalità di sospensione possono ritardare l'invio delle notifiche push.

Gli attivatori di notifica risolvono il problema consentendoti di programmare l'attivazione delle notifiche in anticipo, in modo che il sistema operativo invii la notifica al momento giusto anche se non c'è connettività di rete o se il dispositivo è in modalità di risparmio energetico.

Casi d'uso

Le applicazioni di calendario possono utilizzare gli attivatori di notifica basati sull'ora per ricordare a un utente i prossimi eventi riunioni aziendali. Lo schema di notifica predefinito per un'app di calendario potrebbe essere la visualizzazione di un primo avviso una notifica un'ora prima della riunione e un'altra notifica più urgente cinque minuti in precedenza.

Un'emittente TV potrebbe ricordare agli utenti che il loro programma TV preferito sta per iniziare o che sta per iniziare una conferenza in diretta flusso di dati sta per iniziare.

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

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 la #enable-experimental-web-platform-features flag in about://flags.

Rilevamento delle caratteristiche

È possibile scoprire se il browser supporta gli attivatori di notifica controllando l'esistenza di showTrigger proprietà:

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 passa una proprietà della condizione showTrigger con un oggetto TimestampTrigger come valore al parametro 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 una determinata tramite ServiceWorkerRegistration.getNotifications(). Tieni presente che devi passare Flag includeTriggered per le notifiche programmate da includere 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 iniziare debug, premi Avvia registrazione di eventi. oppure Ctrl+E (Comando+E su Mac). Record di Chrome DevTools tutti gli eventi di notifica, incluse le notifiche pianificate, visualizzate e chiuse, per tre giorni anche quando DevTools è chiuso.

di Gemini Advanced.

.

Demo

Puoi vedere gli attivatori delle notifiche 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 definita in Controllo dell'accesso a funzionalità avanzate della piattaforma web, tra cui le controllo, trasparenza ed ergonomia. Poiché questa API richiede service worker, richiede anche un 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 richiesti vengono archiviati nello stesso contesto e vengono automaticamente eliminati quando il Service worker o l'utente elimina tutti i dati del sito relativi all'origine. Il blocco dei cookie impedisce inoltre l'installazione dei worker in Chrome e quindi l'utilizzo di questa API. Le notifiche possono Essere sempre disattivata dall'utente per il sito nelle impostazioni del sito.

Trasparenza

A differenza dell'API Push, questa API non dipende dalla rete, il che implica notifiche pianificate avere bisogno in anticipo di tutti i dati richiesti, comprese le risorse immagine a cui fanno riferimento badge, icon e image attributi. Ciò significa che la visualizzazione di una notifica programmata non è osservabile dallo sviluppatore e non prevede 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 attraverso approcci potenzialmente che invadono la privacy come la ricerca di geolocalizzazione degli indirizzi IP. Questo design consente alla funzionalità di attingere facoltativamente ai meccanismi di pianificazione forniti dal sistema operativo come AlarmManager di Android, per 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 le proprietà necessarie per implementare la tua idea? Hai una domanda o un commento sulla sicurezza modello? Segnala 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. Includi il maggior numero di dettagli possibile, semplici istruzioni per la riproduzione e imposta i componenti su UI>Notifications. Glitch funziona alla grande per condividere riproduzioni di bug rapide e semplici.

Hai intenzione di utilizzare l'API?

Vuoi utilizzare gli attivatori di notifica sul tuo sito? Il tuo supporto pubblico ci aiuta a dare la priorità e mostra agli altri fornitori di browser quanto sia fondamentale supportarli. Invia un tweet a @ChromiumDev utilizzando l'hashtag #NotificationTriggers: e facci sapere dove e come lo utilizzi.

Link utili

• Spiegazione pubblica
• Demo sugli attivatori di notifica | Origine demo dei trigger di notifica
• Monitoraggio del bug
• Voce ChromeStatus.com
• Componente lampeggiante: UI>Notifications

Ringraziamenti

Gli attivatori delle notifiche sono stati implementati da Richard Knoll e il video esplicativo scritto da Peter Beverloo, con contributi di Richard. Le seguenti persone hanno esaminato l'articolo: Joe Medley, Pete LePage e Richard e Peter. Immagine hero di Lukas Blazek su Unsplash.