Back-forward cache notRestoreReasons API

Temukan navigasi yang diblokir agar tidak menggunakan bfcache, dan alasannya.

Chris Mills
Barry Pollard

Properti notRestoredReasons, yang ditambahkan ke class PerformanceNavigationTiming, melaporkan informasi tentang apakah frame yang ada dalam dokumen diblokir agar tidak menggunakan bfcache pada navigasi, dan alasannya. Developer dapat menggunakan informasi ini untuk mengidentifikasi halaman yang perlu diupdate agar kompatibel dengan bfcache, sehingga meningkatkan performa situs.

Status saat ini

notRestoredReasons API telah dikirim dari Chrome 123 dan sedang diluncurkan secara bertahap.

Konsep dan penggunaan

Browser modern menyediakan fitur pengoptimalan untuk navigasi histori yang disebut cache kembali/maju (bfcache). Hal ini memungkinkan pengalaman pemuatan instan saat pengguna kembali ke halaman yang telah mereka kunjungi. Halaman dapat diblokir agar tidak masuk ke bfcache atau dihapus saat berada di bfcache karena berbagai alasan, beberapa di antaranya diwajibkan oleh spesifikasi dan beberapa spesifik untuk implementasi browser.

Sebelumnya, developer tidak dapat mengetahui alasan halaman mereka diblokir agar tidak menggunakan bfcache di lapangan, meskipun ada pengujian di alat developer Chrome. Untuk mengaktifkan pemantauan di lapangan, class PerformanceNavigationTiming telah diperluas untuk menyertakan properti notRestoredReasons. Tindakan ini akan menampilkan objek yang berisi informasi terkait di frame bagian atas dan semua iframe yang ada dalam dokumen:

  • Alasan mengapa pengguna diblokir agar tidak dapat menggunakan bfcache.

  • Detail seperti frame id dan name, untuk membantu mengidentifikasi iframe di HTML.

    Hal ini memungkinkan developer mengambil tindakan untuk membuat halaman tersebut kompatibel dengan bfcache, sehingga meningkatkan performa situs.

Contoh

Instance PerformanceNavigationTiming dapat diperoleh dari fitur seperti Performance.getEntriesByType() dan PerformanceObserver.

Misalnya, Anda dapat memanggil fungsi berikut untuk menampilkan semua objek PerformanceNavigationTiming yang ada di linimasa performa dan mencatat notRestoredReasons-nya ke dalam log:

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);
  }
}

Untuk navigasi histori, properti PerformanceNavigationTiming.notRestoredReasons menampilkan objek dengan struktur berikut, yang mewakili status diblokir dari frame tingkat atas:

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

Propertinya adalah sebagai berikut:

children
Array objek yang mewakili status diblokir dari frame origin yang sama yang disematkan dalam frame level atas. Setiap objek memiliki struktur yang sama dengan objek induk — dengan cara ini, jumlah level frame tersemat apa pun dapat direpresentasikan di dalam objek secara rekursif. Jika frame tidak memiliki turunan, array akan kosong.
id
String yang mewakili nilai atribut id frame (misalnya <iframe id="foo" src="...">). Jika frame tidak memiliki id, nilainya akan menjadi null. Untuk halaman tingkat atas, ini adalah null.
name
String yang mewakili nilai atribut name frame (misalnya <iframe name="bar" src="...">). Jika frame tidak memiliki name, nilainya akan berupa string kosong. Untuk halaman tingkat atas, nilainya adalah null.
reasons
Array string yang masing-masing mewakili alasan halaman yang dinavigasi diblokir agar tidak menggunakan bfcache. Ada banyak alasan mengapa pemblokiran dapat terjadi. Lihat bagian Alasan pemblokiran untuk mengetahui detail selengkapnya.
src
String yang mewakili jalur ke sumber frame (misalnya, <iframe src="b.html">). Jika frame tidak memiliki src, nilainya akan berupa string kosong. Untuk halaman tingkat atas, ini adalah null.
url
String yang mewakili URL halaman/iframe yang dinavigasi.

Untuk objek PerformanceNavigationTiming yang tidak mewakili navigasi histori, properti notRestoredReasons akan menampilkan null.

Perhatikan bahwa notRestoredReasons juga menampilkan null jika tidak ada alasan pemblokiran, sehingga null ini bukan merupakan indikator bahwa bfcache digunakan atau tidak. Untuk melakukannya, Anda harus menggunakan properti event.persisted.

Melaporkan pemblokiran bfcache dalam frame origin yang sama

Jika halaman memiliki frame dengan origin yang sama yang disematkan, nilai notRestoredReasons yang ditampilkan akan berisi objek di dalam properti children yang mewakili status diblokir dari setiap frame tersemat.

Contoh:

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

Melaporkan pemblokiran bfcache dalam frame lintas origin

Jika halaman memiliki frame lintas-asal yang disematkan, kami membatasi jumlah informasi yang dibagikan tentang frame tersebut untuk menghindari kebocoran informasi lintas-asal. Kami hanya menyertakan informasi yang sudah diketahui halaman luar, dan apakah subtree lintas-asal memblokir bfcache atau tidak. Kami tidak menyertakan alasan pemblokiran atau informasi tentang tingkat subtree yang lebih rendah (meskipun beberapa sub-tingkat memiliki origin yang sama).

Contoh:

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

Untuk semua iframe lintas-asal, kami melaporkan null untuk nilai reasons untuk frame, dan frame tingkat atas akan menampilkan alasan "masked". Perhatikan bahwa "masked" juga dapat digunakan untuk alasan khusus agen pengguna sehingga mungkin tidak selalu menunjukkan masalah dalam iframe.

Lihat bagian Keamanan dan privasi dalam penjelasan untuk mengetahui detail selengkapnya tentang pertimbangan keamanan dan privasi.

Alasan pemblokiran

Seperti yang telah kami sampaikan sebelumnya, ada banyak alasan mengapa pemblokiran dapat terjadi:

Berikut adalah contoh beberapa alasan paling umum mengapa bfcache tidak dapat digunakan:

  • unload-listener: halaman mendaftarkan pengendali unload, yang mencegah penggunaan bfcache di browser tertentu. Lihat Penghentian penggunaan peristiwa penghapusan muatan untuk mengetahui informasi selengkapnya.
  • response-cache-control-no-store: Halaman menggunakan no-store sebagai nilai cache-control.
  • related-active-contents: Halaman dibuka dari halaman lain (baik menggunakan "tab duplikat") yang masih memiliki referensi ke halaman ini.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda dengan bfcache notRestoredReasons API.

Beri tahu kami tentang desain API

Apakah ada sesuatu terkait API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chromium? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di issue tracker kami. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan tentukan komponen sebagai UI > Browser > Navigation > BFCache. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Menampilkan dukungan untuk API

Apakah Anda berencana menggunakan bfcache notRestoredReasons API? Dukungan publik Anda membantu tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.

Kirim tweet ke @ChromiumDev menggunakan hashtag #NotRestoredReasons dan beri tahu kami tempat dan cara Anda menggunakannya.

Link bermanfaat