Izin persisten untuk File System Access API

Kini ada cara untuk mendapatkan akses baca dan tulis persisten ke file dan folder tanpa harus memberikan izin berulang kali. Postingan ini menjelaskan cara kerja fitur ini. Sebelum membahas detailnya, mari kita rangkum status quo dan masalah yang sedang dipecahkan.

Tantangan dengan metode saat ini

File System Access API memungkinkan developer mengakses file di hard disk lokal pengguna dengan cara membaca dan (opsional) menulis. Salah satu aplikasi populer (di antara banyak aplikasi lainnya) yang menggunakan API ini adalah Visual Studio Code (VS Code), IDE Microsoft yang berjalan langsung di browser. Saat membuka VS Code, Anda akan disambut dengan layar Selamat Datang tempat Anda dapat membuat file baru, atau membuka file atau folder yang ada.

Layar sambutan Visual Studio Code.

Jika Anda mengklik Open Folder dan memilih salah satu folder di hard disk, browser akan menanyakan apakah Anda ingin VS Code memiliki akses lihat ke folder ini.

Visual Studio Code meminta akses tampilan.

Setelah memberikan akses, Anda dapat menavigasi hierarki folder dan membuka file di editor VS Code. Jika Anda melakukan perubahan pada file mana pun, browser akan menanyakan apakah Anda ingin memberikan akses edit ke folder.

Visual Studio Code meminta akses edit.

Jika Anda mengizinkannya, ikon file di kolom URL akan berubah, dan panah bawah kecil akan ditambahkan, yang menunjukkan bahwa aplikasi memiliki izin baca dan tulis. Untuk mengubah izin, klik ikon, lalu Hapus akses, sehingga aplikasi tidak dapat lagi mengedit file.

Visual Studio Code dengan perintah ikon kolom URL.

Akses akan berlangsung hingga Anda menutup tab terakhir dari origin. Jika Anda kemudian menutup aplikasi dan membukanya lagi, VS Code seperti memungkinkan Anda melanjutkan dari tempat terakhir Anda berhenti. Saat mengklik Open Recent, VS Code akan menawarkan folder yang sebelumnya dibuka untuk dibuka kembali.

Visual Studio Code menawarkan file yang terakhir dibuka.

Namun, meskipun Anda telah memberikan izin tulis ke folder sebelumnya, kini Anda harus memberikan akses lagi. Hal ini akan sangat melelahkan. Sebelum membahas solusi, yaitu izin persisten untuk File System Access API, bagaimana VS Code berhasil mengingat folder terbaru?

Visual Studio Code meminta akses edit setelah memuat ulang.

Di File System Access API, akses ke file dan folder dikelola melalui objek FileSystemHandle: objek FileSystemFileHandle untuk file, dan objek FileSystemDirectoryHandle untuk folder (direktori). Keduanya dapat disimpan di IndexedDB, dan inilah yang dilakukan VS Code. Anda dapat melihatnya dengan membuka DevTools Chrome, di tab Application, buka bagian IndexedDB, lalu pilih tabel vscode-filehandles-store yang relevan dalam database vscode-web-db.

Chrome DevTools men-debug Visual Studio Code yang menampilkan bagian IndexedDB dengan FileSystemHandle yang disimpan.

Cara baru: apa yang berubah dan kapan

Chrome meluncurkan perilaku baru untuk memungkinkan pengguna memberikan akses permanen ke file dan folder mereka secara opsional, sehingga tidak perlu meminta izin ulang kepada pengguna secara terus-menerus. Perilaku baru ini dapat diamati mulai Chrome 122. Untuk mengujinya lebih awal, mulai dari Chrome 120, alihkan dua flag chrome://flags/#file-system-access-persistent-permission dan chrome://flags/#one-time-permission ke Enabled.

Pertama, perilaku baru ini terdiri dari perintah izin tiga arah baru yang secara opsional memungkinkan pengguna memberikan akses aplikasi ke file dan folder yang dipilih pada setiap kunjungan.

Visual Studio Code dengan perintah izin tiga arah.

Perintah tiga arah baru ini memiliki opsi berikut:

  • Izinkan kali ini: Mengizinkan aplikasi memiliki akses ke file untuk sesi saat ini. (Hal ini sesuai dengan perilaku yang ada.)
  • Izinkan pada setiap kunjungan: Mengizinkan aplikasi memiliki akses tanpa batas kecuali akses dicabut. Setelah aplikasi diberi akses persisten, file dan folder yang baru dibuka juga akan dapat diakses secara persisten.
  • Jangan izinkan: Tidak mengizinkan aplikasi memiliki akses ke file. (Hal ini sesuai dengan perilaku yang ada.)

Kedua, perilaku baru ini memerlukan bagian baru di setelan situs, yang dapat diakses pengguna melalui ikon peluncuran di samping tombol Pengeditan file.

Setelan situs Visual Studio Code dengan ikon pengeditan file.

Ikon peluncuran ini, saat diklik, akan membuka setelan Privasi dan keamanan untuk aplikasi yang dimaksud tempat pengguna melihat daftar item untuk semua file dan folder yang dapat diakses aplikasi. Akses dapat dicabut per item dengan mengklik ikon tempat sampah. Menghapus akses per item berarti aplikasi masih dapat diberi akses ke file secara umum. Untuk mencabut akses secara umum, pengguna dapat mengklik ikon di kolom URL, seperti yang dijelaskan sebelumnya.

Setelan privasi dan keamanan Chrome untuk situs vscode.dev.

Cara memicu perilaku baru

Tidak ada perubahan yang dihadapi developer pada File System Access API. Untuk memicu perilaku baru dengan izin persisten, ada tiga cara dengan prasyarat berbeda yang perlu dipenuhi:

  1. Pengguna harus telah memberikan izin ke file atau folder (atau beberapa file atau folder) selama kunjungan terakhir ke origin dan aplikasi harus menyimpan objek FileSystemHandle yang sesuai di IndexedDB. Setelah kunjungan berikutnya ke origin, aplikasi harus telah mengambil salah satu objek FileSystemHandle yang disimpan dari IndexedDB, lalu memanggil metode FileSystemHandle.requestPermission()-nya. Jika prasyarat ini terpenuhi, perintah tiga arah baru akan ditampilkan.
  2. Asal harus telah memanggil metode FileSystemHandle.requestPermission() di FileSystemHandle yang aksesnya telah diberikan sebelumnya, tetapi aksesnya telah dicabut secara otomatis karena tab dijalankan di latar belakang untuk sementara. (Pencabutan izin otomatis berfungsi berdasarkan logika yang sama seperti yang dijelaskan dalam artikel Izin satu kali di Chrome.) Jika prasyarat ini terpenuhi, perintah tiga arah baru akan ditampilkan.
  3. Pengguna harus telah menginstal aplikasi. Aplikasi yang diinstal akan otomatis mempertahankan izin setelah pengguna memberikan akses. Dalam hal ini, perintah tiga arah tidak akan ditampilkan, sebagai gantinya aplikasi akan mendapatkan perilaku baru secara default.

Dalam kasus pertama dan kedua, perintah mencantumkan semua objek FileSystemHandle yang sebelumnya dapat diakses aplikasi, bukan hanya objek yang metode requestPermission()-nya dipanggil. Sesuai dengan cara kerjanya dalam izin satu kali, jika pengguna menolak atau menutup perintah lebih dari tiga kali, perintah tersebut tidak akan lagi dipicu, dan sebagai gantinya perintah izin reguler akan ditampilkan.

Mencoba perilaku baru

Jika memiliki versi Chrome yang mendukung atau telah menetapkan flag yang diperlukan, Anda dapat menguji perilaku baru di VS Code di web. Buka folder dan berikan akses, lalu tutup tab dan buka kembali, lalu klik Buka terbaru (perhatikan bahwa pemuatan ulang langsung tidak berfungsi untuk memicu perintah, semua tab harus ditutup). Pilih folder sebelumnya dan perintah baru akan ditampilkan. Untuk kasus pengujian yang lebih sederhana, lihat demo Akses Sistem File Persisten dan lihat kode sumbernya.

Kesimpulan

Izin persisten untuk File System Access API adalah salah satu fitur yang paling banyak diminta dari API dan bug implementasi juga sangat populer, dengan banyak developer yang membintanginya. Dengan menghadirkan fitur ini ke tangan developer, dan yang terpenting, ke tangan pengguna, kesenjangan fitur penting dibandingkan dengan aplikasi khusus platform kini telah ditutup.

Ucapan terima kasih

Postingan ini ditinjau oleh Christine Hollingsworth, Austin Sullivan, dan Rachel Andrew.