Yeni HTML <izni> öğesi için kaynak denemesi

Thomas Steiner

Kullanım izni istemenin bazı zorunlu yöntemleri vardır Web uygulamalarında konum erişimi gibi güçlü özellikler Bu yöntemlerde görebilirsiniz. Bu nedenle, Chrome izinleri ekibi yeni bir declarative yöntemi olan özel bir HTML <permission> öğesi kullanılır. Bu öğesi, Chrome 126'daki kaynak denemesindedir ve nihai olarak standartlaştırmaktır.

İzin istemek için uygulanan zorunlu yöntemler

Web uygulamalarının güçlü özelliklerden izin istemelisiniz. Örneğin, Google Haritalar, Geolocation API tarayıcılar kullanıcıya istem gösterir ve genellikle söz konusu kararı saklama seçeneği sunar. Bu, iyi tanımlanmış kavram bölümünü ziyaret edin.

Dolaylı olarak ilk kullanımda sorma ve açık bir şekilde önceden isteme

Coğrafi Konum API'si güçlü bir API'dir ve üstü kapalı olarak ilk önce ya da yaklaşımı kullanmayı düşünebilirsiniz. Örneğin, bir uygulama navigator.geolocation.getCurrentPosition() yöntemini kullanıyorsanız izin istemi ilk çağrıda otomatik olarak açılır. Başka bir örnek de navigator.mediaDevices.getUserMedia().

Diğer API'ler, örneğin Notification API veya "the" Device Orientation and Motion API, genellikle bir statik bir yöntemle izin istemek için Notification.requestPermission() veya DeviceMotionEvent.requestPermission()

Zorunlu izin yöntemlerinin yer aldığı meydan okumalar

İzin spam'i

Geçmişte web siteleri aşağıdaki gibi yöntemleri çağırabiliyordu: navigator.mediaDevices.getUserMedia() veya Notification.requestPermission(), Ayrıca bir web sitesi anında navigator.geolocation.getCurrentPosition() yüklendi. Kullanıcı etkileşime girmeden önce bir izin istemi görünecek. web sitesi. Bu durum bazen izin spam'i olarak adlandırılır ve her ikisini de etkiler. dolaylı yoldan ilk kullanımda ulaşılır, ayrıca doğrudan ödeme yapabilirsiniz.

Tarayıcı çözümleri ve kullanıcı hareketi gereksinimleri

İzin spam'i, tarayıcı tedarikçi firmalarının düğme gibi bir kullanıcı hareketi talep etmesine neden oldu önce bir izin istemi göstermeden önce tıklama veya bir keydown etkinliği gerçekleştirme. Sorun Yani, bu yaklaşımda tarayıcının web sitesini ziyaret etmesinin çok zor, belirli bir kullanıcı hareketinin kullanıcılara izin istemini vermesinin gerekmesi olup olmadığını kontrol edin. Kullanıcı hayal kırıklığıyla sayfayı tıklıyor olabilir Çünkü sayfa yüklenmesi çok uzun sürdü, hatta sayfayı Beni bul düğmesini tıklayarak. Bazı web siteleri de İstemi tetiklemek için kullanıcıları kandırarak içeriği tıklama.

Diğer bir çözüm de kötüye kullanım riskini hızlı bir şekilde azaltmaktır (ör. tamamen veya izin istemini kalıcı olmayan, daha kısa bir rahatsız edici içerik kullanır.

İzin bağlamına ayırma

Özellikle büyük ekranlarda yaşanan bir diğer zorluk da izin isteminin genellikle görüntülenir: kimlik tarayıcı penceresinin dışındadır. İnsanların Kullanıcıların tarayıcılarının üst kısmındaki istemi fark edemediğini en son açılan pencerenin alt kısmındaki bir düğmeyi tıklamaktır. Bu sorun tarayıcı spam'i çözümleri uygulanırken bu durum genellikle daha da artar.

Kolay geri alınamaz

Son olarak, kullanıcılar çok kolay bir şekilde çıkmaza sokabilir. Örneğin, Örneğin, kullanıcı bir özelliğe erişimi engellediğinde Sıfırlamalarını sağlayabilecekleri site bilgileri açılır izin verin veya engellenen izinleri tekrar açın. Her iki seçenek de en kötü durumda durumunda, güncellenen ayar geçerli olana kadar sayfanın tamamen yeniden yüklenmesi gerekir. Siteler, kullanıcılara bir öğeyi kolayca değiştirmeleri için ve kullanıcılara bu izinlerin nasıl verileceğini aşağıdaki Google Haritalar sayfasının alt kısmında gösterildiği şekilde ayarlarını ekran görüntüsüdür.

Bu izin, deneyimin temelini oluşturuyorsa (örneğin, bir video konferans uygulaması, Google Meet gibi uygulamalar araya giren iletişim kutuları gösteriyor söz konusu e-posta adresini kullanabilirsiniz.

Bildirim temelli <permission> öğesi

Chrome izin ekibi, bu yayında açıklanan zorlukların üstesinden gelmek için yeni bir HTML öğesi (<permission>) için kaynak denemesi başlattı. Bu öğesi, geliştiricilerin şimdilik bir eklentiyi kullanmak için izin istemelerine olanak sunduğu güçlü özelliklerin bir altkümesini içerir. En basit şekliyle, aşağıdaki örnekte olduğu gibi kullanın:

<permission type="camera" />

Bu konu aktif olarak tartışılıyor <permission> değerinin geçersiz olup olmayacağı öğesi olup olmadığını kontrol edin. Boşluk öğeleri, HTML'de kendi kendine kapanan bir öğedir. alt düğümleri vardır ve HTML'de bunun bir bitiş etiketi olmayabileceği anlamına gelir.

type özelliği

İlgili içeriği oluşturmak için kullanılan type özelliği, istekte bulunduğunuz izinlerin boşlukla ayrılmış bir listesini içerir. Kuyruklu a işareti şu şekilde izin verilir: 'camera', 'microphone' ve camera microphone (boşlukla ayrılmış). Bu öğe, varsayılan olarak kullanıcı aracısı stiline sahip düğmelere benzer.

type-ext özelliği

Ek parametrelere olanak tanıyan bazı izinler için type-ext özelliğinin değeri boşlukla ayrılmış anahtar/değer çiftlerini kabul eder; örneğin, Coğrafi konum izni için precise:true.

lang özelliği

Düğme metni tarayıcı tarafından sağlanır ve tutarlı olması amaçlanır. Bu nedenle özelleştirilemez. Tarayıcı metnin dilini değiştirir dokümanın veya üst öğe zincirinin devralınan diline bağlı olarak ya da isteğe bağlı lang özelliğini gönderin. Bu durumda, geliştiricilerin <permission> dilini yerelleştirmesi gerekmez öğesinin kendisidir. <permission> öğesi, kaynağın ötesine geçiyorsa deneme aşamasında, her izin türü için birkaç dize veya simge desteklenebilir esnek bir model kullanabilirsiniz. <permission> kullanmakla ilgileniyorsanız öğesine ihtiyacınız varsa ve belirli bir dize veya simgeye ihtiyaç duyuyorsanız iletişime geçin.

Davranış

Kullanıcı <permission> öğesiyle etkileşime geçtiğinde geçiş yapabilir çeşitli aşamalar var:

• Daha önce bir özelliğe izin vermemişlerse her ziyarette izin verebilir veya geçerli ziyaret için izin vermeniz gerekir.

  

• Daha önce özelliğe izin vermişlerse izin vermeye devam edebilirler veya özelliği durdurabilirler ancak buna izin vermiş olursunuz.

  

• Daha önce bir özelliğe izin vermemişlerse söz konusu özelliğe izin vermeye devam edebilirler veya şimdi izin ver.

  

<permission> öğesinin metni, şuraya göre otomatik olarak güncellenir: durumu. Örneğin, bir özelliği kullanma izni verilmişse izin verildiğini belirten bir değişiklik yapar. Önce izin verilmesi gerekiyorsa Metin, kullanıcıyı özelliği kullanmaya davet etmek için değişir. Daha öncekileri karşılaştır iki durumu görmek için aşağıdaki ekran görüntüsünü ekleyin.

CSS tasarımı

Kullanıcıların, düğmeyi güçlü konuma erişebilecekleri bir yüzey olarak kolayca tanıyabilmelerini sağlamak için özellikleri, <permission> öğesinin stili kısıtlanır. Stil kullanım alanınıza nasıl uyacağınızı öğrenmekten memnuniyet duyarız. nasıl ve neden? Stil ile ilgili tüm ihtiyaçları karşılayamayabiliriz, ancak yine de sonrasında <permission> öğesine daha fazla stil uygulamak için güvenli kaynak denemesi Aşağıdaki tabloda, kısıtlamaları olan bazı mülkler ayrıntılı olarak açıklanmaktadır. veya özel kurallar uygulanabilir. Kurallardan herhangi birinin ihlal edilmesi durumunda, <permission> öğesi devre dışı bırakılacak ve öğeyle etkileşimde bulunulamayacak. Herhangi biri bir deneme yapmak, daha sonra yakalanabilecek istisnalara JavaScript'e dokunun. Hata mesajı, algılanan bağlantıyla ilgili daha fazla ayrıntı içerir: ihlal eder.

Aşağıdaki CSS özellikleri normal şekilde kullanılabilir:

• 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 (ve tüm border-* mülk)
• 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-* (outline-offset için daha önce belirtilen istisna ile)
• 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

Ek olarak, mantıksal olarak eşdeğer olan tüm özellikler kullanılabilir (örneğin, inline-size, width ile eşdeğerdir ve eşdeğerdir.

Sözde sınıflar

<permission> öğesinin stilini belirlemeye olanak tanıyan iki özel sözde sınıf vardır öğesine dokunun:

• :granted: :granted sözde sınıfı, izni verildi.
• :invalid: :invalid sözde sınıfı, öğesinin durumu geçersizdir (örneğin, kaynaklar arası iframe'dir.

permission {
  background-color: green;
}

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

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

JavaScript etkinlikleri

<permission> öğesinin, Permissions API. Dinlenebilecek birkaç etkinlik vardır:

• onpromptdismiss: Bu etkinlik, izin istemi tarafından tetiklendiğinde öğe, kullanıcı tarafından kapatıldıysa (örneğin, kapat düğmesini düğmesini tıklayın veya istemin dışını tıklayın).

• onpromptaction: Bu etkinlik, izin istemi tarafından tetiklendiğinde Öğe, kullanıcının istemde bir işlem yapması tarafından çözümlendi kendisi. Bu, izin durumunun değiştiği anlamına gelmez. kullanıcının mevcut durumu koruyan bir işlem (örneğin, (bir izin vermeyi sürdürerek).

• onvalidationstatuschange: Bu etkinlik, öğe "valid" ile "invalid" arasında. Öğe,"valid" Tarayıcı, kullanıcı sinyali tıkladığında sinyalin bütünlüğüne güvenir ve "invalid"; aksi takdirde, örneğin, öğe HTML içeriği işler.

Bu etkinlikler için etkinlik işleyicileri doğrudan HTML'de satır içi olarak kaydedebilirsiniz kod (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />), veya <permission> öğesinde addEventListener() kullanılarak örneği inceleyelim.

<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>

Özellik algılama

Tarayıcı, bir HTML öğesini desteklemiyorsa ilgili öğeyi göstermez. Bunun anlamı, HTML kodunuzda <permission> öğesi varsa bunu bilmiyor. Yine de JavaScript'in desteklenip desteklenmediğini görmek isteyebilirsiniz. Örneğin, bir izin istemini tıklayarak tetiklenen normal <button>.

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

Kaynak denemesi

Sitenizdeki <permission> öğesini gerçek kullanıcılarla denemek için kaynak denemesine kaydolun. Aşağıdaki kaynaklar için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin. sitenizi kaynak denemelerini kullanmaya hazırlamaya ilişkin talimatlar. Kaynak denemesi Chrome 126 ile 131 arasında (19 Şubat 2025) çalışacak.

Demo

Demoyu keşfedin ve GitHub'da kaynak koda göz atın. Destekleyen bir tarayıcıda bu deneyimin ekran görüntüsünü aşağıda bulabilirsiniz.

Geri bildirim

<permission> hizmetinin kullanım alanınız için nasıl çalıştığını öğrenmek isteriz. Duygu birine yanıt vermekte özgürce Depodaki sorunlar veya yeni bir kod deposu oluşturun bir. Şu sorgu için depodaki genel sinyaller: <permission> öğesi, ilgilendiğinizi bize ve diğer tarayıcılara bildirir somut olarak ortaya koyar.

SSS

• Bu, İzinler ile eşlenmiş normal bir <button> cihazından neden daha iyidir? API mi? <button> tıklaması bir kullanıcı hareketidir, ancak tarayıcıların bunu isteğine bağlı olduğunu doğrulayın. Öğe kullanıcı bir <permission> tıkladıysa, tarayıcı tıklamanın gerçekten bir izin isteğiyle ilişkilidir. Bu, tarayıcının akışları kolaylaştırmasına olanak tanır bu çok daha riskli oluyor. Örneğin, kullanıcının engelleme işlemini kolayca geri alabilirsiniz.
• Diğer tarayıcılar <permission> öğesini desteklemiyorsa ne olur? İlgili içeriği oluşturmak için kullanılan <permission> öğesi, progresif geliştirme olarak kullanılabilir. Şu tarihte: desteklenmeyen tarayıcılarda klasik izin akışı kullanılabilir. Örneğin, bir normal <button> tıklamasına dayalı olarak. İzin ekibi ayrıca oluşturmaya karar verebiliriz. GitHub deposuna yıldız ekleyin hazır olduğunda bilgilendirileceksiniz.
• Bu konu diğer tarayıcı tedarikçileriyle konuşuldu mu? <permission> öğesi 2023'te W3C TPAC'de aktif olarak grup oturumuna katılın. Siz okuyabilir herkese açık oturum notlarını inceleyin. Chrome ekibi, her iki ülke için de resmi Standart Pozisyonları satıcılarınız varsa İlgili bağlantılar bölümüne bakın. <permission> diğer tarayıcılarla tartışmaya devam eden bir konudur ve yardımcı olmak dileğiyle.
• Bu aslında geçersiz bir öğe mi olmalı? Hâlâ konuşuluyor Aktif olarak tartıştık <permission> değerinin geçersiz olup olmayacağı öğesi olup olmadığını kontrol edin. Geri bildirimde bulunmak isterseniz sorunu bizimle paylaşabilirsiniz.

İlgili bağlantılar

• Açıklayıcı
• WebKit Standards Konumu
• Mozilla Standartları Konumu

Teşekkür

Bu doküman, tarafından incelendi Balázs Engedy, Thomas Nguyen, Penelope McLachlan, Marian Harbach, David Warren ve Rachel Andrew.