Es gibt eine Reihe von imperativen Methoden, mit denen Sie um Erlaubnis zur Verwendung der
leistungsstarke Funktionen wie den Standortzugriff in Web-Apps. Diese Methoden beinhalten eine
Herausforderungen zu stellen. Deshalb experimentiert das Team
durch eine neue deklarative Methode: ein dediziertes <permission>
-HTML-Element. Dieses
Element befindet sich im Ursprungstest von Chrome 126. Wir hoffen,
zu standardisieren.
Imperative Methoden zum Anfordern von Berechtigungen
Wenn Web-Apps Zugriff auf leistungsstarken Funktionen um Erlaubnis fragen müssen. Wenn beispielsweise Google Maps erfordert den Standort des Nutzers mithilfe der Geolocation API fordert Browser den Nutzer auf, oft die Option zu speichern, diese Entscheidung zu speichern. Dies ist ein klar definiertes Konzept in der Berechtigungsspezifikation.
Indirekt nach der ersten Verwendung oder ausdrücklich im Voraus fragen
Die Geolocation API ist eine leistungsstarke API und stützt sich auf die implizite Abfrage zuerst
verwenden können. Wenn eine App beispielsweise die
navigator.geolocation.getCurrentPosition()
wird beim ersten Aufruf automatisch eine Berechtigungsaufforderung eingeblendet.
Ein weiteres Beispiel
navigator.mediaDevices.getUserMedia()
Andere APIs wie die
Notification API oder
die
Device Orientation und Motion API
haben häufig eine explizite Möglichkeit, die Berechtigung durch eine statische Methode wie
Notification.requestPermission()
oder
DeviceMotionEvent.requestPermission()
Herausforderungen mit imperativen Methoden zum Fordern von Genehmigungen
Berechtigungsspam
In der Vergangenheit konnten Websites Methoden wie
navigator.mediaDevices.getUserMedia()
oder Notification.requestPermission()
,
aber auch navigator.geolocation.getCurrentPosition()
, wenn eine Website
wurde geladen. Bevor der Nutzer mit der Anfrage interagiert hat, wird eine Berechtigungsaufforderung eingeblendet.
der Website. Dies wird manchmal als Berechtigungsspam beschrieben und betrifft sowohl
die implizite nach der ersten Verwendung oder
im Voraus.
Browserschutzmaßnahmen und Anforderungen an Nutzergesten
Aufgrund von Spam-Genehmigungen haben Browseranbieter eine Nutzergeste wie eine Schaltfläche verlangt oder ein Keydown-Ereignis ein, bevor eine Berechtigungsaufforderung angezeigt wird. Das Problem mit Bei diesem Ansatz ist es für den Browser sehr schwierig, wenn nicht unmöglich, herausfinden, ob eine bestimmte Nutzergeste in einer Berechtigungsaufforderung angezeigt wird oder nicht. Vielleicht hat der Nutzer frustriert nur auf die Seite geklickt. weil die Ladezeit der Seite so lange gedauert hat Klicken Sie auf die Schaltfläche Mich finden. Manche Websites haben sich auch sehr gut Nutzer werden dazu verleitet, auf Inhalte zu klicken, um die Aufforderung auszulösen.
Eine weitere Lösung ist das Hinzufügen von Eindämmungsmaßnahmen, oder das Einblenden der Berechtigungsaufforderung in einem nicht modalen, aufdringlich wirken.
Kontextualisierung von Berechtigungen
Eine weitere Herausforderung, vor allem auf großen Bildschirmen, ist die Art und Weise, häufig angezeigt: oberhalb der Sinn des Todes, die sich außerhalb des Browserfensters befindet, auf den die App zeichnen kann. Es ist Uns war nicht bewusst, dass die Nutzenden die Aufforderung am oberen Rand des Browsers verpassen. wenn sie unten im Fenster auf eine Schaltfläche geklickt haben. Diese Aufgabe durch die Eindämmung von Browser-Spam.
Rückgängig machen nicht möglich
Schließlich ist es für Nutzende zu einfach, selbst in eine Sackgasse zu gelangen. Für Nutzer, die den Zugriff auf eine Funktion blockiert haben, auf das Drop-down-Menü mit den Website-Informationen, in dem sie entweder Zurücksetzen Berechtigungen oder aktivieren Sie die blockierten Berechtigungen wieder. Beide Optionen im schlimmsten ist eine vollständige Aktualisierung der Seite erforderlich, bis die aktualisierte Einstellung wirksam wird. In Websites gibt es keine Möglichkeit, Nutzern eine einfache Verknüpfung zum Ändern eines Berechtigungsstatus haben und den Nutzenden akribisch erklären müssen, wie ihre Einstellungen wie unten in den folgenden Google Maps-Karten angezeigt. Screenshot
Wenn die Berechtigung für die Nutzung entscheidend ist, z. B. der Mikrofonzugriff für ein Gerät App für Videokonferenzen zeigen störende Dialoge in Apps wie Google Meet an. die den Nutzer darüber informieren, wie er die Berechtigung aufheben kann.
Ein deklaratives <permission>
-Element
Um die in diesem Beitrag beschriebenen Probleme zu beheben, hat das Chrome-Berechtigungsteam
haben einen Ursprungstest für das neue HTML-Element <permission>
gestartet. Dieses
können Entwickler deklarativ um die Genehmigung bitten,
Unterbereich der leistungsstarken Funktionen, die für Websites zur Verfügung stehen. In der einfachsten Form
verwenden Sie ihn wie im folgenden Beispiel:
<permission type="camera" />
Es wird noch aktiv diskutiert
Festlegen, ob <permission>
ungültig sein soll
oder nicht. Ein void-Element ist ein selbstschließendes Element in HTML,
haben untergeordnete Knoten, d. h. in HTML bedeutet dies, dass sie kein End-Tag haben.
Das Attribut type
Die
type
enthält eine durch Leerzeichen getrennte Liste von Berechtigungen, die Sie anfordern. Bei
zum Zeitpunkt dieses Schreibens sind die zulässigen Werte 'camera'
, 'microphone'
und
camera microphone
(durch Leerzeichen getrennt). Dieses Element rendert
ähnlich wie bei einfachen
User-Agent-Stilen.
Das Attribut type-ext
Bei einigen Berechtigungen, die zusätzliche Parameter ermöglichen,
type-ext
akzeptiert durch Leerzeichen getrennte Schlüssel/Wert-Paare, wie z. B.
precise:true
für die Berechtigung zur Standortbestimmung.
Das Attribut lang
Der Schaltflächentext wird vom Browser bereitgestellt und sollte einheitlich sein.
können nicht direkt angepasst werden. Der Browser ändert die Sprache des Textes.
basierend auf der übernommenen Sprache des Dokuments oder der übergeordneten Elementkette oder
ein optionales
lang
. Das bedeutet, dass Entwickler die <permission>
nicht lokalisieren müssen
Elemente selbst. Wenn das <permission>
-Element über den Ursprung hinausgeht
in der Testphase werden möglicherweise mehrere Strings oder Symbole für jeden Berechtigungstyp unterstützt.
um die Flexibilität zu erhöhen. Wenn Sie an der Verwendung von <permission>
interessiert sind,
und einen bestimmten String oder ein bestimmtes Symbol benötigen. Wenden Sie sich an uns.
Verhalten
Wenn der Nutzer mit dem Element <permission>
interagiert, kann er
verschiedenen Phasen:
Wenn er eine Funktion zuvor noch nicht zugelassen hat, kann er sie bei jedem Besuch zulassen. für den aktuellen Besuch zulassen.
Wenn er die Funktion zuvor zugelassen hat, kann er sie entweder weiterhin zulassen wenn Sie es zulassen.
Wenn er zuvor eine Funktion nicht mehr zugelassen hat, kann er sie auch weiterhin nicht zulassen. diesmal erlauben.
Der Text des <permission>
-Elements wird automatisch auf Basis des
Status. Wenn beispielsweise die Berechtigung zur Nutzung einer Funktion erteilt wurde, wird der Text
um zu signalisieren,
dass die Funktion erlaubt ist. Wenn die Berechtigung zuerst gewährt werden muss,
Der Text ändert sich so, dass der Nutzer zur Nutzung der Funktion eingeladen wird. Vergleichen Sie die vorherigen
Screenshot mit dem folgenden Screenshot, um die beiden Zustände zu sehen.
CSS-Design
Damit Nutzer die Schaltfläche leicht als Oberfläche für den Zugriff auf leistungsstarke
Funktionen wird der Stil des <permission>
-Elements eingeschränkt. Wenn der Stil
in Ihrem Anwendungsfall nicht funktionieren, freuen wir uns auf Ihr Feedback
Wie und warum! Auch wenn nicht alle Designanforderungen erfüllt werden können, hoffen wir,
Sichere Möglichkeiten entdecken, um weitere Stile für das <permission>
-Element nach dem
Ursprungstest. In der folgenden Tabelle sind einige Einschränkungen aufgeführt
oder spezielle Regeln. Bei einem Verstoß gegen eine der Regeln
<permission>
Element wird deaktiviert und kann nicht mit ihm interagiert werden. Beliebig
mit dem System zu interagieren, führt zu Ausnahmen, die durch
JavaScript Die Fehlermeldung enthält weitere Details zur erkannten
verstoßen.
Attribut | Regeln |
---|---|
|
Kann verwendet werden, um die Text- bzw. Hintergrundfarbe festzulegen. Die muss der Kontrast zwischen den beiden Farben für eine klare lesbarer Text (Kontrastverhältnis von mindestens 3). Der Alphakanal muss 1 sein. |
|
Muss auf eine Länge von small und
xxxlarge . Andernfalls wird das Element deaktiviert. Zoomen
bei der Berechnung von font-size berücksichtigt. |
|
Negative Werte werden zu 0 korrigiert. |
margin (alle) |
Negative Werte werden zu 0 korrigiert. |
|
Werte unter 200 werden zu 200 korrigiert. |
|
Andere Werte als normal und italic sind
korrigiert zu normal . |
|
Werte über 0.5em werden korrigiert zu
0.5em Werte unter 0 werden korrigiert zu
0 |
|
Andere Werte als inline-block und none
wird zu inline-block korrigiert. |
|
Werte über 0.2em werden korrigiert zu
0.2em Werte unter -0.05em sind
korrigiert zu -0.05em . |
|
Hat den Standardwert 1em . Falls angegeben,
Höchstwert zwischen dem Standardwert und den angegebenen Werten
berücksichtigt werden. |
|
Hat den Standardwert 3em . Falls angegeben,
berechneter Mindestwert zwischen dem Standardwert und den angegebenen Werten
berücksichtigt werden. |
|
Hat den Standardwert fit-content . Falls angegeben,
den maximal berechneten Wert zwischen dem Standardwert und dem angegebenen
berücksichtigt werden. |
|
Hat einen Standardwert von dreimal fit-content . Wenn
angegeben, der berechnete Mindestwert zwischen dem Standardwert und dem
werden berücksichtigt. |
|
Wird nur wirksam, wenn height festgelegt ist auf
auto . In diesem Fall sind Werte über 1em gleich
zu 1em korrigiert, und padding-bottom wird
auf den Wert padding-top festgelegt. |
|
Wird nur wirksam, wenn width festgelegt ist auf
auto . In diesem Fall sind Werte über 5em gleich
zu 5em korrigiert, und padding-right wird
auf den Wert padding-left. festgelegt |
|
Verzerrende visuelle Effekte sind nicht zulässig. Momentan nutzen wir nur 2D-Verschiebung und proportionale Hochskalierung akzeptieren. |
Die folgenden CSS-Eigenschaften können wie gewohnt verwendet werden:
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
(und alleborder-*
-Properties)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-*
(mit der zuvor füroutline-offset
notierten Ausnahme)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
Darüber hinaus können alle logisch äquivalenten Attribute verwendet werden (z. B.
inline-size
entspricht width
), wobei die gleichen Regeln wie für die Person
Äquivalent.
Pseudoklassen
Es gibt zwei spezielle Pseudoklassen, die das Gestalten des <permission>
-Elements ermöglichen.
basierend auf dem Status:
:granted
: Die Pseudoklasse:granted
ermöglicht spezielle Stile, wenn eine Berechtigung wurde erteilt.:invalid
: Die Pseudoklasse:invalid
ermöglicht spezielle Stile, wenn die einen ungültigen Status hat, z. B. wenn es in einem ursprungsübergreifenden iFrame anfordern.
permission {
background-color: green;
}
permission:granted {
background-color: light-green;
}
/* Not supported during the origin trial. */
permission:invalid {
background-color: gray;
}
JavaScript-Ereignisse
Das <permission>
-Element ist für die gemeinsame Verwendung mit dem
Permissions API verfügbar.
Es gibt eine Reihe von Ereignissen, die überwacht werden können:
onpromptdismiss
: Dieses Ereignis wird ausgelöst, wenn die von Das Element wurde vom Nutzer geschlossen (z. B. durch Klicken auf Schaltfläche oder Klicken außerhalb der Aufforderung).onpromptaction
: Dieses Ereignis wird ausgelöst, wenn die von Das Element wurde aufgelöst, weil der Nutzer eine Aktion in der Aufforderung ausgeführt hat selbst. Das bedeutet nicht unbedingt, dass sich der Berechtigungsstatus geändert hat. eine Aktion durchgeführt haben, die den Status quo aufrechterhält (z. B. weiterhin eine Berechtigung erteilen).onvalidationstatuschange
: Dieses Ereignis wird ausgelöst, wenn das Element von von"valid"
bis"invalid"
. Das Element wird als"valid"
betrachtet, wenn das Element der Integrität des Signals vertraut, wenn der Nutzer darauf klickt."invalid"
, z. B. wenn das Element teilweise durch anderer HTML-Inhalte.
Sie können Ereignis-Listener für diese Ereignisse direkt inline im HTML-Code registrieren.
Code
(<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />
),
oder addEventListener()
für das <permission>
-Element verwenden, wie im
folgenden Beispiel.
<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>
Funktionserkennung
Wenn ein Browser ein HTML-Element nicht unterstützt, wird es nicht angezeigt. Das bedeutet, dass
Wenn Ihr HTML-Code das Element <permission>
enthält, passiert nichts, wenn das
dass der Browser das nicht weiß. Trotzdem möchten Sie vielleicht
über JavaScript Unterstützung suchen,
Um eine Berechtigungsaufforderung zu erstellen, die durch einen Klick auf eine
Normales <button>
-Format.
if ('HTMLPermissionElement' in window) {
// The `<permission>` element is supported.
}
Ursprungstest
Wenn du das <permission>
-Element auf deiner Website mit echten Nutzern ausprobieren möchtest,
registrieren Sie sich für den Ursprungstest.
Weitere Informationen finden Sie unter Erste Schritte mit Ursprungstests für
wie Sie Ihre Website für die Verwendung von Ursprungstests vorbereiten. Ursprungstest
von Chrome 126 bis 131 (19. Februar 2025).
Demo
Sehen Sie sich die Demo und den Quellcode auf GitHub an. Hier ist ein Screenshot der Verwendung in einem unterstützten Browser.
Feedback
Wir würden gerne von Ihnen erfahren, wie <permission>
bei Ihrem Anwendungsfall funktioniert. Gefühl
können Sie in einer der
Probleme im Repository oder reichen Sie einen neuen
eins. Öffentliche Signale im Repository für die
Mit dem <permission>
-Element können wir und andere Browser signalisieren, dass du an diesem Angebot interessiert bist
.
FAQ
- Inwiefern ist das besser als eine normale
<button>
in Kombination mit den Berechtigungen? API? Ein Klick auf ein<button>
ist eine Nutzergeste. Browser haben jedoch keine Möglichkeit, Prüfen Sie, ob eine Verbindung zur Anfrage für die Berechtigung besteht. Wenn die Nutzer auf ein<permission>
geklickt hat, kann der Browser sicher sein, dass der Klick tatsächlich die mit einer Berechtigungsanfrage zusammenhängen. So kann der Browser Abläufe vereinfachen, die sonst viel riskanter wäre. Beispielsweise kann es den Nutzenden erlauben, die Blockierung einer Berechtigung einfach rückgängig machen. - Was ist, wenn das
<permission>
-Element von anderen Browsern nicht unterstützt wird? Die Das<permission>
-Element kann als progressive Verbesserung verwendet werden. An nicht unterstützenden Browsern, kann ein klassischer Berechtigungsablauf verwendet werden. Beispiel: basierend auf dem Klick eines regulären<button>
. Das Berechtigungsteam die an einem Polyfill arbeiten. GitHub-Repository markieren um benachrichtigt zu werden, sobald sie bereit ist. - Wurde das mit anderen Browseranbietern besprochen? Das
<permission>
-Element bei W3C TPAC im Jahr 2023 in einem Breakout-Sitzung. Ich kann das Notizen zu öffentlichen Sitzungen. Das Chrome-Team hat außerdem von beiden Teams um formelle Standardpositionen gebeten. finden Sie im Abschnitt Weitere Informationen. Das<permission>
wird auch in anderen Browsern diskutiert. in der Hoffnung, sie zu standardisieren. - Sollte es sich tatsächlich um ein „void“-Element handeln? Es wird immer noch
aktiv diskutiert
Festlegen, ob
<permission>
ungültig sein soll oder nicht. Wenn du Feedback hast, beschreibe das Problem bitte kurz.
Weitere Informationen
Danksagungen
Dieses Dokument wurde geprüft von Balázs Engedy, Thomas Nguyen Penelope McLachlan Marian Harbach, David Warren und Rachel Andrew: