API notRipristinadMotivi della cache back-forward

Scopri quali navigazioni sono state bloccate dall'utilizzo della cache back-forward e perché.

Chris Mills

La proprietà notRestoredReasons, aggiunta alla classe PerformanceNavigationTiming, indica le informazioni che indicano se ai frame presenti nel documento è stato impedito l'utilizzo della bfcache durante la navigazione e perché. Gli sviluppatori possono usare queste informazioni per identificare le pagine che necessitano di aggiornamenti per renderle compatibili con la cache back-forward, migliorando così le prestazioni del sito.

Stato attuale

Passaggio Stato
1. Crea messaggio esplicativo Completato
2. Crea una bozza iniziale della specifica Not started
3. Raccogli feedback e ottimizza il design In corso
4. Prova dell'origine Iniziata
5. Lancio Not started

Prova l'API bfcache notRestoredReasons

A partire dalla versione 109, l'API bfcache notRestoredReasons è disponibile come prova dell'origine in Chromium. Puoi trovare informazioni aggiornate sulla pianificazione delle release di questa funzionalità visitando la relativa pagina delle funzionalità di ChromeStatus.com (vedi la roadmap di Chrome per conoscere le date di rilascio della versione).

Puoi provare l'API bfcache notRestoredReasons registrandoti per la prova dell'origine e utilizzandola nei tuoi esperimenti. Consulta Partecipare a una prova dell'origine per istruzioni su come utilizzare il token dopo la registrazione.

Concetti e utilizzo

I browser moderni offrono una funzionalità di ottimizzazione per la navigazione nella cronologia chiamata cache back/forward (bfcache). In questo modo viene attivata un'esperienza di caricamento istantaneo quando gli utenti tornano a una pagina che hanno già visitato. È possibile che le pagine non entrino nella cache back-forward o vengano rimosse dalla cache 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 veniva impedito di utilizzare la cache back-forward sul campo, anche se veniva eseguito un test negli strumenti di sviluppo di Chrome. Per abilitare il monitoraggio sul campo, la classe PerformanceNavigationTiming è stata estesa per includere una proprietà notRestoredReasons. Questo restituisce un oggetto contenente informazioni correlate su tutti i frame presenti nel documento:

  • Dettagli come i frame id e name per identificarli più facilmente nel codice HTML.
  • Se è stato bloccato l'utilizzo della cache back-forward.

  • Motivi per cui è stato impedito l'utilizzo della cache back-forward.

    Ciò consente agli sviluppatori di intervenire per rendere le pagine compatibili con la cache back-forward, migliorando così le prestazioni del sito.

Esempi

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

Ad esempio, puoi richiamare la funzione seguente per restituire tutti gli oggetti PerformanceNavigationTiming attualmente presenti nella sequenza temporale delle prestazioni 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:

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

Le proprietà sono le seguenti:

blocked
Un valore booleano che specifica se alla pagina esplorata è bloccato o meno l'utilizzo della cache bfcache (true) (false).
children
Un array di oggetti che rappresenta lo stato bloccato di tutti i frame incorporati nel frame di primo livello. Ogni oggetto ha la stessa struttura dell'oggetto padre: in questo modo, è possibile rappresentare in modo ricorsivo qualsiasi numero di livelli di frame incorporati 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à una stringa vuota.
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.
reasons
Un array di stringhe, ognuna delle quali rappresenta un motivo per cui è stato impedito l'utilizzo della cache back-forward nella pagina navigata. Esistono diversi motivi per cui questo potrebbe essere bloccato. Per ulteriori dettagli, consulta la sezione Motivi del blocco di seguito.
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.
url
Una stringa che rappresenta l'URL della pagina navigata.

Per gli oggetti PerformanceNavigationTiming che non rappresentano navigazioni dalla cronologia, la proprietà notRestoredReasons restituirà null. Questo è utile per determinare se bfcache non è pertinente per una determinata navigazione, al contrario del fatto che notRestoredReasons non viene supportato, nel qual caso restituirà undefined.

Blocco della cache bfcache nei frame della stessa origine

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

Ad esempio:

{
  blocked: false,
  children: [
    { url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
    { url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Blocco della cache bfcache nei frame multiorigine

Quando in una pagina sono incorporati frame multiorigine, limitiamo la quantità di informazioni condivise su di essi per evitare la fuga di informazioni multiorigine. Vengono incluse solo le informazioni che la pagina esterna già conosce e se il sottoalbero multiorigine ha bloccato o meno la cache back-forward. Non vengono inclusi motivi di blocco o informazioni sui livelli inferiori del sottoalbero (anche se alcuni livelli secondari hanno la stessa origine).

Ad esempio:

{
  blocked: false,
  children: [
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
    /* cross-origin frame */
    { url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Se più frame multiorigine hanno motivi di blocco, selezioniamo in modo casuale un iframe multiorigine e segnaliamo se ha bloccato la cache back-forward o meno. Per gli altri frame, segnaliamo null per il valore blocked. Questo serve a impedire ai malintenzionati di dedurre informazioni sullo stato degli utenti su siti che non controllano, incorporando più frame di terze parti in una pagina e poi confrontando le informazioni sul blocco di ciascuno.

{
  blocked: false,
  children: [
    /* cross-origin frames */
    {url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
    {url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
    {url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
  ]
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Per ulteriori dettagli sulle considerazioni relative a sicurezza e privacy, consulta la sezione Sicurezza e privacy nel messaggio esplicativo.

Motivi del blocco

Come detto in precedenza, i motivi per cui il blocco potrebbe essere attivato sono molti. Abbiamo compilato un pratico foglio di lavoro in cui sono riportate tutte le stringhe dei motivi e il loro significato.

Ci sono alcune categorie principali di motivo che vale la pena sottolineare:

  • Circumstantial: si riferisce a motivi di blocco non direttamente correlati al codice della pagina dello sviluppatore. Ad esempio, un componente correlato ha subito un arresto anomalo, si è verificato un problema durante il processo di caricamento, la pagina è in uno stato temporaneo che non può essere memorizzato nella cache, bfcache è stata disattivata a causa di memoria insufficiente oppure un service worker ha eseguito un'azione alla pagina impedendone la memorizzazione nella cache.
  • Extensions: i messaggi relativi alle estensioni sono vari. In genere, in "Estensioni" combiniamo diversi motivi. Siamo volutamente poco chiari riguardo ai motivi di blocco correlati alle estensioni, perché non vogliamo rivelare troppe informazioni sulle estensioni installate dall'utente, quali sono attive sulla pagina, cosa sta facendo e così via.
  • PageSupportNeeded: il codice dello sviluppatore utilizza una funzionalità della piattaforma web che altrimenti non prevede il blocco bfcache, ma attualmente il codice si trova in uno stato che prevede il blocco di bfcache. Ad esempio, la pagina attualmente ha un BroadcastChannel con listener registrati o una connessione IndexedDB aperta. In alternativa, nella pagina è stato registrato un gestore unload, che attualmente impedisce l'utilizzo della cache back-forward in alcuni browser.
  • SupportPending: il codice dello sviluppatore utilizza una funzionalità della piattaforma web che rende la pagina non più idonea alla cache, ad esempio l'API Web Serial, l'API Web Authentication, l'API File System Access o l'API Media Session. In alternativa, la pagina utilizza Cache-Control: no-store, che al momento impedisce l'utilizzo della cache back-forward in alcuni browser. Questa categoria viene utilizzata anche per segnalare la presenza di uno strumento all'esterno della pagina stessa che blocca la cache back-forward, ad esempio uno screen reader o il gestore delle password di Chrome.

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à di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Segnala un problema relativo alle specifiche nel [feedback] corrispondente oppure aggiungi le tue opinioni su un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e specifica il componente come UI > Browser > Navigation > bfcache. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra il supporto dell'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 è fondamentale supportarle.

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

Link utili