API notRipristinadMotivi della cache back-forward

Scopri quali navigazioni sono state bloccate dall'utilizzo della cache bf e perché.

Chris Mills
Barry Pollard

La proprietà notRestoredReasons, aggiunta alla classe PerformanceNavigationTiming, riporta informazioni su 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 bfcache, migliorando così il rendimento del sito.

Stato attuale

L'API notRestoredReasons è stata rilasciata a partire 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). In questo modo, gli utenti possono usufruire di un'esperienza di caricamento istantaneo quando tornano a una pagina già visitata. L'accesso alla bfcache può essere bloccato per le pagine o queste possono essere espulse dalla 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é le loro pagine non potevano utilizzare la bfcache sul campo, anche se era disponibile un test negli Strumenti per sviluppatori di Chrome. Per abilitare il monitoraggio sul campo, la classe PerformanceNavigationTiming è stata estesa per includere una proprietà notRestoredReasons. Viene restituito un oggetto contenente informazioni correlate sul frame superiore e su tutti gli iframe presenti nel documento:

  • Motivi per cui l'utilizzo della bfcache è stato bloccato.

  • Dettagli come frame id e name per identificare gli iframe nel codice HTML.

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

Esempi

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

Ad esempio, puoi invocare la seguente funzione per restituire tutti gli oggetti PerformanceNavigationTiming presenti nella cronologia del rendimento e registrare i relativi 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 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 bloccato di eventuali frame dello stesso dominio 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 l'inquadratura non ha elementi secondari, l'array sarà vuoto.
id
Una stringa che rappresenta il valore dell'attributo id del frame (ad es. <iframe id="foo" src="...">). Se il frame non ha id, il valore sarà null. Per la pagina di primo livello, è null.
name
Una stringa che rappresenta il valore dell'attributo name del frame (ad es. <iframe name="bar" src="...">). Se il frame non ha name, il valore sarà una stringa vuota. Per la pagina di primo livello, è null.
reasons
Un array di stringhe che rappresentano ciascuna un motivo per cui l'utilizzo della bfcache è stato bloccato per la pagina visitata. Esistono molti motivi diversi per cui potrebbe verificarsi il blocco. Per ulteriori dettagli, consulta la sezione Motivi del blocco.
src
Una stringa che rappresenta il percorso alla sorgente del frame (ad es. <iframe src="b.html">). Se il frame non ha src, il valore sarà una stringa vuota. Per la pagina di primo livello, è null.
url
Una stringa che rappresenta l'URL della pagina/dell'iframe visitata.

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

Tieni presente che notRestoredReasons restituisce anche null quando non sono presenti motivi di blocco, pertanto il valore null non indica se la cache bf è stata utilizzata o meno. A questo scopo, devi utilizzare la proprietà event.persisted.

Segnalare il blocco di bfcache nei frame della stessa origine

Quando una pagina ha frame dello stesso dominio 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"
}

Segnalare il blocco di bfcache nei frame cross-origin

Quando una pagina ha frame cross-origin incorporati, limitiamo la quantità di informazioni condivise al loro riguardo per evitare la fuga di informazioni cross-origin. Vengono incluse solo le informazioni già note alla pagina esterna e se il sottoalbero cross-origin ha bloccato o meno bfcache. Non includiamo motivi di blocco o informazioni sui livelli inferiori del sottoalbero (anche se alcuni sottolivelli sono dello stesso dominio).

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, segnaliamo null per il valore reasons del frame e il frame di primo livello mostrerà un motivo "masked". Tieni presente che "masked" può essere utilizzato anche per motivi specifici dell'agente utente, 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 della 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 non è possibile utilizzare la cache bf:

  • unload-listener: la pagina registra un gestore unload, che impedisce l'utilizzo della cache back-forward in alcuni browser. Per ulteriori informazioni, 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.

Fornisci informazioni sul design dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi il tuo parere a un problema esistente.

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalla specifica? Segnala un bug nel nostro 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. Glitch è ideale per condividere riproduzioni rapide e semplici.

Mostra 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 all'account @ChromiumDev utilizzando l'hashtag #NotRestoredReasons e facci sapere dove e come lo stai utilizzando.

Link utili