 Halo, aku Rakinah dari team Backward Cache di Google Chrome. Di video ini, aku akan mengenalkan kalian dengan Backward Cache, fitur baru di Google Chrome yang bisa membuat navigasi Back Forward jadi instant. Dan aku akan bahas semua dalam bahasa Indonesia dan sedikit bahasa jaksal. Pertama-tama, apa sih Backward Cache itu? Backward Cache atau singkannya BF Cache adalah fitur yang membuat Chrome bisa menyimpan halaman web setelah kita pergi dari halaman tersebut. Jadi, pas kita balik ke halaman tersebut, Chrome bisa langsung menambilkan halaman yang disimpan. Tidak perlu request dan log ulang halamannya. Biar lebih jelas, mari kita lihat demo berikut ini. Di demo ini, kita membandingkan performa navigasi Back Forward dengan dan tanpa BF Cache. Kita bisa lihat, kembali ke halaman yang disimpan di BF Cache, jauh lebih cepat dibandingkan kembali ke halaman yang tidak disimpan di BF Cache. Kalau kita navigasi maju, kita bisa lihat perbedaan serupa. Nah, kenapa BF Cache bisa cepat banget? Biasanya, ketika kita navigasi ke sebuah halaman, Chrome harus request HTML dan subresources dari page tersebut. Terus parse, bangun DOM, dan seterusnya sampai halamannya berhasil di render. Ini lumayan lambat. Dengan BF Cache, halaman web disimpan secara utuh bersama dengan DOM, state script-nya, dan lain-lain. Chrome nggak perlu membangun ulang halamannya ketika kita balik. Ketika kita pergi dari sebuah halaman, kalau halamannya menuhi syarat masuk BF Cache, Chrome bisa membukukan halaman tersebut untuk disimpan di BF Cache. Ketika kita kembali ke halaman tersebut, Chrome tinggal ambil halamannya dari BF Cache. Aktifin ulang, terus tampilin deh. Ini diagram yang lebih detail. Kita pergi dari halaman, bekukan, simpan, aktifkan, lalu tampilkan ulang. Kalau sebuah halaman tidak memenuhi syarat masuk BF Cache di awal atau di tengah tengah, Chrome makan keluarin dia dari BF Cache. Kalau kita navigasi balik, Chrome harus mulai dari nol dan bangun ulang halamannya. Setelah ini, aku bakal jelasin apa sih maksud dari membukukan, memenuhi syarat, dan keluarin dari BF Cache. Kita harus membukukan halaman di BF Cache supaya halamannya tidak rusak atau merusak halaman lain selama dia di BF Cache. Menjamin halaman yang disimpan tidak rusak lumayan simpel. Ketika sebuah halaman masuk BF Cache, kita akan membukukan javascript task queue dari halaman tersebut, yang berarti halaman tersebut tidak bisa menjalankan script selama dia masih beku. Jadi, halamannya bakal tetap di state yang sama saat kita tinggalkan, sampai ketika kita balik dan mengatifkan ulang halamannya. Baru setelah itu dia jalan seperti biasa lagi. Nah, lanjut ke masalah kedua yang agak lebih ribet. Mungkin kamu bingung, gimana caranya halaman di BF Cache bisa merusak halaman lain? Kan dia nggak aktif setahu dibekukan. Ada beberapa cara. Contohnya, kalau kita membukukan task yang merupakan bagian dari transaksi index db, ini bisa berpengaruh ke halaman lain yang punya akses ke index db. Halaman lain juga bisa tahu kalau halaman di BF Cache masih hidup. Jangan mungkin bakal bingung. Contohnya dengan window.opener atau ketika service worker menquery list klientnya dengan clients.claim. Kurang lebih, kita mau halaman yang simpan di BF Cache itu sakan-akan sudah dibuang dan nggak ada lagi dari sudut pandang halaman-halaman lain. Sama seperti kalau BF Cache nggak ada. Ketika Chrome mendeteksi kemungkinan halaman lain akan rusak, atau akan sadar kalau halaman di BF Cache masih ada, Chrome akan keluarin halaman itu dari BF Cache. Atau malah nggak masukin halaman tersebut ke BF Cache dari awal. Oke, kurang lebih gitu cara kerjanya. Keren kan? Nah, asal tahu aja sebenarnya BF Cache itu nggak baru. Browser-browser lain sudah punya BF Cache dari bertahun-tahun lalu. Tapi di Chrome baru shape di tahun 2020. Ada beberapa hal yang menyebabkan Chrome lumayan butuh waktu lama. Seperti perbedaan architektur yang lumayan mendilek kami dan tentunya kami memenjamin menyimpan halaman di BF Cache nggak membahani memory. Kami juga mau berhati-hati karena menyimpan halaman di BF Cache bisa membuat masalah privasi. Contohnya, kita nggak mau geolocation API terus mengirimkan update lokasi ke halaman yang sudah di BF Cache. Sekarang, seluruh major browser sudah mensupport BF Cache. Jadi, ini saatnya kamu optimize web page kamu untuk BF Cache. Nah, berikut langkah-langkah yang bisa kamu lakukan sebagai web developer untuk menjamin web page kamu bekerja dengan baik dengan BF Cache. Jangan pakai Unload, pakai Page Hide dan Page Show dan pastikan halaman kamu bisa masuk BF Cache. Setelah ini, kita akan bahas lebih detail step-step-nya. Pertama-tama, jangan pakai Unload Event. Kenapa? Karena ketika halaman kamu masuk BF Cache, browser tidak akan mengirim Unload Event. Karena halamannya tidak Unload dan dibuang seperti biasanya. Browser akan tetap mengirim Page Hide dan Visibility Change Events dan sebaiknya kamu pakai event-event itu saja. Unload juga lumayan unreliable di kasus-kasus lain di berbagai browser seperti ketika kamu menutup tab. Bahkan menambah Unload Listener bisa membuat halaman kamu tidak memenuhi syarat BF Cache di Firefox. Terus, sekarang sedang ada diskusi antar-browser untuk mendeprecate Unload. Jadi, kami sangat merekomendasikan kamu untuk tidak memakai Unload dan migrasi penggunaan Unload sekarang ke Page Hide atau Visibility Change. Sekarang, kita akan bahas sedikit tentang Page Hide dan Visio. Ketika kita pergi dari sebuah halaman, browser akan mengirim Event Page Hide. Kamu bisa cek apakah halaman itu mungkin masuk BF Cache dengan nge-check Attribute Persisted. Kalau nilainya True, berarti halaman itu mungkin masuk BF Cache. Kalau nilainya False, halaman itu pasti tidak akan masuk BF Cache. Ini merupakan saat terakhir dimana kamu bisa mengupdate halamannya. Sebelum browser akan melakukan pengecekan syarat BF Cache. Seperti yang dibahas sebelumnya, browser tidak akan menyimpan halaman BF Cache di beberapa kasus. Kamu bisa tear down penggunaan API-API dari dalam Page Hide Handler. Terus, ketika halaman berhasil di restore dari BF Cache, browser akan mengirim Page Show Event dengan nilai Persisted True. Berbeda dari Page Hide, kalau nilai Persistednya True, kamu bisa yakin halaman ini benar-benar di restore dari BF Cache. Kalau nilainya False, pasti halaman ini tidak muncul dari BF Cache. Dari dalam Page Show Handler, kamu bisa restore API-API yang tadinya kamu tear down dari dalam Page Hide Handler. Point penting disini, kalau kamu letrak Page Load Matrix, misalnya untuk menghitung views, penggunaan Page Show sangat penting, agar kamu bisa menghitung Page Load yang di-serve dari BF Cache. Nah, gimana caranya memastikan halaman kamu memenuhi syarat masuk BF Cache? Kami tidak mempublish list API apa saja, sih yang bisa mempengaruhi syarat BF Cache. Pertama, karena syarat BF Cache berbeda di tiap browser. Kedua, di masa depan kami mungkin mensupport API yang sekarang tidak di-support, jadi listnya bakal ganti terus. Tapi, kami sedang mendevelop tambahan untuk DevTools yang bisa membantu kamu ngetes apakah halaman kamu memenuhi syarat BF Cache atau enggak, dan merekomendasikan langkah-langkah untuk membuat halaman kamu memenuhi syarat. Masih coming soon? Jadi tunggu ya. Terakhir, kalau kamu merasa web page kamu sebaiknya tidak disimpan di BF Cache, misalnya karena privasi, kita belum punya cara yang standardize untuk makukan ini. Kamu bisa sharing use case kamu di isu yang di-link di description. Sedikit motivasi, ini status BF Cache saat ini. Di Android, lebih dari 25% history navigations menggunakan halaman yang disimpan di BF Cache. Masih banyak navigasi yang bisa kita capture, dan tentunya kamu bisa bantu kita naikkan langkah tersebut. Sekarang, apa yang kami rencana kan di masa depan untuk BF Cache di Chrome? Kami berencana untuk mengimprove BF Cache Restorate dengan mensupport lebih banyak web APIs supaya kita bisa menyimpan halaman yang memakai API tersebut di BF Cache. Lalu, karena sekarang BF Cache di Chrome baru disyapai di Android, kami berencana untuk menambah support untuk desktop. Terakhir, kami mendorong standardisasi BF Cache antar browser supaya seluruh web expose behavior yang berhubungan dengan BF Cache seperti page show sama di seluruh browser biar para web developer gak bingung. Untuk detail lebih lengkap, kamu bisa baca web.dev.bfcache. Oke, kurang lebih sekian dari aku. Terima kasih sudah menonton. Sampai jumpa lain waktu.