Uji coba origin untuk elemen <permission> HTML baru

Thomas Steiner

Ada sejumlah metode imperatif untuk meminta izin penggunaan fitur canggih seperti akses lokasi di aplikasi web. Metode ini memiliki sejumlah tantangan, itulah sebabnya tim izin Chrome bereksperimen dengan metode deklaratif baru: elemen <permission> HTML khusus. Elemen ini berada dalam uji coba origin dari Chrome 126, dan pada akhirnya kami berharap dapat menstandarkannya.

Metode imperatif untuk meminta izin

Saat aplikasi web memerlukan akses ke fitur canggih, aplikasi tersebut harus meminta izin. Misalnya, saat Google Maps memerlukan lokasi pengguna menggunakan Geolocation API, browser akan meminta pengguna, sering kali dengan opsi untuk menyimpan keputusan tersebut. Ini adalah konsep yang jelas dalam spesifikasi Izin.

Bertanya secara implisit saat penggunaan pertama versus meminta secara eksplisit di awal

Geolocation API adalah API yang efektif dan mengandalkan pendekatan bertanya secara implisit pada penggunaan pertama. Misalnya, saat aplikasi memanggil metode navigator.geolocation.getCurrentPosition(), dialog izin akan otomatis muncul saat panggilan pertama. Contoh lainnya adalah navigator.mediaDevices.getUserMedia().

API lain, seperti Notification API atau Device Orientation and Motion API, biasanya memiliki cara eksplisit untuk meminta izin melalui metode statis seperti Notification.requestPermission() atau DeviceMotionEvent.requestPermission().

Tantangan dengan metode imperatif untuk meminta izin

Spam izin

Sebelumnya, situs dapat memanggil metode seperti navigator.mediaDevices.getUserMedia() atau Notification.requestPermission(), tetapi juga navigator.geolocation.getCurrentPosition() segera saat situs dimuat. Dialog izin akan muncul sebelum pengguna berinteraksi dengan situs. Hal ini terkadang dijelaskan sebagai spam izin dan memengaruhi kedua pendekatan, baik meminta secara implisit saat penggunaan pertama maupun meminta secara eksplisit di awal.

Mitigasi browser dan persyaratan gestur pengguna

Spam izin menyebabkan vendor browser mewajibkan gestur pengguna seperti klik tombol atau peristiwa keydown sebelum menampilkan dialog izin. Masalah dengan pendekatan ini adalah browser akan sangat sulit, bahkan tidak mungkin, untuk mengetahui apakah gestur pengguna tertentu harus menghasilkan perintah izin yang ditampilkan atau tidak. Mungkin pengguna hanya mengklik halaman di mana saja karena frustrasi karena pemuatan halaman yang terlalu lama, atau mungkin mereka memang mengklik tombol Temukan saya. Beberapa situs juga menjadi sangat pandai menipu pengguna agar mengklik konten untuk memicu perintah.

Mitigasi lainnya adalah menambahkan mitigasi penyalahgunaan perintah, seperti memblokir fitur sepenuhnya sejak awal, atau menampilkan dialog izin dengan cara non-modal yang tidak mengganggu.

Kontekstualisasi izin

Tantangan lainnya, terutama di layar besar, adalah cara perintah izin biasanya ditampilkan: di atas batas akhir, yaitu di luar area jendela browser yang dapat digambar oleh aplikasi. Bukan hal yang aneh jika pengguna melewatkan perintah di bagian atas jendela browser saat mereka baru saja mengklik tombol di bagian bawah jendela. Masalah ini sering kali diperparah saat mitigasi spam browser diterapkan.

Tidak ada urungkan yang mudah

Terakhir, pengguna terlalu mudah menavigasi diri mereka ke jalan buntu. Misalnya, setelah pengguna memblokir akses ke suatu fitur, pengguna harus mengetahui menu drop-down informasi situs tempat mereka dapat Mereset izin atau mengaktifkan kembali izin yang diblokir. Kedua opsi dalam kasus terburuk memerlukan pemuatan ulang halaman secara penuh hingga setelan yang diperbarui diterapkan. Situs tidak dapat menyediakan pintasan yang mudah bagi pengguna untuk mengubah status izin yang ada dan harus menjelaskan dengan susah payah kepada pengguna cara mengubah setelan mereka seperti yang ditunjukkan di bagian bawah screenshot Google Maps berikut.

Jika izin sangat penting untuk pengalaman, misalnya, akses mikrofon untuk aplikasi konferensi video, aplikasi seperti Google Meet menampilkan dialog yang mengganggu yang menginstruksikan pengguna cara mengizinkan izin.

Elemen <permission> deklaratif

Untuk mengatasi tantangan yang dijelaskan dalam postingan ini, tim izin Chrome telah meluncurkan uji coba origin untuk elemen HTML baru, <permission>. Elemen ini memungkinkan developer meminta izin secara deklaratif untuk menggunakan, untuk saat ini, subset fitur canggih yang tersedia untuk situs. Dalam bentuk yang paling sederhana, Anda menggunakannya seperti dalam contoh berikut:

<permission type="camera" />

Masih diperdebatkan secara aktif apakah <permission> harus menjadi elemen kosong atau tidak. Elemen kosong adalah elemen menutup sendiri di HTML yang tidak dapat memiliki node turunan, yang dalam HTML berarti elemen tersebut tidak boleh memiliki tag akhir.

Atribut type

Atribut type berisi daftar izin yang dipisahkan spasi yang Anda minta. Pada saat penulisan ini, nilai yang diizinkan adalah 'camera', 'microphone', dan camera microphone (dipisahkan dengan spasi). Secara default, elemen ini dirender mirip dengan tombol dengan gaya agen pengguna dasar.

Atribut type-ext

Untuk beberapa izin yang memungkinkan parameter tambahan, atribut type-ext menerima pasangan nilai kunci yang dipisahkan dengan spasi, seperti, misalnya, precise:true untuk izin geolokasi.

Atribut lang

Teks tombol disediakan oleh browser dan dimaksudkan agar konsisten, sehingga tidak dapat disesuaikan secara langsung. Browser mengubah bahasa teks berdasarkan bahasa yang diwarisi dari dokumen atau rantai elemen induk, atau atribut lang opsional. Artinya, developer tidak perlu melokalkan elemen <permission> sendiri. Jika elemen <permission> melampaui tahap uji coba origin, beberapa string atau ikon dapat didukung untuk setiap jenis izin guna meningkatkan fleksibilitas. Jika Anda tertarik untuk menggunakan elemen <permission> dan memerlukan string atau ikon tertentu, hubungi kami.

Perilaku

Saat pengguna berinteraksi dengan elemen <permission>, mereka dapat melihat berbagai tahap:

• Jika belum pernah mengizinkan fitur sebelumnya, mereka dapat mengizinkannya di setiap kunjungan, atau mengizinkannya untuk kunjungan saat ini.

  

• Jika sebelumnya mereka telah mengizinkan fitur ini, mereka dapat terus mengizinkannya, atau berhenti mengizinkannya.

  

• Jika sebelumnya mereka tidak mengizinkan suatu fitur, mereka dapat terus tidak mengizinkannya, atau mengizinkannya kali ini.

  

Teks elemen <permission> diperbarui secara otomatis berdasarkan status. Misalnya, jika izin diberikan untuk menggunakan fitur, teks akan berubah untuk menyatakan bahwa fitur tersebut diizinkan. Jika izin perlu diberikan terlebih dahulu, teks akan berubah untuk mengundang pengguna menggunakan fitur tersebut. Bandingkan screenshot sebelumnya dengan screenshot berikut untuk melihat kedua status.

Desain CSS

Untuk memastikan pengguna dapat dengan mudah mengenali tombol sebagai platform untuk mengakses kemampuan yang canggih, gaya elemen <permission> dibatasi. Jika batasan gaya tidak berfungsi untuk kasus penggunaan Anda, kami akan senang mendengar tentang cara dan alasannya. Meskipun tidak semua kebutuhan gaya dapat diakomodasi, kami berharap dapat menemukan cara yang aman untuk mengizinkan lebih banyak gaya elemen <permission> setelah uji coba origin. Tabel berikut menjelaskan beberapa properti yang memiliki batasan atau aturan khusus yang diterapkan padanya. Jika salah satu aturan dilanggar, elemen <permission> akan dinonaktifkan dan tidak dapat berinteraksi. Setiap upaya untuk berinteraksi dengannya akan menghasilkan pengecualian yang dapat ditangkap dengan JavaScript. Pesan error akan berisi detail selengkapnya tentang pelanggaran yang terdeteksi.

Properti CSS berikut dapat digunakan seperti biasa:

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name aspect-ratio
• border (dan semua properti border-*)
• clear
• color-scheme
• contain
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-*
• flex-*
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline-* (dengan pengecualian yang disebutkan sebelumnya untuk outline-offset)
• overflow-anchor
• overscroll-behavior-*
• page
• position
• position-anchor
• content-visibility
• right
• scroll-margin-*
• scroll-padding-*
• text-spacing-trim
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

Selain itu, semua properti yang setara secara logis dapat digunakan (misalnya, inline-size setara dengan width), mengikuti aturan yang sama dengan properti yang setara.

Class semu

Ada dua pseudo-class khusus yang memungkinkan penataan gaya elemen <permission> berdasarkan status:

• :granted: Pseudo-class :granted memungkinkan gaya khusus saat izin diberikan.
• :invalid: Class semu :invalid memungkinkan gaya khusus saat elemen berada dalam status tidak valid, misalnya, saat elemen disajikan dalam iframe lintas origin.

permission {
  background-color: green;
}

permission:granted {
  background-color: light-green;
}

/* Not supported during the origin trial. */
permission:invalid {
  background-color: gray;
}

Peristiwa JavaScript

Elemen <permission> dimaksudkan untuk digunakan bersama dengan Permissions API. Ada sejumlah peristiwa yang dapat diproses:

• onpromptdismiss: Peristiwa ini diaktifkan saat dialog izin yang dipicu oleh elemen telah ditutup oleh pengguna (misalnya dengan mengklik tombol tutup atau mengklik di luar dialog).

• onpromptaction: Peristiwa ini diaktifkan saat dialog izin yang dipicu oleh elemen telah diselesaikan oleh pengguna yang melakukan beberapa tindakan pada dialog itu sendiri. Hal ini tidak berarti status izin telah berubah, pengguna mungkin telah melakukan tindakan yang mempertahankan status quo (seperti terus mengizinkan izin).

• onvalidationstatuschange: Peristiwa ini diaktifkan saat elemen beralih dari "valid" menjadi "invalid". Elemen dianggap "valid" jika browser memercayai integritas sinyal jika pengguna mengkliknya, dan "invalid" jika tidak, misalnya, saat elemen sebagian tertutup oleh konten HTML lain.

Anda dapat mendaftarkan pemroses peristiwa untuk peristiwa ini secara langsung sebaris dalam kode HTML (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />), atau menggunakan addEventListener() pada elemen <permission>, seperti yang ditunjukkan dalam contoh berikut.

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });

  // Run the initial check.
  if (permissionStatus.state === "granted") {
    useCamera();
  }
</script>

Deteksi fitur

Jika browser tidak mendukung elemen HTML, browser tidak akan menampilkannya. Artinya, jika Anda memiliki elemen <permission> dalam kode HTML, tidak akan terjadi apa pun jika browser tidak mengetahuinya. Anda mungkin masih ingin mendeteksi dukungan menggunakan JavaScript, misalnya, untuk membuat dialog izin yang dipicu melalui klik <button> reguler.

if ('HTMLPermissionElement' in window) {
  // The `<permission>` element is supported.
}

Uji coba origin

Untuk mencoba elemen <permission> di situs Anda dengan pengguna sungguhan, daftar ke uji coba origin. Baca Mulai menggunakan uji coba origin untuk mendapatkan petunjuk tentang cara menyiapkan situs Anda agar dapat menggunakan uji coba origin. Uji coba origin akan berjalan dari Chrome 126 hingga 131 (19 Februari 2025).

Demo

Jelajahi demo dan lihat kode sumber di GitHub. Berikut screenshot pengalaman di browser yang mendukung.

Masukan

Kami ingin mendengar pendapat Anda tentang cara kerja <permission> untuk kasus penggunaan Anda. Jangan ragu untuk menanggapi salah satu Masalah di repositori, atau ajukan masalah baru. Sinyal publik di repo untuk elemen <permission> akan memberi tahu kami dan browser lain bahwa Anda tertarik dengan elemen tersebut.

FAQ

• Apa kelebihan cara ini dibandingkan dengan <button> biasa yang dipasangkan dengan Permissions API? Klik <button> adalah gestur pengguna, tetapi browser tidak dapat memverifikasi bahwa klik tersebut terhubung ke permintaan untuk meminta izin. Jika pengguna telah mengklik <permission>, browser dapat memastikan bahwa klik tersebut terkait dengan permintaan izin. Hal ini memungkinkan browser memfasilitasi alur yang jika tidak, akan jauh lebih berisiko. Misalnya, memungkinkan pengguna membatalkan pemblokiran izin dengan mudah.
• Bagaimana jika browser lain tidak mendukung elemen <permission>? Elemen <permission> dapat digunakan sebagai peningkatan progresif. Di browser yang tidak mendukung, alur pemberian izin klasik dapat digunakan. Misalnya, berdasarkan klik <button> reguler. Tim izin juga sedang berupaya membuat polyfill. Beri bintang pada repo GitHub untuk mendapatkan notifikasi saat sudah siap.
• Apakah hal ini dibahas dengan vendor browser lain? Elemen <permission> dibahas secara aktif di W3C TPAC pada tahun 2023 dalam sesi terpisah. Anda dapat membaca catatan sesi publik. Tim Chrome juga telah meminta Posisi Standar formal dari kedua vendor, lihat bagian Link terkait. Elemen <permission> adalah topik diskusi yang sedang berlangsung dengan browser lain dan kami berharap dapat menstandardisasinya.
• Apakah ini seharusnya menjadi elemen kosong? Masih diperdebatkan secara aktif apakah <permission> harus menjadi elemen kosong atau tidak. Jika Anda memiliki masukan, berikan masukan di Masalah.

Link terkait

• Penjelasan
• Posisi Standar WebKit
• Posisi Standar Mozilla

Ucapan terima kasih

Dokumen ini ditinjau oleh Balázs Engedy, Thomas Nguyen, Penelope McLachlan, Marian Harbach, David Warren, dan Rachel Andrew.