Perubahan pada perilaku BFCache dengan port pesan ekstensi

Mingyu Lei

Back-forward cache (atau BFCache) adalah pengoptimalan browser yang memungkinkan navigasi mundur dan maju secara instan. Kami melakukan perubahan pada BFCache Chrome yang berpotensi memengaruhi ekstensi yang menggunakan port pesan. Jika Anda memiliki ekstensi Chrome yang menggunakan pesan untuk berkomunikasi antara skrip konten dan ekstensi Anda, lanjutkan membaca untuk mempelajari cara menguji dan menyesuaikan ekstensi Anda.

Port pesan ekstensi

Ekstensi berkomunikasi dengan skrip konten atau ekstensi lain melalui penerusan pesan. Pesan dapat dikirim menggunakan permintaan satu kali dengan memanggil runtime.sendMessage() dan tabs.sendMessage(), atau menggunakan port pesan yang dapat digunakan kembali. Selama port aktif, skrip konten dan skrip latar belakang ekstensi dapat menggunakan kembali port untuk memposting pesan satu sama lain.

Untuk informasi selengkapnya, lihat Penerusan pesan.

Back-forward cache

Saat keluar dari halaman yang memenuhi syarat untuk BFCache, browser memungkinkan halaman dengan semua statusnya tetap berada di memori, tetapi dalam status yang tidak sepenuhnya aktif. Jika pengguna melakukan navigasi histori (kembali atau maju) ke halaman yang di-cache, browser akan mencoba memulihkan halaman dari BFCache. Hal ini membuat navigasi lebih cepat dan meningkatkan pengalaman penjelajahan pengguna.

Saat berada di BFCache, halaman akan dibekukan sehingga tidak ada eksekusi JavaScript yang diizinkan. Artinya, server tidak dapat memproses pesan yang diterima.

Untuk informasi selengkapnya, lihat Cache kembali/maju.

Dampak port pesan ekstensi pada BFCache

Singkatnya, ekstensi yang mengirim pesan ke halaman di BFCache dapat menyebabkan penghapusan cache dan memengaruhi performa.

Saat halaman dengan port pesan ekstensi terbuka disimpan di BFCache, port tersebut akan tetap terbuka. Setelah halaman dipulihkan dari BFCache, referensi lama port pesan masih dapat digunakan oleh pekerja layanan ekstensi untuk memposting pesan ke skrip konten.

Namun, jika ekstensi mencoba memposting pesan melalui port pesan tersebut saat halaman masih berada di BFCache, pesan akan dikirim, tetapi tidak sepenuhnya dikirim karena pengendali dibekukan. Ekstensi akan kesulitan untuk memahami dan mengatasi situasi ini, karena antrean dan penghapusan pesan memiliki masalahnya sendiri.

Untuk menghindari masalah terkait pesan yang hilang, dalam penerapan Chrome saat ini, halaman host akan dihapus dari BFCache dan pesan akan dihapus. Jika pengguna kembali ke halaman, halaman tersebut akan dimuat ulang, sehingga ekstensi dapat menyiapkan koneksi baru.

Di sisi lain, implementasi ini membatasi skenario penerapan BFCache, sehingga membatasi peningkatan performa, terutama untuk ekstensi dengan mekanisme siaran atau heartbeat yang secara rutin mengirim pesan ke semua koneksi. Selain itu, karena pengusiran dipicu saat ekstensi mengirim pesan ke skrip konten, developer web tidak memiliki cara untuk mencegah halaman mereka diusir.

Untuk meningkatkan performa secara keseluruhan, kami berencana untuk memperkenalkan perilaku port pesan baru.

Perilaku baru: menutup saluran pesan saat halaman disimpan di BFCache

Mulai Chrome 123, saat halaman dengan port pesan ekstensi terbuka disimpan di BFCache, saluran pesan yang mendasarinya akan ditutup secara proaktif dari sisi skrip konten. Akibatnya, semua port pesan akan ditutup, dan ekstensi akan menerima peristiwa onDisconnect.

Karena channel ditutup, tidak ada pesan yang akan dikirim ke halaman saat berada di BFCache. Oleh karena itu, halaman tidak akan dihapus karena ekstensi.

Meskipun setelah halaman dipulihkan dari BFCache, saluran pesan yang ditutup tidak akan dibuka kembali. Praktik yang direkomendasikan untuk penulis ekstensi adalah memproses peristiwa siklus proses halaman, dan menyiapkan koneksi baru saat halaman dipulihkan dari BFCache, seperti yang ditunjukkan dalam contoh berikut.

// content script

let port;

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // The page is restored from BFCache, set up a new connection.
    port = chrome.runtime.connect();
  }
});

Baca selengkapnya tentang percakapan WECG dari perwakilan browser yang berbeda (di bagian masalah 474).

Apakah saya terpengaruh?

Perilaku baru ini akan tersedia di balik flag di Chrome 123 sehingga Anda dapat menguji kode. Lihat linimasa untuk mengetahui informasi selengkapnya. Gunakan langkah-langkah berikut untuk menguji ekstensi Anda. Perhatikan bahwa alat ini hanya memberikan pengujian sederhana, dan sebaiknya Anda menjalankan Chrome dengan fitur yang diaktifkan selama jangka waktu tertentu karena sulit untuk memprediksi fitur apa di ekstensi yang dapat menyebabkan masalah.

Menguji perilaku baru

Untuk mengaktifkan eksperimen secara paksa di Chrome 123:

1. Luncurkan Chrome dengan tanda berikut, yang memaksa perilaku baru:

   --enable-features=DisconnectExtensionMessagePortWhenPageEntersBFCache
   

2. Buka halaman, dan berinteraksi dengan ekstensi Anda jika perlu, sehingga skrip konten akan membuka port ke ekstensi Anda.

3. Keluar dan kembali. Halaman akan dipulihkan sekarang, tetapi saluran pesan antara skrip konten dan pekerja layanan akan terputus.

4. Uji apakah ekstensi masih berfungsi seperti biasa. Jika tidak, Anda harus terhubung kembali secara manual seperti yang ditunjukkan di bagian sebelumnya.

Mengidentifikasi masalah sederhana menggunakan perilaku lama

Sebelum perubahan ini, Chrome akan menampilkan peringatan jika Anda mencoba mengirim pesan ke port yang terkait dengan halaman di bfcache. Hal ini dapat berguna untuk mengidentifikasi beberapa, tetapi tidak semua masalah yang melibatkan pesan dari latar belakang ke halaman.

1. Pastikan versi Chrome minimal 123. Idealnya, gunakan Chrome Canary, yang memiliki peringatan tambahan untuk mempermudah pengujian.

2. Luncurkan Chrome dengan tanda berikut, yang memaksa perilaku lama:

   --disable-features=DisconnectExtensionMessagePortWhenPageEntersBFCache
   

3. Buka halaman yang memenuhi syarat untuk BFCache tanpa ekstensi yang berjalan (misalnya, beberapa situs sederhana seperti https://example.com/). Ikuti tutorial BFCache untuk memastikan bahwa data dipulihkan dari BFCache.

4. Instal dan aktifkan ekstensi, lalu uji kelayakan BFCache lagi. Anda dapat keluar secara manual, menunggu beberapa saat hingga ekstensi Anda memposting pesan ke halaman BFCached, lalu kembali.

5. Jika halaman harus dimuat ulang, bukan dari BFCache karena penghapusan, dan masalah yang mencegah pemulihan adalah "ExtensionSentMessageToCachedFrame", ekstensi mungkin akan terpengaruh oleh perubahan ini.

   Di Chrome Canary 124.0.6315.0 dan yang lebih baru, Anda juga akan melihat peringatan berikut di halaman:

   

Setelah dikonfirmasi bahwa ekstensi memposting pesan ke halaman BFCache, Anda dapat mengikuti langkah-langkah di bagian sebelumnya untuk memaksa pengaktifan eksperimen dan mengamati apakah ada logika yang rusak.

Linimasa rilis

Kami berencana untuk meningkatkan perilaku baru secara bertahap mulai Chrome 123. Berikut adalah rencana lengkapnya: