API notRipristinadMotivi della cache back-forward

Scopri quali navigazioni sono state bloccate dall'utilizzo della 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 della bfcache durante la navigazione e il motivo. Gli sviluppatori possono utilizzare queste informazioni per identificare le pagine che richiedono aggiornamenti per renderle compatibili con la bfcache, migliorando così il rendimento del sito.

Stato attuale

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

Concetti e utilizzo

I browser moderni forniscono una funzionalità di ottimizzazione per la navigazione nella 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'inserimento nella bfcache o essere rimosse mentre si trovano nella bfcache per diversi motivi, alcuni richiesti da una specifica e altri specifici delle implementazioni del browser.

In precedenza, gli sviluppatori non avevano modo di scoprire perché le loro pagine non potevano utilizzare la bfcache sul campo, anche se esisteva un test negli strumenti per sviluppatori di Chrome. Per attivare il monitoraggio nel campo, la classe PerformanceNavigationTiming è stata estesa per includere una proprietà notRestoredReasons. Restituisce un oggetto contenente informazioni correlate sul frame principale e su tutti gli iframe presenti nel documento:

Motivi per cui è stato bloccato l'utilizzo della bfcache.
Dettagli come frame id e name, per identificare gli iframe nel codice HTML.

Ciò consente agli sviluppatori di intervenire per rendere queste pagine compatibili con la bfcache, migliorando così il rendimento del sito.

Esempi

Un'istanza PerformanceNavigationTiming può essere ottenuta da funzionalità come Performance.getEntriesByType() e PerformanceObserver.

Ad esempio, puoi richiamare la seguente funzione per restituire tutti gli oggetti PerformanceNavigationTiming presenti nella sequenza temporale del rendimento e registrare il relativo 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 gli spostamenti nella 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 rappresentano lo stato di blocco di tutti i frame della stessa origine incorporati nel frame di primo livello. Ogni oggetto ha la stessa struttura dell'oggetto principale, in modo che qualsiasi numero di livelli di frame incorporati possa essere rappresentato in modo ricorsivo all'interno dell'oggetto. Se il frame non ha elementi secondari, 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, questo valore è null.
name: Una stringa che rappresenta il valore dell'attributo name del frame (ad esempio <iframe name="bar" src="...">). Se il frame non ha name, il valore sarà una stringa vuota. Per la pagina di primo livello, questo valore è null.
reasons: Un array di stringhe, ognuna delle quali rappresenta un motivo per cui la pagina visitata non ha potuto utilizzare la bfcache. Il blocco può verificarsi per diversi motivi. Per ulteriori dettagli, consulta la sezione Motivi del blocco.
src: Una stringa che rappresenta il percorso della sorgente 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, questo valore è null.
url: Una stringa che rappresenta l'URL della pagina/dell'iframe visitato.

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

Tieni presente che notRestoredReasons restituisce anche null quando non ci sono motivi di blocco, quindi il fatto che sia null non indica se la bfcache è stata utilizzata o meno. Per farlo, devi utilizzare la proprietà event.persisted.

Segnalare il blocco della bfcache nei frame same-origin

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 ogni 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"
}

Report sul blocco della bfcache nei frame multiorigine

Quando una pagina ha frame cross-origin incorporati, limitiamo la quantità di informazioni condivise per evitare la divulgazione di informazioni cross-origin. Includiamo solo le informazioni già note alla pagina esterna e se l'albero secondario multiorigine ha bloccato o meno la bfcache. Non includiamo motivi di blocco o informazioni sui livelli inferiori dell'albero secondario (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 cross-origin, viene segnalato null per il valore reasons del frame e il frame di primo livello mostrerà il motivo "masked". Tieni presente che "masked" può essere utilizzato anche per motivi specifici dell'user agent, pertanto potrebbe non indicare sempre un problema in un iframe.

Per ulteriori dettagli sulle considerazioni relative a sicurezza e privacy, consulta la sezione Sicurezza e privacy nella spiegazione.

Motivi del blocco

Come abbiamo detto in precedenza, esistono molti motivi diversi per cui potrebbe verificarsi il blocco:

Di seguito sono riportati alcuni esempi dei motivi più comuni per cui la bfcache non può essere utilizzata:

unload-listener: la pagina registra un gestore unload, che impedisce l'utilizzo della cache back-forward 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 "Duplica scheda") che contiene ancora un riferimento a questa pagina.

Feedback

Il team di Chromium vuole conoscere la tua esperienza con l'API bfcache notRestoredReasons.

Descrivi la progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà che ti servono per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza? Segnala un problema relativo alle specifiche nel repository GitHub corrispondente o aggiungi i tuoi commenti a un problema esistente.

Segnalare un problema relativo all'implementazione

Hai trovato un bug nell'implementazione di Chromium? O l'implementazione è diversa dalla specifica? Segnala un bug nel nostro strumento Issue Tracker. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e specifica il componente come UI > Browser > Navigation > BFCache.

Mostrare il supporto per l'API

Intendi utilizzare l'API bfcache notRestoredReasons? Il tuo supporto pubblico aiuta il team di Chromium 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 #NotRestoredReasons e facci sapere dove e come lo utilizzi.