Debug dei servizi in background

Kayce Basques

Sofia Emelianova

La sezione Servizi in background di Chrome DevTools è una raccolta di strumenti per le API JavaScript che consente al tuo sito web di inviare e ricevere aggiornamenti anche quando un utente non ha il tuo sito web aperto. Un servizio in background è simile a un processo in background.

La sezione Servizi in background consente di eseguire il debug dei seguenti servizi in background:

• Recupero sfondo
• Sincronizzazione in background
• Notifiche
• Caricamenti speculativi
• Messaggi push

Chrome DevTools può registrare gli eventi di recupero, sincronizzazione e notifica per tre giorni, anche quando DevTools non è aperto. In questo modo puoi assicurarti che gli eventi vengano inviati e ricevuti come previsto.

Oltre agli eventi del servizio in background, DevTools può:

• Mostrarti i report che Chrome ha già inviato o che sta per inviare utilizzando l'API di reporting.
• Consente di eseguire il debug e testare la cache back-forward con un solo clic.

Recupero dello sfondo

L'API Background Fetch consente a un service worker di scaricare in modo affidabile risorse di grandi dimensioni, come film o podcast, come servizio in background. Per registrare eventi di recupero in background per tre giorni, anche quando DevTools non è aperto:

1. Apri DevTools, ad esempio, in questa pagina demo.

2. Vai ad Applicazione > Servizi in background > Recupero in background e fai clic su Record.

   

3. Nella pagina della demo, fai clic su Archivia gli asset localmente. Questo attiva alcune attività di recupero in background. DevTools registra gli eventi nella tabella.

   

4. Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.

5. Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su Interrompi.

Sincronizzazione in background

L'API Background Sync consente a un service worker offline di inviare dati a un server dopo che ha ristabilita una connessione a internet affidabile. Per registrare eventi di sincronizzazione in background per tre giorni, anche quando DevTools non è aperto:

1. Apri DevTools, ad esempio, in questa pagina demo.

2. Vai ad Applicazione > Servizi in background > Sincronizzazione in background e fai clic su Registra.

   

3. Nella pagina demo, fai clic su Registra sincronizzazione in background per registrare il rispettivo service worker e fai clic su Consenti quando richiesto.

   La registrazione del service worker è un'attività di sincronizzazione in background. DevTools registra gli eventi nella tabella.

   

4. Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.

5. Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su Interrompi.

(Sperimentale) Mitigazioni del monitoraggio del rimbalzo

L'esperimento sulle mitigazioni del monitoraggio del rimbalzo in Chrome ti consente di identificare ed eliminare lo stato dei siti che apparentemente eseguono il monitoraggio tra siti utilizzando la tecnica di monitoraggio del rimbalzo. Puoi forzare manualmente le mitigazioni del monitoraggio e visualizzare un elenco dei siti i cui stati sono stati eliminati.

Per forzare le mitigazioni del monitoraggio:

1. Bloccare i cookie di terze parti in Chrome. Vai su > Impostazioni > Privacy e sicurezza > Cookie e altri dati dei siti > Blocca cookie di terze parti.
2. In chrome://flags, imposta l'esperimento Mitigazioni del monitoraggio del rimbalzo su Attivato con l'eliminazione.
3. Apri DevTools, ad esempio nella pagina demo, e vai ad Applicazione > Servizi in background > Mitigazioni del monitoraggio del rimbalzo.
4. Nella pagina della demo, fai clic su un link al mittente e attendi (10 secondi) che Chrome registri il rimbalzo. La scheda Problemi indica l'imminente eliminazione dello stato.
5. Fai clic su Forza esecuzione per eliminare immediatamente lo stato.

Notifiche

Dopo che un service worker ha ricevuto un messaggio push da un server, il service worker utilizza l'API Notifiche per mostrare i dati a un utente. Per registrare le notifiche per tre giorni, anche quando DevTools non è aperto:

1. Apri DevTools, ad esempio, in questa pagina demo.

2. Vai ad Applicazione > Servizi in background > Notifiche e fai clic su Registra.

   

3. Nella pagina demo, fai clic su Schedule Notification (Pianifica notifica) e Allow (Consenti) quando richiesto.

4. Attendi che venga visualizzata la notifica. DevTools registra gli eventi di notifica nella tabella.

   

5. Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.

6. Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su Interrompi.

Caricamenti speculativi

I caricamenti speculativi consentono un caricamento delle pagine quasi istantaneo in base a regole di speculazione definite da te. In questo modo il tuo sito web può precaricare e prerenderizzare le pagine più visitate.

Il precaricamento recupera una risorsa in anticipo e il prerendering va oltre ed esegue il rendering dell'intera pagina in un processo di rendering in background nascosto.

Puoi eseguire il debug dei caricamenti speculativi nella sezione Applicazione > Servizi in background > Caricamenti speculativi. Questa sezione contiene tre visualizzazioni:

• Caricamenti speculativi. Contiene lo stato speculativo della pagina corrente, dell'URL corrente, delle pagine che la pagina corrente tenta di caricare in modo speculativo e i relativi stati.
• Regole. Contiene le serie di regole nella pagina corrente nel riquadro Elementi e lo stato generale delle speculazioni.
• Speculazioni. Contiene una tabella con informazioni sui tentativi di caricamento speculativo e sui relativi stati. Se un tentativo non è riuscito, puoi fare clic sul tentativo nella tabella per visualizzare informazioni dettagliate e il motivo dell'errore.

Prova a eseguire il debug dei caricamenti speculativi in questa pagina demo:

1. Apri DevTools nella pagina e vai ad Applicazione > Servizi in background > Caricamenti speculativi. Se non riesci a visualizzare alcun caricamento speculativo avviato dalla pagina, ricaricala.

   

2. La pagina iniziale della demo esegue il prerendering di due pagine e non ne esegue il prerendering di una. Fai clic su Visualizza tutte le speculazioni.

3. In Speculazioni, seleziona la speculazione con lo stato Non riuscito per visualizzare la sezione Motivo dell'errore, con informazioni dettagliate nella parte inferiore.

   

   In questo caso, il prerendering non è riuscito perché non esiste una pagina /next3.html sul sito web.

4. Apri la sezione Regole e fai clic su Stato per visualizzare la serie di regole in basso. Se fai clic sul link Insieme di regole, si apre il riquadro Elementi dove è definita la regola di speculazione.

   

Per una procedura dettagliata più dettagliata, consulta Debug delle regole di speculazione.

Messaggi push

Per visualizzare una notifica push per un utente, un service worker deve prima utilizzare l'API Push Message per ricevere dati da un server. Quando il service worker è pronto per visualizzare la notifica, utilizza l'API Notifiche. Per registrare i messaggi push per tre giorni, anche quando DevTools non è aperto:

1. Apri DevTools, ad esempio, in questa pagina demo.

2. Vai ad Applicazione > Servizi in background > Messaggi push e fai clic su Registra.

   

3. Nella pagina demo, attiva/disattiva Abilita notifiche push, fai clic su Consenti quando richiesto, digita un messaggio e invialo. DevTools registra gli eventi di notifica push nella tabella.

   

4. Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.

5. Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su Interrompi.

API di reporting

Alcuni errori si verificano solo in produzione. Non vengono mai visualizzati a livello locale o durante lo sviluppo perché gli utenti, le reti e i dispositivi reali cambiano le regole del gioco.

Ad esempio, supponiamo che il tuo nuovo sito si basi su un software di terze parti che utilizza document.write() per caricare script critici. Nuovi utenti in tutto il mondo aprono il tuo sito, ma potrebbero avere connessioni più lente di quelle con cui hai eseguito il test. A tua insaputa, il tuo sito inizia a causare problemi perché Chrome interviene contro document.write() su reti lente. In alternativa, potresti voler tenere d'occhio le API deprecate o che verranno presto ritirate dal tuo codebase.

L'API di reporting è progettata per aiutarti a monitorare le chiamate API ritirate, le violazioni della sicurezza della pagina e altro ancora. Puoi configurare i report come descritto in Monitorare l'applicazione web con l'API di reporting.

Per visualizzare i report generati da una pagina:

1. Vai a chrome://flags/#enable-experimental-web-platform-features, imposta Funzionalità sperimentali della Web Platform su Attivate, quindi riavvia Chrome.

2. Apri DevTools e vai ad Applicazione > Servizi in background > API di reporting. Ad esempio, puoi controllare i report in questa pagina demo.

   

La scheda API di reporting è divisa in tre parti:

• La tabella Report con le seguenti informazioni su ogni report:
  • L'URL che ha causato la generazione del report
  • Tipo di violazione
  • Stato del report
  • Endpoint di destinazione
  • Generato alle timestamp
  • Corpo della segnalazione
• La sezione di anteprima del Corpo del report. Per visualizzare l'anteprima del corpo di un report, fai clic su un report nella tabella dei report.
• La sezione Endpoint con una panoramica di tutti gli endpoint configurati nell'intestazione Reporting-Endpoints.

Stato del report

La colonna Stato indica se Chrome ha inviato il report correttamente, se sta per inviarlo o se non è riuscito.

I report vengono rimossi dopo un po' di tempo, indipendentemente dal fatto che siano stati inviati o meno.