API notRipristinadMotivi della cache back-forward

Scopri per quali navigazioni è stato impedito l'utilizzo di bfcache e perché.

Chris Mills
Barry Pollard

La proprietà notRestoredReasons, aggiunta alla classe PerformanceNavigationTiming, segnala se i frame presenti nel documento sono stati bloccati dall'utilizzo di bfcache durante la navigazione e perché. Gli sviluppatori possono usare queste informazioni per identificare le pagine che necessitano di aggiornamenti per renderle compatibili con bfcache, migliorando così le prestazioni del sito.

Stato attuale

L'API notRestoredReasons è stata spedita da Chrome 123 e verrà implementata gradualmente.

Concetti e utilizzo

I browser moderni offrono una funzionalità di ottimizzazione per la navigazione della cronologia chiamata cache back/forward (bfcache). Ciò consente un'esperienza di caricamento istantaneo quando gli utenti tornano a una pagina che hanno già visitato. Le pagine possono essere bloccate dall'ingresso nella cache bfcache o essere rimosse mentre si trovano nella cache bfcache per diversi motivi, alcuni richiesti da una specifica e altri specifici per le implementazioni del browser.

In precedenza, gli sviluppatori non avevano modo di scoprire perché alle loro pagine fosse impedito l'utilizzo di bfcache sul campo, nonostante fosse presente un test negli strumenti per sviluppatori di Chrome. Per abilitare il monitoraggio sul campo, la classe PerformanceNavigationTiming è stata estesa per includere una proprietà notRestoredReasons. Questo restituisce un oggetto contenente le informazioni correlate nel frame superiore e tutti gli iframe presenti nel documento:

  • I motivi per cui è stato bloccato l'utilizzo di bfcache.

  • Dettagli come i frame id e name, per facilitare l'identificazione degli iframe nel codice HTML.

    In questo modo gli sviluppatori possono intervenire per rendere le pagine compatibili con bfcache, migliorando così le prestazioni del sito.

Esempi

Puoi ottenere un'istanza PerformanceNavigationTiming da funzionalità come Performance.getEntriesByType() e PerformanceObserver.

Ad esempio, potresti richiamare la funzione seguente per restituire tutti gli oggetti PerformanceNavigationTiming presenti nella sequenza temporale delle prestazioni e registrarne i notRestoredReasons:

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

Per le navigazioni della cronologia, la proprietà PerformanceNavigationTiming.notRestoredReasons restituisce un oggetto con la seguente struttura, che rappresenta lo stato bloccato del frame di primo livello:

{
  children: [],
  id: null,
  name: null,
  reasons: [
    {"reason", "unload-listener"}
  ],
  src: null,
  url: "https://www.example.com/page/"
}

Le proprietà sono le seguenti:

children
Un array di oggetti che rappresenta lo stato bloccato di qualsiasi frame della stessa origine incorporati nel frame di primo livello. Ogni oggetto ha la stessa struttura dell'oggetto principale: in questo modo, all'interno dell'oggetto è possibile rappresentare in modo ricorsivo qualsiasi numero di livelli di frame incorporati. Se il frame non ha elementi figlio, l'array sarà vuoto.
id
Una stringa che rappresenta il valore dell'attributo id del frame (ad esempio <iframe id="foo" src="...">). Se il frame non ha id, il valore sarà null. Per la pagina di primo livello, il valore è null.
name
Una stringa che rappresenta il valore dell'attributo name del frame (ad esempio <iframe name="bar" src="...">). Se nel frame non è presente alcun valore name, il valore sarà una stringa vuota. Per la pagina di primo livello, il valore è null.
reasons
Un array di stringhe che rappresentano ciascuna un motivo per cui alla pagina navigata è stato impedito l'utilizzo di bfcache. Il blocco potrebbe essere dovuto a diversi motivi. Per ulteriori dettagli, consulta la sezione Motivi del blocco.
src
Una stringa che rappresenta il percorso all'origine del frame (ad esempio <iframe src="b.html">). Se il frame non ha src, il valore sarà una stringa vuota. Per la pagina di primo livello, il valore è null.
url
Una stringa che rappresenta l'URL della pagina o dell'iframe navigato.

Per gli oggetti PerformanceNavigationTiming che non rappresentano le navigazioni della cronologia, la proprietà notRestoredReasons restituirà null.

Tieni presente che notRestoredReasons restituisce null anche quando non ci sono motivi di blocco, pertanto questo valore su null non indica che bfcache è stata o non è stata utilizzata. Per questo motivo, devi utilizzare la proprietà event.persisted.

Segnala il blocco bfcache nei frame della stessa origine

Quando una pagina ha frame della stessa origine incorporati, il valore notRestoredReasons restituito conterrà un oggetto all'interno della proprietà children che rappresenta lo stato bloccato di ciascun frame incorporato.

Ad esempio:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        {"reason": "unload-listener"}
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

Segnala il blocco bfcache nei frame multiorigine

Quando una pagina ha frame multiorigine incorporati, limitiamo la quantità di informazioni condivise su questa pagina per evitare la divulgazione di informazioni multiorigine. Vengono incluse solo le informazioni già note alla pagina esterna e se il sottoalbero multiorigine ha bloccato bfcache o meno. Non includiamo alcun motivo di blocco o informazioni sui livelli inferiori del sottoalbero (anche se alcuni sottolivelli hanno la stessa origine).

Ad esempio:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example2.com/"
    }
  ],
  id: null,
  name: null,
  reasons: [
        {"reason": "masked"}
  ],
  src: null,
  url:"https://www.example.com"
}

Per tutti gli iframe multiorigine, segnaliamo null per il valore reasons relativo al frame e il frame di primo livello mostrerà un motivo di "masked". Tieni presente che "masked" può essere utilizzato anche per motivi specifici dello user agent, pertanto potrebbe non sempre indicare un problema in un iframe.

Per ulteriori dettagli in merito alle considerazioni sulla sicurezza e sulla privacy, consulta la sezione Sicurezza e privacy nell'annuncio esplicativo.

Motivi del blocco

Come detto in precedenza, il blocco potrebbe essere dovuto a diversi motivi:

Di seguito sono riportati alcuni esempi dei motivi più comuni per cui non è possibile utilizzare bfcache:

  • unload-listener: la pagina registra un gestore unload, che impedisce l'utilizzo di bfcache in alcuni browser. Per saperne di più, consulta Ritiro dell'evento unload.
  • response-cache-control-no-store: la pagina utilizza no-store come valore cache-control.
  • related-active-contents: la pagina è stata aperta da un'altra pagina (utilizzando la "scheda duplicata") che contiene ancora un riferimento a questa pagina.

Feedback

Il team di Chromium vuole saperne di più sulla tua esperienza con l'API bfcache notRestoredReasons.

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 sul repository GitHub corrispondente o aggiungi le tue opinioni a un problema esistente.

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug sul nostro Issue Tracker. Includi il maggior numero di dettagli possibile e semplici istruzioni per la riproduzione e specifica UI > Browser > Navigation > BFCache come componente. Glitch è la soluzione perfetta per condividere riproduzioni in modo facile e veloce.

Mostra il supporto per l'API

Intendi utilizzare l'API bfcache notRestoredReasons? Il supporto pubblico aiuta il team di Chromium a dare priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle.

Invia un tweet a @ChromiumDev utilizzando l'hashtag #NotRestoredReasons e facci sapere dove e come lo utilizzi.

Link utili