Mengizinkan aplikasi web terinstal menjadi pengendali file

Mendaftarkan aplikasi sebagai pengendali file dengan sistem operasi.

Thomas Steiner

Setelah aplikasi web mampu membaca dan menulis file, proses logis berikutnya adalah mengizinkan developer mendeklarasikan aplikasi web ini sebagai handler file untuk file yang dapat digunakan aplikasi mereka buat dan proses. File Handling API memungkinkan Anda melakukan hal ini. Setelah mendaftarkan SMS aplikasi editor sebagai pengendali file dan setelah menginstalnya, Anda dapat mengklik kanan file .txt di macOS dan pilih "Dapatkan Info" kemudian menginstruksikan OS agar selalu membuka file .txt dengan aplikasi ini sebagai secara default.

Kasus penggunaan yang disarankan untuk File Handling API

Contoh situs yang dapat menggunakan API ini antara lain:

• Aplikasi kantor seperti editor teks, aplikasi spreadsheet, dan pembuat slideshow.
• Alat gambar dan editor grafis.
• Alat editor level game video.

Cara menggunakan File Handling API

{i>Progressive enhancement <i}

File Handling API tidak dapat di-polyfill. Fungsi membuka file dengan web aplikasi, namun, dapat dicapai melalui dua cara lain:

• Web Share Target API memungkinkan developer menentukan aplikasi mereka sebagai target berbagi sehingga file dapat dibuka dari {i>share sheet<i} sistem operasi.
• File System Access API dapat diintegrasikan dengan tarik lalu lepas file, jadi pengembang dapat menangani file yang dilepas di aplikasi yang sudah dibuka.

Dukungan browser

Dukungan Browser

• 102
• 102
• x
• x

Sumber

Deteksi fitur

Untuk memeriksa apakah File Handling API didukung, gunakan:

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

Catatan: Penanganan File saat ini terbatas pada sistem operasi desktop.

Bagian deklaratif dari File Handling API

Sebagai langkah pertama, aplikasi web perlu mendeskripsikan secara deklaratif dalam manifes aplikasi web jenis file apa yang dapat mereka tangani. File Handling API memperluas manifes aplikasi web dengan yang disebut "file_handlers" yang menerima array pengendali file. Pengendali file adalah objek dengan properti berikut:

• Properti "action" yang mengarah ke URL dalam cakupan aplikasi sebagai nilainya.
• Properti "accept" dengan objek berjenis MIME sebagai kunci dan daftar ekstensi file sebagai masing-masing.
• Properti "icons" dengan array ImageResource ikon. Beberapa sistem operasi memungkinkan asosiasi jenis file untuk menampilkan ikon yang tidak hanya ikon aplikasi yang terkait, melainkan ikon khusus yang terkait dengan penggunaan jenis file tersebut dengan aplikasi.
• Properti "launch_type" yang menentukan apakah beberapa file harus dibuka dalam satu waktu klien atau dalam beberapa klien. Defaultnya adalah "single-client". Jika pengguna membuka beberapa file dan jika pengendali file telah dianotasi dengan "multiple-clients" sebagai "launch_type"-nya, lebih dari satu peluncuran aplikasi akan terjadi, dan untuk setiap peluncuran, Array LaunchParams.files (lihat lebih jauh ke bawah) hanya akan memiliki satu elemen.

Contoh di bawah ini, yang hanya menampilkan kutipan relevan dari manifes aplikasi web, seharusnya membuatnya lebih jelas:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

Ini untuk aplikasi fiktif yang menangani file nilai yang dipisahkan koma (.csv) di /open-csv, file grafik vektor skalabel (.svg) di /open-svg, dan format file Grafr yang dibuat-buat dengan salah satu dari .grafr, .graf, atau .graph sebagai ekstensi di /open-graf. Dua yang pertama akan terbuka dalam satu klien, dan terakhir di beberapa klien jika beberapa file sedang ditangani.

Catatan: Agar pernyataan ini dapat diterapkan, aplikasi harus diinstal. Anda dapat pelajari lebih lanjut dalam seri artikel di situs ini mengenai membuat aplikasi agar dapat diinstal.

Bagian penting dari File Handling API

Sekarang, setelah aplikasi mendeklarasikan file apa yang dapat menangani URL dalam cakupan, secara teori perlu harus melakukan sesuatu dengan file masuk dalam praktiknya. Di sinilah launchQueue berperan memainkan perannya. Untuk mengakses file yang diluncurkan, situs perlu menentukan konsumen untuk window.launchQueue . Peluncuran diantrekan sampai ditangani oleh konsumen yang ditentukan, yang dipanggil sekali untuk setiap peluncuran. Dengan cara ini, setiap peluncuran tertangani, terlepas dari kapan konsumen ditentukan.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

Dukungan DevTools

Tidak ada dukungan DevTools pada saat penulisan ini, tetapi saya telah mengajukan permintaan fitur untuk meminta dukungan ditambahkan.

Demo

Saya telah menambahkan dukungan penanganan file ke Excalidraw, aplikasi menggambar bergaya kartun. Untuk mengujinya, Anda perlu menginstal Excalidraw terlebih dahulu. Ketika Anda kemudian membuat file dengan itu dan menyimpannya di suatu tempat sistem file Anda, buka file dengan klik dua kali, atau klik kanan, lalu pilih "Excalidraw" di menu konteks. Anda dapat melihat penerapan di sumber pada kode sumber.

Klik dua kali atau klik kanan file di penjelajah file sistem operasi Anda.

Excalidraw adalah pengendali file default untuk file .excalidraw.

Keamanan

Tim Chrome telah merancang dan menerapkan File Handling API menggunakan prinsip inti yang telah ditentukan di Mengontrol Akses ke Fitur Platform Web yang Andal, termasuk kontrol pengguna, transparansi, dan ergonomi.

Pembaruan izin, persistensi izin, dan pengendali file

Untuk memastikan kepercayaan dan keamanan pengguna file, saat File Handling API membuka file, permintaan izin akan ditampilkan sebelum PWA dapat melihat file. Prompt izin ini akan ditampilkan tepat setelah pengguna memilih PWA untuk membuka file, sehingga izin tersebut terkait erat dengan tindakan membuka file menggunakan PWA, sehingga lebih mudah dipahami dan relevan.

Izin ini akan muncul setiap saat hingga pengguna mengklik Izinkan atau Blokir penanganan file untuk situs tersebut, atau mengabaikan perintah tiga kali (setelah itu Chromium akan melakukan embargo dan memblokirnya tertentu). Setelan yang dipilih akan tetap ada di seluruh penutupan dan pembukaan kembali PWA.

Saat update dan perubahan manifes di bagian "file_handlers" terdeteksi, izin akan direset.

Tantangan terkait file

Ada kategori besar vektor serangan yang dibuka dengan mengizinkan {i>website<i} mengakses file. Hal tersebut diuraikan dalam artikel tentang File System Access API. Tujuan kemampuan terkait keamanan tambahan yang disediakan File Handling API melalui Sistem File Access API adalah kemampuan untuk memberikan akses ke file tertentu melalui bawaan sistem operasi UI, bukan melalui pemilih file yang ditampilkan oleh aplikasi web.

Masih ada risiko bahwa pengguna mungkin secara tidak sengaja memberikan akses aplikasi web ke file dengan membukanya. Akan tetapi, umumnya dipahami bahwa membuka file memungkinkan aplikasi untuk dibuka untuk membaca dan/atau memanipulasi file itu. Oleh karena itu, pilihan eksplisit pengguna untuk membuka file di aplikasi terinstal, seperti melalui "Buka dengan..." menu konteks tambahan, dapat dibaca sebagai sinyal kepercayaan dalam aplikasi.

Tantangan pengendali default

Pengecualian untuk hal ini adalah ketika tidak ada aplikasi pada sistem {i>host<i} untuk jenis file tertentu. Di beberapa dalam kasus ini, beberapa sistem operasi {i>host<i} dapat secara otomatis mempromosikan pengendali yang baru terdaftar ke pengendali default untuk jenis file tersebut secara otomatis dan tanpa intervensi apa pun dari pengguna. Ini akan berarti jika pengguna mengklik dua kali file jenis tersebut, file akan otomatis terbuka di aplikasi web Anda. Pada sistem operasi host tersebut, ketika agen pengguna menentukan bahwa tidak ada default untuk jenis file, prompt izin eksplisit mungkin diperlukan untuk menghindari secara tidak sengaja mengirim isi file ke aplikasi web tanpa persetujuan pengguna.

Kontrol pengguna

Spesifikasi menyatakan bahwa browser tidak boleh mendaftarkan setiap situs yang dapat menangani file sebagai file sebagai pengendali Sebaliknya, pendaftaran penanganan file harus dibatasi di belakang penginstalan dan tidak pernah terjadi tanpa konfirmasi eksplisit dari pengguna, terutama jika sebuah situs akan menjadi pengendali default. Lebih suka daripada membajak ekstensi yang ada seperti .json, sehingga pengguna mungkin sudah memiliki pengendali default terdaftar, situs harus mempertimbangkan untuk membuat ekstensinya sendiri.

Transparansi

Semua sistem operasi memungkinkan pengguna untuk mengubah asosiasi file yang ada. Hal ini di luar cakupan browser.

Masukan

Tim Chrome ingin mengetahui pengalaman Anda saat menggunakan File Handling API.

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode yang hilang yang dibutuhkan untuk menerapkan ide Anda? Memiliki pertanyaan atau komentar tentang keamanan model?

• Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah performa.

Laporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?

• Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak yang Anda dapat, instruksi sederhana untuk mereproduksi, dan masukkan UI>Browser>WebAppInstalls>FileHandling di kotak Components. Glitch berfungsi sangat baik untuk berbagi dengan cepat dan mudah repro.

Menunjukkan dukungan untuk API

Anda berencana menggunakan File Handling API? Dukungan publik Anda membantu tim Chrome untuk memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung mereka.

• Bagikan rencana Anda untuk menggunakannya di thread Discourse WICG.
• Kirim tweet ke @ChromiumDev menggunakan hashtag #FileHandling dan izinkan kami tahu di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

• Penjelasan untuk publik
• Demo API Penanganan File | Sumber demo API Penanganan File
• Bug pelacakan Chromium
• Entri ChromeStatus.com
• Komponen Kedipan: UI>Browser>WebAppInstalls>FileHandling
• Peninjauan TAG
• Posisi Standar Mozilla

Ucapan terima kasih

File Handling API ditentukan oleh Eric Willigers, Jay Harris, dan Raymes Khoury. Artikel ini telah ditinjau oleh Joe Medley.