Se chiedete a un gruppo di sviluppatori quali funzionalità dei dispositivi mobili non sono presenti web, le notifiche push sono sempre in cima all'elenco.
Le notifiche push consentono agli utenti di attivare gli aggiornamenti tempestivi dai siti e ti consentono di coinvolgerli nuovamente con contenuti personalizzati e coinvolgenti.
A partire dalla versione 42 di Chrome, l'API Push e Le API di notifica sono disponibili per sviluppatori.
L'API Push in Chrome si basa su diverse tecnologie, tra cui File manifest delle app web e Service worker. In questo post esamineremo ciascuna di queste tecnologie, ma solo il minimo indispensabile. per rendere operativi i messaggi push. Per comprendere meglio alcuni di questi le altre caratteristiche dei manifest e le funzionalità offline dei service worker, dai un'occhiata ai link qui sopra.
Vedremo anche cosa sarà aggiunto all'API nelle future versioni di Chrome, e infine le Domande frequenti.
Implementazione della messaggistica push per Chrome
In questa sezione viene descritto ogni passaggio da completare per supportare il push i messaggi nella tua app web.
Registra un service worker
La necessità di avere un service worker per implementare i messaggi push per sul web. Il motivo è che quando viene ricevuto un messaggio push, un browser può avviare un service worker, che viene eseguito in background senza aperta e invia un evento per consentirti di decidere come gestirlo messaggio push.
Di seguito è riportato un esempio di come registrare un service worker nella tua applicazione web. Quando la registrazione è stata completata correttamente, chiamiamo initialiseState(), che che tratteremo a breve.
var isPushEnabled = false;
…
window.addEventListener('load', function() {
var pushButton = document.querySelector('.js-push-button');
pushButton.addEventListener('click', function() {
if (isPushEnabled) {
unsubscribe();
} else {
subscribe();
}
});
// Check that service workers are supported, if so, progressively
// enhance and add push messaging support, otherwise continue without it.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(initialiseState);
} else {
console.warn('Service workers aren\'t supported in this browser.');
}
});
Il gestore dei clic sui pulsanti sottoscrive o annulla l'iscrizione dell'utente per il push dei messaggi. isPushEnabled è una variabile globale che monitora semplicemente se viene eseguito il push che i messaggi siano attualmente iscritti o meno. Verrà fatto riferimento a questi elementi gli snippet di codice.
Prima di registrare il service-worker.js, verifichiamo che i service worker siano supportati
contenente la logica per la gestione di messaggi push. Qui c'è
indicano semplicemente al browser che questo file JavaScript è il service worker
per il nostro sito.
Configura lo stato iniziale
Una volta registrato il service worker, occorre impostare lo stato della UI.
Gli utenti si aspettano una semplice UI per attivare o disattivare i messaggi push per il tuo sito. e si aspettano che venga mantenuta al passo con le eventuali modifiche. In altre parole, se abilitano i messaggi push per il tuo sito, abbandona e torna un Dopo una settimana, la UI dovrebbe evidenziare che i messaggi push sono già attivati.
Puoi trovare alcune linee guida sull'esperienza utente in questo documento, In questo articolo ci concentreremo sugli aspetti tecnici.
A questo punto potresti pensare che ci sono solo due stati da affrontare: abilitato o disabilitato. Tuttavia, esistono altri stati che circondano notifiche che devi prendere in considerazione.
Ci sono alcune API che dobbiamo verificare prima di abilitare il pulsante e se tutto è supportato, possiamo abilitare la UI e impostare lo stato iniziale su indicano se i messaggi push sono iscritti o meno.
Poiché la maggior parte di questi controlli comporta la disattivazione della nostra interfaccia utente, devi imposta lo stato iniziale su Disattivato. In questo modo eviterai inoltre di fare confusione nel problemi con il codice JavaScript della pagina, ad esempio il file JS non può essere scaricato o l'utente ha disattivato JavaScript.
<button class="js-push-button" disabled>
Enable Push Messages
</button>
Con questo stato iniziale, possiamo eseguire i controlli descritti sopra nelle
initialiseState(), ovvero dopo la registrazione del Service worker.
// Once the service worker is registered set the initial state
function initialiseState() {
// Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
console.warn('Notifications aren\'t supported.');
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
console.warn('The user has blocked notifications.');
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn\'t supported.');
return;
}
// We need the service worker registration to check for a subscription
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Do we already have a push message subscription?
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
// Enable any UI which subscribes / unsubscribes from
// push messages.
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = false;
if (!subscription) {
// We aren't subscribed to push, so set UI
// to allow the user to enable push
return;
}
// Keep your server in sync with the latest subscriptionId
sendSubscriptionToServer(subscription);
// Set your UI to show they have subscribed for
// push messages
pushButton.textContent = 'Disable Push Messages';
isPushEnabled = true;
})
.catch(function(err) {
console.warn('Error during getSubscription()', err);
});
});
}
Una breve panoramica di questi passaggi:
- Verifichiamo che
showNotificationsia disponibile in ServiceWorkerRegistration un prototipo di modello. In caso contrario non potremo mostrare la notifica del nostro service worker alla ricezione di un messaggio push. - Controlliamo l'attuale
Notification.permissionper assicurarci che"denied". Un'autorizzazione negata significa che non puoi mostrare notifiche finché l'utente non modifica manualmente l'autorizzazione nel browser. - Per verificare se i messaggi push sono supportati, verifichiamo che
PushManagersia disponibili nell'oggetto finestra. - Infine, abbiamo utilizzato
pushManager.getSubscription()per verificare se avevamo già se si dispone di un abbonamento o meno. Se lo facciamo, inviamo i dettagli dell'abbonamento al nostro per assicurarci di avere le informazioni giuste e impostare l'UI in modo da indicare per capire se i messaggi push sono già attivi o meno. Esamineremo i dettagli più avanti in questo articolo.
Attendiamo la risoluzione di navigator.serviceWorker.ready per verificare la presenza di
abbonamento e abilitare il pulsante perché è solo dopo che il servizio
worker è attivo e puoi effettivamente iscriverti ai messaggi push.
Il passaggio successivo è gestire il momento in cui l'utente vuole abilitare i messaggi push, dobbiamo configurare un progetto nella Console per gli sviluppatori di Google e aggiungere alcuni parametri al file manifest utilizza Firebase Cloud Messaging (FCM), noto in precedenza come Google Cloud Messaging (GCM).
Crea un progetto nella Console per gli sviluppatori di Firebase
Chrome utilizza FCM per gestire l'invio e il recapito dei messaggi push. però usi l'API FCM, devi configurare un progetto su Firebase Developer Console.
I seguenti passaggi sono specifici per Chrome, Opera per Android e Samsung Browser che utilizzano FCM. Parleremo di come funzionerebbe in altri browser più avanti nell'articolo.
Crea un nuovo progetto di sviluppatore Firebase
Per iniziare, devi creare un nuovo progetto su https://console.firebase.google.com/ facendo clic su "Crea nuovo progetto".
Aggiungi un nome per il progetto, creane uno per accedere al progetto dashboard:
Da questa dashboard, fai clic sull'ingranaggio accanto al nome del progetto nella parte superiore. nell'angolo in alto a sinistra e fai clic su "Impostazioni progetto".
Nella pagina delle impostazioni, fai clic su "Cloud Messaging" .
Questa pagina contiene la chiave API per i messaggi push, che utilizzeremo in seguito, e l'ID mittente, che dobbiamo inserire nel file manifest dell'app web .
Aggiungi un manifest dell'app web
Per il push, dobbiamo aggiungere un file manifest con un campo gcm_sender_id, affinché la sottoscrizione push abbia esito positivo. Questo parametro è richiesto solo Chrome, Opera per Android e Samsung Browser in modo che possano utilizzare FCM / GCM.
gcm_sender_id viene utilizzato da questi browser quando sottoscrive un abbonamento a un utente. dispositivo con FCM. Ciò significa che FCM può identificare il dispositivo dell'utente e che l'ID mittente corrisponda alla chiave API corrispondente e che l'utente abbia consentito al tuo server di inviare messaggi push.
Di seguito è riportato un semplicissimo file manifest:
{
"name": "Push Demo",
"short_name": "Push Demo",
"icons": [{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"gcm_sender_id": "<Your Sender ID Here>"
}
Devi impostare il valore gcm_sender_id sull'ID mittente da del tuo progetto Firebase.
Dopo aver salvato il file manifest nel progetto (manifest.json è un'ottima ), fai riferimento a quest'ultimo nel codice HTML con il seguente tag nell'intestazione del .
<link rel="manifest" href="/manifest.json">
Se non aggiungi un file manifest web con questi parametri, riceverai un'eccezione
quando tenti di iscrivere l'utente ai messaggi push, con l'errore
"Registration failed - no sender id provided" o "Registration failed -
permission denied".
Iscriviti a Messaggistica push
Ora che hai configurato un file manifest, puoi tornare al codice JavaScript del tuo sito.
Per iscriverti, devi chiamare il metodo subscribe() sulla PushManager, a cui puoi accedere tramite ServiceWorkerRegistration.
All'utente verrà chiesto di concedere alla tua origine l'autorizzazione per inviare push notifiche. Senza questa autorizzazione, non potrai iscriviti.
Se la promessa è stata restituita risolve il metodo subscribe(), ti verrà assegnato PushSubscription che conterrà un endpoint.
L'endpoint deve essere salvato sul tuo server per ogni dall'utente, poiché dovrai inviare i messaggi push in un secondo momento.
Il seguente codice consente all'utente di iscriversi ai messaggi push:
function subscribe() {
// Disable the button so it can't be changed while
// we process the permission request
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe()
.then(function(subscription) {
// The subscription was successful
isPushEnabled = true;
pushButton.textContent = 'Disable Push Messages';
pushButton.disabled = false;
// TODO: Send the subscription.endpoint to your server
// and save it to send a push message at a later date
return sendSubscriptionToServer(subscription);
})
.catch(function(e) {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
console.warn('Permission for Notifications was denied');
pushButton.disabled = true;
} else {
// A problem occurred with the subscription; common reasons
// include network errors, and lacking gcm_sender_id and/or
// gcm_user_visible_only in the manifest.
console.error('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
}
});
});
}
A questo punto la tua applicazione web è pronta a ricevere un messaggio push, anche se niente accadrà finché non aggiungeremo un listener di eventi push al nostro file dei service worker.
Listener di eventi push per service worker
Quando viene ricevuto un messaggio push, parleremo di come inviare effettivamente nella sezione successiva), un evento push verrà spedito al tuo service worker, dopodiché dovrai per visualizzare una notifica.
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
Questo codice registra un listener di eventi push e mostra una notifica con un
titolo, corpo del testo, icona e tag di notifica predefiniti.
Una particolarità da evidenziare con questo esempio è la event.waitUntil()
. Questo metodo utilizza un
promettere ed estende
di un gestore di eventi (o si può considerare come la conservazione del servizio
worker vivo), fino a quando la promessa non è
saldo;
In questo caso, la promessa passata a event.waitUntil è la promessa restituita
da showNotification().
Il tag di notifica agisce come un identificatore per le notifiche uniche. Se abbiamo inviato due messaggi push allo stesso endpoint, con un breve ritardo tra loro e visualizzare notifiche con lo stesso tag, il browser visualizza la prima notifica e la sostituisce con la seconda notifica quando viene ricevuto il messaggio push.
Se vuoi mostrare più notifiche contemporaneamente, utilizza un tag diverso oppure nessun tag. Daremo un'occhiata a un esempio più completo della visualizzazione di una notifica più avanti. post. Per il momento, cerchiamo di semplificare le cose e vediamo se l'invio di un messaggio push questa notifica.
Invio di un messaggio push
Abbiamo effettuato l'iscrizione ai messaggi push e il nostro service worker è pronto a mostrare di notifica, quindi è il momento di inviare un messaggio push tramite FCM.
Questo vale solo per i browser che utilizzano FCM.
Quando invii la variabile PushSubscription.endpoint al tuo server,
per FCM è speciale. Ha un parametro alla fine dell'URL che
è un registration_id.
Un endpoint di esempio potrebbe essere:
https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
L'URL FCM è:
https://fcm.googleapis.com/fcm/send
Lo registration_id sarebbe:
APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
Si tratta di una funzionalità specifica per i browser che utilizzano FCM. In un browser normale, ottenere semplicemente un endpoint, che lo chiamerai in modo standard funzionerebbe indipendentemente dall'URL.
Ciò significa che sul tuo server dovrai verificare se l'endpoint è per FCM e, se lo è, estrai l'ID registrazione. Per farlo in Python, potrebbe fare qualcosa come:
if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
endpointParts = endpoint.split('/')
registrationId = endpointParts[len(endpointParts) - 1]
endpoint = 'https://fcm.googleapis.com/fcm/send'
Una volta ottenuto l'ID di registrazione, puoi effettuare una chiamata all'API di FCM. Tu puoi trovare documenti di riferimento sull'API FCM qui.
Gli aspetti principali da ricordare quando si chiama FCM sono:
- Un'intestazione Authorization con valore
key=<YOUR_API_KEY>deve essere impostato quando chiami l'API, dove<YOUR_API_KEY>è Chiave API del progetto Firebase.- La chiave API viene utilizzata da FCM per trovare l'ID mittente appropriato, verificare l'utente ha concesso l'autorizzazione per il tuo progetto e infine verificando che l'indirizzo IP del server sia incluso nella lista consentita per quel progetto.
- Un'intestazione
Content-Typeappropriata diapplication/jsonoppureapplication/x-www-form-urlencoded;charset=UTF-8a seconda che tu e inviare i dati come JSON o dati del modulo. - Un array di
registration_ids: questi sono gli ID di registrazione che devi estrarre dagli endpoint.
Consulta la documentazione su come inviare messaggi push dal tuo server, ma per un rapido controllo del Service worker puoi usare cURL per inviare un messaggio push al tuo browser.
Sostituisci <YOUR_API_KEY> e <YOUR_REGISTRATION_ID>
in questo comando cURL con il tuo ed eseguirlo da un terminale.
Dovresti vedere una notifica elegante:
curl --header "Authorization: key=<YOUR_API_KEY>" --header
"Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
"{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
Durante lo sviluppo della logica di backend, ricorda che l'intestazione e del corpo del POST sono specifici dell'endpoint FCM, quindi rileva quando l'endpoint è per FCM e aggiungi in modo condizionale l'intestazione e formatta il corpo del POST. Per altri browser (e, si spera, in futuro, Chrome) dovrai implementare il Web Push Protocol.
Uno svantaggio dell'attuale implementazione dell'API Push in Chrome è che impossibile inviare dati con un messaggio push. No, niente. Il motivo è che che in una futura implementazione i dati del payload dovranno essere criptati prima che venga inviato a un endpoint di messaggistica push. In questo modo l'endpoint, a prescindere dal provider push, non sarà in grado di visualizzare facilmente i contenuti messaggio push. Questo meccanismo protegge anche da altre vulnerabilità, come dei certificati HTTPS e degli attacchi man in the middle tra e il provider del push. Tuttavia, poiché questa crittografia non è ancora supportata, nel frattempo dovrai eseguire un recupero per ottenere le informazioni necessarie completare una notifica.
Esempio di evento push più completo
La notifica che abbiamo visto finora è piuttosto basilare e, per quanto riguarda gli esempi, ma non riesce a coprire un caso d'uso reale.
Realisticamente, la maggior parte delle persone vorrà ottenere alcune informazioni dal proprio server prima di visualizzare la notifica. Potrebbero essere dati da compilare titolo e messaggio della notifica con qualcosa di specifico o fare un passo in più e memorizza nella cache alcune pagine o dati in modo che, quando l'utente fa clic sulla notifica, tutto diventa immediatamente disponibile all'apertura del browser, anche se non è disponibile in quel momento.
Nel codice seguente recuperiamo alcuni dati da un'API, convertiamo la risposta in un e utilizzarlo per compilare la nostra notifica.
self.addEventListener('push', function(event) {
// Since there is no payload data with the first version
// of push messages, we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(SOME_API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
var notificationTag = data.notification.tag;
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = URL_TO_DEFAULT_ICON;
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
});
Ancora una volta vale la pena sottolineare che event.waitUntil() rispetta una promessa
che genera la promessa restituita da showNotification(), il che significa
il listener di eventi non si chiuderà finché la chiamata fetch() asincrona non sarà completata e
la notifica.
Vedrai una notifica anche se c'è un errore. Questo è perché, in caso contrario, Chrome mostrerà la sua notifica generica.
Apertura di un URL quando l'utente fa clic su una notifica
Quando l'utente fa clic su una notifica, viene inviato un evento notificationclick
nel tuo service worker. All'interno del gestore, puoi intraprendere
le azioni appropriate,
come impostare lo stato attivo su una scheda o aprire una finestra con un determinato URL:
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWindow('/');
}
})
);
});
Questo esempio apre il browser alla radice dell'origine del sito, in modo da impostare lo stato attivo su scheda della stessa origine esistente, se esistente, e aprirne una nuova.
Troverai un post dedicato ad alcune delle cose che puoi fare con l'API Notification qui.
Annullare l'iscrizione al dispositivo di un utente
Hai effettuato l'iscrizione al dispositivo di un utente che riceve messaggi push, ma come puoi annullare l'iscrizione?
Il principale requisito per annullare l'iscrizione sul dispositivo di un utente è chiamare il numero
unsubscribe() nella
PushSubscription
e rimuovere l'endpoint dai server (in modo che non si
l'invio di messaggi push che sai che non verranno ricevuti). Il codice seguente include
esattamente come segue:
function unsubscribe() {
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// To unsubscribe from push messaging, you need get the
// subscription object, which you can call unsubscribe() on.
serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) {
// Check we have a subscription to unsubscribe
if (!pushSubscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
isPushEnabled = false;
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
return;
}
var subscriptionId = pushSubscription.subscriptionId;
// TODO: Make a request to your server to remove
// the subscriptionId from your data store so you
// don't attempt to send them push messages anymore
// We have a subscription, so call unsubscribe on it
pushSubscription.unsubscribe().then(function(successful) {
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
isPushEnabled = false;
}).catch(function(e) {
// We failed to unsubscribe, this can lead to
// an unusual state, so may be best to remove
// the users data from your data store and
// inform the user that you have done so
console.log('Unsubscription error: ', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
});
}).catch(function(e) {
console.error('Error thrown while unsubscribing from push messaging.', e);
});
});
}
Mantenere aggiornato l'abbonamento
Gli abbonamenti potrebbero non essere sincronizzati tra FCM e il tuo server. Assicurati che
il tuo server analizza il corpo della risposta del POST di invio dell'API FCM, cercando
Risultati di error:NotRegistered e canonical_id, come spiegato nella documentazione di FCM.
Gli abbonamenti potrebbero inoltre non essere sincronizzati tra il service worker e il tuo
o server web. Ad esempio, dopo aver effettuato l'iscrizione o aver annullato l'iscrizione correttamente, viene visualizzato
connessione di rete potrebbe impedire l'aggiornamento del server; o un utente può
revocare l'autorizzazione alle notifiche, che attiva l'annullamento automatico dell'iscrizione. Maniglia
casi simili controllando il risultato
serviceWorkerRegistration.pushManager.getSubscription() periodicamente (ad es.
al caricamento della pagina) e sincronizzandolo con il server. Potresti inoltre voler
a riabbonarsi automaticamente se non hai più un abbonamento.
Notification.permission == "granted".
In sendSubscriptionToServer() dovrai pensare a come gestisci
richieste di rete non riuscite durante l'aggiornamento di endpoint. Una soluzione è
per monitorare lo stato di endpoint in un cookie
per stabilire se il server necessita o meno degli ultimi dettagli.
Tutti i passaggi precedenti si traducono in un'implementazione completa dei messaggi push sul sul web in Chrome 46. Ci sono ancora funzionalità specifiche che semplificheranno le cose (come un'API standard per l'attivazione di messaggi push), ma questa release ti consente inizia oggi stesso a creare messaggi push nelle tue app web.
Come eseguire il debug della tua app web
Durante l'implementazione dei messaggi push, i bug si trovano in una delle due posizioni seguenti: la tua pagina o al Service worker.
È possibile eseguire il debug dei bug nella pagina utilizzando DevTools. Eseguire il debug del service worker problemi, hai due opzioni:
- Vai a chrome://inspect > Service worker. Questa visualizzazione non fornisce molte informazioni oltre ai service worker attualmente in esecuzione.
- Vai a chrome://serviceworker-internals e da qui puoi visualizzare lo stato dei service worker e visualizzare eventuali errori. Questa pagina è in modo temporaneo finché DevTools non avrà un set di funzionalità simili.
Uno dei migliori suggerimenti che posso dare a chiunque sia nuovo all'assistenza ai lavoratori è fare uso della casella di controllo "Apri finestra DevTools e metti in pausa l'esecuzione di JavaScript all'avvio del service worker per il debug." Questa casella di controllo aggiungerà un punto di interruzione al l'inizio del service worker e mettere in pausa l'esecuzione, questo consente di riprendi o analizza lo script del service worker e verifica se hai premuto per risolvere problemi di produzione e facilità d'uso.
Se sembra esserci un problema tra FCM e l'evento push del service worker, non c'è molto che tu possa fare per eseguire il debug del problema, poiché non c'è modo per vedere se Chrome ha ricevuto qualcosa. La cosa fondamentale da verificare è che la risposta da FCM ha esito positivo quando il server effettua una chiamata API. Apparirà ad esempio:
{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}
Osserva la risposta "success": 1. Se invece vedi un errore,
indica che qualcosa non va con l'ID di registrazione FCM e il push
messaggio non viene inviato a Chrome.
Debug dei service worker su Chrome per Android
Al momento il debug dei service worker su Chrome per Android non è ovvio. Devi accedere alla pagina chrome://inspect, trovare il tuo dispositivo e cercare una elemento dell'elenco con il nome "Worker pid:...." che contiene l'URL del tuo servizio worker.
UX per le notifiche push
Il team di Chrome ha realizzato un documento di best practice per l'esperienza utente delle notifiche push, oltre a un documento che illustra dei casi limite quando si lavora con le notifiche push.
- Best practice per l'esperienza utente relativa alle autorizzazioni per le notifiche push
- Casi limite e mitigazioni delle notifiche push
Il futuro dei messaggi push su Chrome e sul web aperto
Questa sezione approfondisce alcune delle funzionalità di Chrome parti specifiche di questa implementazione di cui è necessario essere a conoscenza e come sarà diverso dalle altre implementazioni del browser.
Web Push Protocol ed endpoint
L'aspetto positivo dello standard dell'API Push è che dovresti essere in grado di endpoint, passali al server e invia il push i messaggi implementando il Web Push Protocol.
Il Web Push Protocol è un nuovo standard che i fornitori di servizi push possono implementare, in modo che gli sviluppatori non debbano preoccuparsi di chi sia il fornitore del servizio push. La è che questo evita la necessità di registrarsi per le chiavi API e di inviare come con FCM.
Chrome è stato il primo browser a implementare l'API Push e FCM non lo utilizza
supportano il Web Push Protocol, motivo per cui Chrome richiede
gcm_sender_id e devi utilizzare l'API RESTful per FCM.
L'obiettivo finale di Chrome è utilizzare il Web Push Protocol con Chrome e FCM.
Fino ad allora, devi rilevare l'endpoint "https://fcm.googleapis.com/fcm/send" e gestirli separatamente dagli altri endpoint, ovvero formattare i dati del payload in un specifico e aggiungere la chiave di autorizzazione.
Come implementare il Web Push Protocol?
Firefox Nightly al momento sta supportando il push e probabilmente sarà il primo browser. per implementare il Web Push Protocol.
Domande frequenti
Dove si trovano le specifiche?
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/
Posso evitare notifiche duplicate se la mia presenza sul web ha più origini o se ho sia una presenza sul web sia una nativa?
Al momento non è disponibile una soluzione, ma puoi seguire i progressi su Chromium.
Lo scenario ideale sarebbe quello di avere un qualche tipo di ID per il dispositivo dell'utente e poi sul lato server abbinano gli ID abbonamento dell'app nativa e dell'app web e decidi a quale inviare un messaggio push. Puoi farlo in base alle dimensioni dello schermo, di dispositivo mobile, condividendo una chiave generata tra l'app web e l'app nativa, ogni approccio ha i pro e i contro.
Perché mi serve un gcm_sender_id?
Questa operazione è necessaria per consentire a Chrome, Opera per Android e al browser Samsung Utilizzare l'API Firebase Cloud Messaging (FCM). L'obiettivo è utilizzare Web Push Protocol quando lo standard è finalizzato e FCM è in grado di supportarlo.
Perché non utilizzare web Socket o eventi inviati dal server (EventSource)?
Il vantaggio dell'utilizzo dei messaggi push è che anche se la pagina è chiusa, il service worker verrà svegliato e potrà mostrare una notifica. Web Socket e EventSource hanno la connessione chiusa alla chiusura della pagina o del browser.
Cosa devo fare se non mi serve l'invio di eventi in background?
Se non hai bisogno dell'invio in background, i web Sockets sono un'ottima opzione.
Quando posso utilizzare la funzionalità push senza mostrare le notifiche (ad esempio, la modalità push silenzioso in background)?
Non è stata ancora definita una data precisa per quando questa funzionalità sarà disponibile, ma è possibile farlo. l'intenzione di implementare la sincronizzazione in background e sebbene questo non sia deciso o specifico, si discute dell'abilitazione push silenzioso con sincronizzazione in background.
Perché è richiesto HTTPS? Come posso risolvere il problema durante lo sviluppo?
I service worker richiedono origini sicure per garantire che lo script del service worker proviene dall'origine prevista e non proviene da un approccio man in the middle un attacco. Attualmente, ciò significa utilizzare HTTPS sui siti attivi, anche se localhost a lavorare durante lo sviluppo.
Com'è il supporto dei browser?
Chrome supporta nella sua versione stabile e Mozilla ha iniziato a lavorare anche in Firefox Nightly. Per ulteriori informazioni, vedi il bug relativo all'implementazione dell'API Push. e puoi monitorare la loro implementazione delle notifiche qui.
Posso rimuovere una notifica dopo un determinato periodo di tempo?
Al momento non è possibile, ma abbiamo in programma di aggiungere un'assistenza per ottenere di notifiche attualmente visibili. Se hai un caso d'uso per impostare scadenza della notifica dopo la creazione, ci piacerebbe sapere quindi aggiungi un commento e noi provvederemo a ritrasmetterlo al team di Chrome.
Se devi solo interrompere l'invio di una notifica push all'utente dopo un determinato periodo di tempo e non è importante per quanto tempo rimane la notifica visibile, puoi utilizzare il parametro TTL (time to live) di FCM scopri di più qui.
Quali sono i limiti dei messaggi push in Chrome?
Questo post presenta alcune limitazioni:
- L'utilizzo di CCM come servizio push da parte di Chrome crea una serie di i tuoi requisiti. Stiamo lavorando insieme per vedere se alcuni di questi problemi possono essere risolti per il futuro.
- Quando ricevi un messaggio push, devi mostrare una notifica.
- Chrome su computer ha un'avvertenza: se Chrome non è in esecuzione, invia i messaggi push non verranno ricevuti. La differenza rispetto a ChromeOS e ad Android per i messaggi push sarà sempre ricevuto.
Non dovremmo usare l'APIPermissions?
La L'API Authorization è implementata in Chrome, ma non sarà necessariamente disponibile in tutti i browser. Puoi scoprire di più qui.
Perché Chrome non apre la scheda precedente quando faccio clic su una notifica?
Il problema riguarda solo le pagine non attualmente controllate da un servizio. worker. Puoi scoprire ulteriori informazioni qui.
Cosa succede se una notifica non è aggiornata nel momento in cui il dispositivo dell'utente ha ricevuto il push?
Quando ricevi un messaggio push, devi sempre mostrare una notifica. Quando vuoi inviare una notifica, ma è utile per un determinato periodo di tempo, puoi utilizzare il parametro "time_to_live" parametro su CCM in modo che FCM non invii il messaggio push se supera la data di scadenza.
Ulteriori dettagli sono disponibili qui.
Che cosa succede se invio 10 messaggi push ma voglio che il dispositivo ne riceva solo uno?
FCM ha una chiave "compress_key" parametro che puoi utilizzare per indicare a FCM di sostituire eventuali che ha lo stesso valore "close_key", con il nuovo messaggio.