Back-forward cache notRestoreReasons API

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

Chris Mills

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 diperbarui agar kompatibel dengan bfcache, sehingga meningkatkan performa situs.

Status saat ini

Langkah Status
1. Buat pesan penjelasan Selesai
2. Membuat draf awal spesifikasi Not started
3. Mengumpulkan masukan & mengulangi desain Dalam proses
4. Uji coba origin Dimulai
5. Peluncuran Not started

Mencoba notRestoredReasons API bfcache

Mulai versi 109, API notRestoredReasons bfcache tersedia sebagai uji coba origin di Chromium. Temukan informasi terbaru terkait jadwal rilis fitur ini dengan membuka halaman fitur ChromeStatus.com (lihat roadmap Chrome untuk mengetahui tanggal rilis versi).

Anda dapat mencoba notRestoredReasons API bfcache dengan mendaftar ke uji coba origin dan menggunakannya dalam eksperimen. Lihat bagian Mengikuti uji coba origin untuk mendapatkan petunjuk cara menggunakan token setelah Anda terdaftar.

Konsep dan penggunaan

Browser modern menyediakan fitur pengoptimalan untuk navigasi histori yang disebut back/forward cache (bfcache). Hal ini memungkinkan pengalaman pemuatan instan saat pengguna kembali ke halaman yang telah mereka kunjungi. Halaman dapat diblokir agar tidak dimasukkan ke dalam bfcache atau dikeluarkan saat berada dalam bfcache karena berbagai alasan. Beberapa halaman diwajibkan oleh spesifikasi dan beberapa halaman khusus untuk penerapan browser.

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

  • Detail seperti frame id dan name, untuk membantu mengidentifikasinya dalam HTML.
  • Apakah mereka diblokir agar tidak menggunakan bfcache.

  • Alasan mengapa file diblokir agar tidak menggunakan bfcache.

    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 saat ini ada di linimasa performa dan mencatat notRestoredReasons objek tersebut:

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:

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

Properti tersebut adalah sebagai berikut:

blocked
Nilai boolean yang menentukan apakah halaman yang dibuka diblokir agar tidak menggunakan bfcache (true) atau tidak (false).
children
Array objek yang mewakili status diblokir dari setiap frame yang disematkan dalam frame tingkat atas. Setiap objek memiliki struktur yang sama dengan objek induk — dengan demikian, sejumlah level frame tersemat 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 berupa string kosong.
name
String yang mewakili nilai atribut name frame (misalnya <iframe name="bar" src="...">). Jika frame tidak memiliki name, nilainya akan berupa string kosong.
reasons
Array string yang masing-masing mewakili alasan halaman yang dibuka diblokir agar tidak menggunakan bfcache. Ada banyak alasan mengapa pemblokiran dapat terjadi. Lihat bagian Alasan pemblokiran di bawah untuk 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.
url
String yang mewakili URL halaman yang dibuka.

Untuk objek PerformanceNavigationTiming yang tidak merepresentasikan navigasi histori, properti notRestoredReasons akan menampilkan null. Hal ini berguna untuk menentukan apakah bfcache tidak relevan dengan navigasi tertentu, dibandingkan dengan notRestoredReasons yang tidak didukung dalam hal ini akan menampilkan undefined.

Melaporkan pemblokiran bfcache di frame origin yang sama

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

Contoh:

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

Melaporkan pemblokiran bfcache di frame lintas origin

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

Contoh:

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

Jika beberapa frame lintas origin memiliki alasan pemblokiran, kami secara acak memilih satu iframe lintas origin dan melaporkan apakah tindakan tersebut memblokir bfcache atau tidak. Untuk frame lainnya, kami melaporkan null untuk nilai blocked. Langkah ini dimaksudkan untuk menghentikan pihak tidak bertanggung jawab agar tidak menyimpulkan informasi tentang status pengguna di situs yang tidak mereka kontrol dengan menyematkan beberapa frame pihak ketiga ke dalam halaman, lalu membandingkan informasi pemblokiran dari setiap frame.

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

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

Alasan pemblokiran

Seperti yang kami katakan sebelumnya, ada berbagai alasan terjadinya pemblokiran. Kami telah menyusun spreadsheet praktis yang menunjukkan semua string alasan dan menjelaskan artinya.

Ada beberapa kategori alasan utama yang layak untuk disebutkan:

  • Circumstantial: Hal ini mengacu pada alasan pemblokiran yang tidak terkait langsung dengan kode halaman developer. Misalnya, komponen terkait mengalami error, terjadi error pada proses pemuatan, halaman berada dalam status sementara yang tidak dapat di-cache, bfcache dinonaktifkan karena memori tidak cukup, atau pekerja layanan melakukan sesuatu pada halaman yang mendiskualifikasinya agar tidak di-cache.
  • Extensions: Ada beberapa alasan untuk pesan yang terkait dengan ekstensi. Biasanya kami menggabungkan beberapa alasan berbeda menjadi alasan "Ekstensi". Kami sengaja memberi kejelasan tentang alasan pemblokiran terkait ekstensi karena kami tidak ingin memberikan terlalu banyak informasi tentang ekstensi apa yang telah diinstal pengguna, ekstensi mana yang aktif di halaman, apa yang mereka lakukan, dll.
  • PageSupportNeeded: Kode developer menggunakan fitur platform web yang bukan merupakan pemblokiran bfcache, tetapi saat ini dalam status memblokir bfcache. Misalnya, halaman saat ini memiliki BroadcastChannel dengan pemroses terdaftar, atau koneksi IndexedDB terbuka. Atau, halaman telah mendaftarkan pengendali unload, yang saat ini mencegah bfcache digunakan di beberapa browser.
  • SupportPending: Kode developer menggunakan fitur platform web yang mendiskualifikasi halaman dari bfcache, misalnya Web Serial API, Web Authentication API, File System Access API, atau Media Session API. Atau, halaman menggunakan Cache-Control: no-store, yang saat ini mencegah bfcache digunakan di beberapa browser. Kategori ini juga digunakan untuk melaporkan keberadaan alat di luar halaman itu sendiri yang memblokir bfcache, seperti pembaca layar atau pengelola sandi Chrome.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda menggunakan bfcache notRestoredReasons API.

Beri tahu kami tentang desain API

Apakah ada sesuatu pada API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda? Punya pertanyaan atau komentar tentang model keamanan? Laporkan masalah spesifikasi di [repo GitHub][masukan] yang sesuai, atau tambahkan pendapat Anda ke masalah yang sudah ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chromium? Atau apakah implementasinya berbeda dari spesifikasi? Laporkan bug di new.crbug.com. Pastikan Anda menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan tentukan komponen sebagai UI > Browser > Navigation > bfcache. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah.

Menunjukkan 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 serta beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat