หน้านี้ได้รับการแปลโดย Cloud Translation API

ช่วงทดลองใช้จากต้นทางสำหรับองค์ประกอบใหม่ <สิทธิ์>

Thomas Steiner

การขอสิทธิ์เพื่อใช้ฟีเจอร์ที่มีประสิทธิภาพอย่างการเข้าถึงตำแหน่งในเว็บแอปทำได้หลายวิธีโดยที่จำเป็น วิธีการเหล่านี้มาพร้อมกับความท้าทายหลายประการ ซึ่งเป็นเหตุผลที่ทีมสิทธิ์ของ Chrome กำลังทดสอบเมธอดแบบประกาศใหม่ซึ่งเป็นองค์ประกอบ HTML <permission> โดยเฉพาะ องค์ประกอบนี้อยู่ในช่วงทดลองใช้จาก Chrome 126 และท้ายที่สุดแล้วเราหวังว่าจะทำให้เป็นมาตรฐานได้

วิธีการที่จำเป็นในการขอสิทธิ์

เมื่อเว็บแอปต้องการเข้าถึงฟีเจอร์ที่ทรงพลัง เว็บแอปจะต้องขอสิทธิ์ ตัวอย่างเช่น เมื่อ Google Maps ต้องการให้ผู้ใช้ใช้ตำแหน่งโดยใช้ Geolocation API เบราว์เซอร์จะแสดงข้อความแจ้งผู้ใช้โดยมักจะมีตัวเลือกให้จัดเก็บการตัดสินใจดังกล่าว นี่คือแนวคิดที่กำหนดไว้อย่างดีในข้อกำหนดเกี่ยวกับสิทธิ์

ถามแบบบอกเป็นนัยเมื่อใช้ครั้งแรกกับขอแบบบอกล่วงหน้าอย่างชัดแจ้ง

Geolocation API เป็น API ที่ทรงพลังและอาศัยแนวทางการใช้ครั้งแรกโดยปริยาย ตัวอย่างเช่น เมื่อแอปเรียกใช้เมธอด navigator.geolocation.getCurrentPosition() ข้อความแจ้งสิทธิ์จะปรากฏขึ้นโดยอัตโนมัติเมื่อเรียกใช้ครั้งแรก อีกตัวอย่างหนึ่งคือ navigator.mediaDevices.getUserMedia()

API อื่นๆ เช่น Notification API หรือ Device Orientation และ Motion API โดยทั่วไปจะมีวิธีขอสิทธิ์ที่ชัดเจนผ่านเมธอดแบบคงที่ เช่น Notification.requestPermission() หรือ DeviceMotionEvent.requestPermission()

หมายเหตุ: ที่ผ่านมาเรามีแผนที่จะขอสิทธิ์อีกทางหนึ่งคือเมธอด navigator.permissions.request() ที่ชัดเจน แต่มีการนำวิธีดังกล่าวออกจากPermissions API ตามการพูดคุยในฉบับที่ 83 ในที่เก็บของข้อกำหนดเฉพาะ คำถามเกี่ยวกับแนวทาง "ที่ถูกต้อง" ระหว่างวิธีการเหล่านี้ (โดยปริยายเมื่อมีการใช้และขอสิทธิ์อย่างชัดแจ้ง) เป็นหัวข้อที่คนพูดถึงกันมากโดยไม่มีคำตอบที่ชัดเจน

ความท้าทายในการขออนุญาต

สแปมสิทธิ์

ในอดีต เว็บไซต์จะเรียกใช้เมธอด เช่น navigator.mediaDevices.getUserMedia() หรือ Notification.requestPermission() แต่ก็เรียกใช้ navigator.geolocation.getCurrentPosition() ได้ทันทีเมื่อมีการโหลดเว็บไซต์ด้วย ข้อความแจ้งสิทธิ์จะปรากฏขึ้นก่อนที่ผู้ใช้จะโต้ตอบกับเว็บไซต์ บางครั้งกรณีนี้เรียกว่าสแปมสิทธิ์และส่งผลกระทบต่อทั้ง 2 วิธี กล่าวคือ การถามโดยปริยายเมื่อใช้ครั้งแรก ตลอดจนการขอสิทธิ์ล่วงหน้าอย่างชัดแจ้ง

ข้อความแจ้งสิทธิ์ใช้ไมโครโฟนแสดงขึ้นเมื่อโหลดเว็บไซต์

ข้อกำหนดด้านการลดการใช้เบราว์เซอร์และท่าทางสัมผัสของผู้ใช้

สแปมสิทธิ์ส่งผลให้ผู้ให้บริการเบราว์เซอร์ต้องใช้ท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่ม หรือการกดปุ่มลง ก่อนที่จะแสดงข้อความแจ้งสิทธิ์ ปัญหาของวิธีนี้คือเป็นเรื่องยากมากสำหรับเบราว์เซอร์ในการตัดสินใจว่าท่าทางสัมผัสของผู้ใช้ควรจะแสดงข้อความแจ้งสิทธิ์หรือไม่ บางทีผู้ใช้อาจแค่คลิกหน้านั้นอย่างหงุดหงิด ณ จุดใดก็ตาม เพราะหน้าเว็บใช้เวลาโหลดนานมาก หรือจริงๆ แล้วผู้ใช้คลิกปุ่มค้นหาฉัน บางเว็บไซต์ยังสามารถหลอกให้ผู้ใช้คลิกเนื้อหา เพื่อแสดงข้อความแจ้งได้ดียิ่งขึ้นด้วย

การผ่อนปรนชั่วคราวอีกวิธีคือเพิ่มการบรรเทาการละเมิดโดยทันที เช่น เริ่มจากการบล็อกฟีเจอร์ทั้งหมดโดยสมบูรณ์ หรือการแสดงข้อความแจ้งสิทธิ์ในลักษณะที่ไม่เป็นโมดัลและรบกวนน้อยกว่านี้

เบราว์เซอร์ Chrome แสดง

บริบทเกี่ยวกับสิทธิ์

ความท้าทายอีกอย่างหนึ่งโดยเฉพาะบนหน้าจอขนาดใหญ่ คือการแสดงข้อความแจ้งสิทธิ์โดยทั่วไป ซึ่งก็คือเหนือเส้นตาย ซึ่งอยู่นอกพื้นที่หน้าต่างเบราว์เซอร์ที่แอปสามารถไปถึงได้ เราทราบดีว่าผู้ใช้จะพลาดข้อความแจ้งที่ด้านบนของหน้าต่างเบราว์เซอร์เมื่อคลิกปุ่มที่ด้านล่างของหน้าต่าง ปัญหานี้มักรุนแรงขึ้นอีกเมื่อเกิดการบรรเทาปัญหาสแปมของเบราว์เซอร์

Google Maps พร้อมข้อความขอสิทธิ์เข้าถึงตำแหน่งเปิดอยู่ ปุ่มการเข้าถึงตําแหน่งที่เรียกให้ข้อความแจ้งอยู่ไกลออกไป

เลิกทำได้อย่างง่ายดาย

สุดท้าย ผู้ใช้ไปยังทางตันได้ง่ายเกินไป ตัวอย่างเช่น เมื่อผู้ใช้บล็อกการเข้าถึงฟีเจอร์หนึ่ง ผู้ใช้จำเป็นต้องคำนึงถึงเมนูแบบเลื่อนลงของข้อมูลเว็บไซต์ ซึ่งเป็นที่ที่สามารถรีเซ็ตสิทธิ์หรือเปิดสิทธิ์ที่ถูกบล็อกอีกครั้ง ทั้ง 2 ตัวเลือกในกรณีที่แย่ที่สุดจะต้องมีการโหลดหน้าเว็บซ้ำทั้งหมดจนกว่าการตั้งค่าที่อัปเดตจะมีผล เว็บไซต์ไม่มีทางลัดง่ายๆ เพื่อให้ผู้ใช้เปลี่ยนสถานะสิทธิ์ที่มีอยู่ได้ และต้องอธิบายอย่างละเอียดให้ผู้ใช้ทราบถึงวิธีเปลี่ยนการตั้งค่า ดังที่แสดงไว้ที่ด้านล่างของภาพหน้าจอ Google Maps ต่อไปนี้

การควบคุมเว็บไซต์ Chrome บน Google Maps เพื่อเพิกถอนสิทธิ์

หากสิทธิ์คือหัวใจสำคัญของประสบการณ์การใช้งาน ตัวอย่างเช่น การเข้าถึงไมโครโฟนสำหรับแอปพลิเคชันการประชุมทางวิดีโอ แอปต่างๆ อย่าง Google Meet จะแสดงกล่องโต้ตอบที่รบกวนซึ่งจะแนะนำวิธีเลิกบล็อกสิทธิ์ให้กับผู้ใช้

วิธีการของ Google Meet เกี่ยวกับวิธีเปิดตัวควบคุมเว็บไซต์ Chrome

องค์ประกอบ `<permission>` แบบประกาศ

ทีมสิทธิ์ของ Chrome ได้เปิดตัวช่วงทดลองใช้จากต้นทางสำหรับองค์ประกอบ HTML ใหม่ <permission> เพื่อแก้ไขปัญหาต่างๆ ที่อธิบายไว้ในโพสต์นี้ องค์ประกอบนี้ช่วยให้นักพัฒนาซอฟต์แวร์ขออนุญาตใช้ชุดย่อยของฟีเจอร์ที่มีประสิทธิภาพซึ่งมีให้ใช้งานในเว็บไซต์ได้ ด้วยรูปแบบที่เรียบง่ายที่สุด คุณสามารถใช้พารามิเตอร์ตามตัวอย่างต่อไปนี้

<permission type="camera" />

และยังคงมีการถกเถียงกันอย่างต่อเนื่องว่า <permission> ควรเป็นองค์ประกอบที่เป็นโมฆะหรือไม่ องค์ประกอบที่เป็นโมฆะคือองค์ประกอบที่ปิดตัวเองได้ใน HTML ซึ่งจะไม่มีโหนดย่อยใดๆ ซึ่งใน HTML หมายความว่าองค์ประกอบนั้นอาจไม่มีแท็กปิดท้าย

แอตทริบิวต์ `type`

แอตทริบิวต์ type มีรายการสิทธิ์ที่คุณร้องขอซึ่งคั่นด้วยการเว้นวรรค ในขณะที่เขียนบทความนี้ ค่าที่อนุญาตคือ 'camera', 'microphone' และ camera microphone (คั่นด้วยการเว้นวรรค) องค์ประกอบนี้โดยค่าเริ่มต้นจะแสดงผลคล้ายกับปุ่มที่มีการจัดรูปแบบ User Agent ของ Barebones

ปุ่มองค์ประกอบสิทธิ์ต่างๆ ที่มีกล้อง ไมโครโฟน และกล้อง รวมถึงสิทธิ์เข้าถึงไมโครโฟน

แอตทริบิวต์ `type-ext`

สำหรับสิทธิ์บางอย่างที่อนุญาตให้ใช้พารามิเตอร์เพิ่มเติม แอตทริบิวต์ type-ext จะยอมรับคู่คีย์-ค่าที่คั่นด้วยการเว้นวรรค เช่น precise:true สำหรับสิทธิ์เข้าถึงตำแหน่งทางภูมิศาสตร์

แอตทริบิวต์ `lang`

ข้อความบนปุ่มมาจากเบราว์เซอร์และควรสอดคล้องกัน ดังนั้นจึงไม่สามารถปรับแต่งได้โดยตรง เบราว์เซอร์จะเปลี่ยนภาษาของข้อความตามภาษาที่รับช่วงมาจากเอกสารหรือเชนองค์ประกอบระดับบน หรือแอตทริบิวต์ lang ที่ไม่บังคับ ซึ่งหมายความว่านักพัฒนาซอฟต์แวร์ไม่จำเป็นต้องแปลองค์ประกอบ <permission> ด้วยตนเอง หากองค์ประกอบ <permission> ดำเนินการนอกขั้นตอนช่วงทดลองใช้จากต้นทาง ระบบอาจรองรับสตริงหรือไอคอนหลายรายการสำหรับสิทธิ์แต่ละประเภทเพื่อเพิ่มความยืดหยุ่น หากสนใจใช้องค์ประกอบ <permission> และต้องการใช้สตริงหรือไอคอนที่เฉพาะเจาะจง โปรดติดต่อเรา

ลักษณะการทำงาน

เมื่อโต้ตอบกับองค์ประกอบ <permission> ผู้ใช้จะหมุนเวียนผ่านขั้นตอนต่างๆ ได้ดังนี้

หากไม่เคยอนุญาตฟีเจอร์ใดมาก่อน ผู้ใช้อาจอนุญาตให้แสดงฟีเจอร์ในทุกๆ การเข้าชม หรืออนุญาตให้ใช้ฟีเจอร์สำหรับการเข้าชมปัจจุบันก็ได้
หากเคยอนุญาตฟีเจอร์นี้มาก่อน ผู้ใช้อาจอนุญาตต่อไปหรือจะหยุดอนุญาตก็ได้
หากเคยไม่อนุญาตฟีเจอร์ใดมาก่อน ผู้ใช้จะไม่สามารถอนุญาตหรืออนุญาตฟีเจอร์ดังกล่าวได้ในครั้งนี้

ข้อความขององค์ประกอบ <permission> จะอัปเดตตามสถานะโดยอัตโนมัติ เช่น หากได้รับสิทธิ์ให้ใช้ฟีเจอร์ ข้อความจะเปลี่ยนไปเพื่อบอกว่าฟีเจอร์นั้นได้รับอนุญาต หากต้องให้สิทธิ์ก่อน ข้อความจะเปลี่ยนไปเพื่อเชิญผู้ใช้ให้ใช้ฟีเจอร์นี้ เปรียบเทียบภาพหน้าจอก่อนหน้านี้กับภาพหน้าจอต่อไปนี้เพื่อดูสถานะทั้ง 2 แบบ

ปุ่มสิทธิ์ที่มีข้อความ

การออกแบบ CSS

ระบบจะจำกัดการจัดรูปแบบขององค์ประกอบ <permission> เพื่อให้ผู้ใช้จดจำปุ่มว่าเป็นแพลตฟอร์มสำหรับเข้าถึงความสามารถอันทรงพลังได้อย่างง่ายดาย หากข้อจำกัดการจัดรูปแบบใช้ไม่ได้กับกรณีการใช้งานของคุณ เรายินดีรับฟังเกี่ยวกับวิธีและเหตุผล แม้ว่าจะไม่สามารถรองรับความต้องการด้านการจัดรูปแบบได้ทั้งหมด แต่เราหวังว่าจะค้นพบวิธีที่ปลอดภัยในการอนุญาตให้มีการจัดรูปแบบองค์ประกอบ <permission> มากขึ้นหลังจากช่วงทดลองใช้จากต้นทาง ตารางต่อไปนี้แสดงรายละเอียดของที่พักบางแห่งที่มีข้อจำกัดหรือกฎพิเศษ ในกรณีที่ละเมิดกฎใดก็ตาม องค์ประกอบ <permission> จะถูกปิดใช้และโต้ตอบไม่ได้ การพยายามโต้ตอบจะทำให้มีข้อยกเว้นที่ JavaScript ตรวจจับได้ ข้อความแสดงข้อผิดพลาดจะมีรายละเอียดเพิ่มเติมเกี่ยวกับการละเมิดที่ตรวจพบ

พร็อพเพอร์ตี้	กฎ
`color` `background-color`	สามารถใช้เพื่อกำหนดข้อความและสีพื้นหลังตามลำดับ ความคมชัดระหว่าง 2 สีต้องเพียงพอเพื่อให้อ่านข้อความได้อย่างชัดเจน (อัตราส่วนคอนทราสต์อย่างน้อย 3) ช่องสีอัลฟาต้องเป็น 1
`font-size` `zoom`	ต้องตั้งค่าภายในค่าที่เทียบเท่ากับ `small` และ `xxxlarge` องค์ประกอบจะถูกปิดใช้ Zoom จะได้รับการพิจารณาเมื่อคำนวณ `font-size`
`outline-offset`	ค่าติดลบจะถูกแก้ไขเป็น `0`
`margin` (ทั้งหมด)	ค่าติดลบจะถูกแก้ไขเป็น `0`
`font-weight`	ระบบจะแก้ไขค่าภายใต้ `200` เป็น `200`
`font-style`	ค่าอื่นที่ไม่ใช่ `normal` และ `italic` จะได้รับการแก้ไขเป็น `normal`
`word-spacing`	ค่าที่เกิน `0.5em` จะถูกแก้ไขเป็น `0.5em` ระบบจะแก้ไขค่าภายใต้ `0` เป็น `0`
`display`	ค่าอื่นที่ไม่ใช่ `inline-block` และ `none` จะได้รับการแก้ไขเป็น `inline-block`
`letter-spacing`	ค่าที่เกิน `0.2em` จะถูกแก้ไขเป็น `0.2em` ระบบจะแก้ไขค่าที่ต่ำกว่า `-0.05em` เป็น `-0.05em`
`min-height`	จะมีค่าเริ่มต้นเป็น `1em` หากระบุ ระบบจะพิจารณามูลค่าที่คำนวณสูงสุดระหว่างค่าเริ่มต้นและค่าที่ระบุ
`max-height`	จะมีค่าเริ่มต้นเป็น `3em` หากระบุ ระบบจะพิจารณามูลค่าที่คำนวณขั้นต่ำระหว่างค่าเริ่มต้นและค่าที่ระบุ
`min-width`	จะมีค่าเริ่มต้นเป็น `fit-content` หากระบุ ระบบจะพิจารณามูลค่าที่คำนวณสูงสุดระหว่างค่าเริ่มต้นและค่าที่ระบุ
`max-width`	จะมีค่าเริ่มต้นเป็น 3 คูณ `fit-content` หากระบุ ระบบจะพิจารณาค่าที่คำนวณขั้นต่ำระหว่างค่าเริ่มต้นและค่าที่ระบุ
`padding-top`	จะมีผลก็ต่อเมื่อตั้งค่า `height` เป็น `auto` ในกรณีนี้ ค่าที่เกิน `1em` จะได้รับการแก้ไขเป็น `1em` และกำหนด `padding-bottom` เป็นค่า `padding-top`
`padding-left`	จะมีผลก็ต่อเมื่อตั้งค่า `width` เป็น `auto` ในกรณีนี้ ค่าที่เกิน `5em` จะได้รับการแก้ไขเป็น `5em` และกำหนด `padding-right` เป็นค่า `padding-left.`
`transform`	ไม่อนุญาตให้เอฟเฟกต์ภาพที่บิดเบี้ยว ปัจจุบันเรายอมรับเฉพาะการแปลแบบ 2 มิติและการปรับขนาดตามสัดส่วน

คุณใช้คุณสมบัติ CSS ต่อไปนี้ได้ตามปกติ

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 (และพร็อพเพอร์ตี้ 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-* (ยกเว้นที่ระบุไว้ก่อนหน้านี้สำหรับ 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

นอกจากนี้ คุณยังใช้พร็อพเพอร์ตี้เทียบเท่าในเชิงตรรกะทั้งหมดได้ (เช่น inline-size เทียบเท่ากับ width) โดยใช้กฎเดียวกันกับค่าที่เท่ากัน

คลาสเทียม

มีคลาสเทียมพิเศษ 2 คลาสที่ช่วยให้จัดรูปแบบองค์ประกอบ <permission> ตามสถานะได้ ดังนี้

:granted: คลาสเทียม :granted อนุญาตให้มีการจัดรูปแบบพิเศษเมื่อได้รับสิทธิ์
:invalid: คลาส Pseudo ของ :invalid อนุญาตให้มีการจัดรูปแบบพิเศษเมื่อองค์ประกอบอยู่ในสถานะที่ไม่ถูกต้อง เช่น เมื่อแสดงใน iframe แบบข้ามต้นทาง

permission {
  background-color: green;
}

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

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

เหตุการณ์ JavaScript

องค์ประกอบ <permission> มีไว้เพื่อใช้ร่วมกับ Permissions API มีหลายเหตุการณ์ที่สามารถฟังได้ เช่น

onpromptdismiss: เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้ปิดข้อความแจ้งสิทธิ์ที่ทริกเกอร์โดยองค์ประกอบ (เช่น การคลิกปุ่มปิดหรือการคลิกนอกข้อความแจ้ง)

หมายเหตุ: ระหว่างช่วงทดลองใช้จากต้นทาง ซึ่งจะมีชื่อว่า ondismiss แต่ชื่อสุดท้ายจะเป็น onpromptdismiss คุณตรวจจับชื่อเหตุการณ์ที่รองรับได้โดยใช้ ตัวอย่างเช่น 'ondismiss' in HTMLPermissionElement.prototype
onpromptaction: เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้ดำเนินการบางอย่างกับข้อความแจ้งเกี่ยวกับสิทธิ์ที่องค์ประกอบเรียกใช้ ซึ่งอาจไม่ได้หมายความว่าสถานะสิทธิ์มีการเปลี่ยนแปลงเสมอไป ผู้ใช้อาจดำเนินการที่รักษาสถานภาพปัจจุบันไว้ (เช่น ยังคงดำเนินการเพื่อให้สิทธิ์)

หมายเหตุ: ระหว่างช่วงทดลองใช้จากต้นทาง ซึ่งจะมีชื่อว่า onresolve แต่ชื่อสุดท้ายจะเป็น onpromptaction คุณตรวจจับชื่อเหตุการณ์ที่รองรับได้โดยใช้ ตัวอย่างเช่น 'onresolve' in HTMLPermissionElement.prototype
onvalidationstatuschange: เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบเปลี่ยนจาก "valid" เป็น "invalid" องค์ประกอบจะถือว่า "valid" เมื่อเบราว์เซอร์เชื่อถือความสมบูรณ์ของสัญญาณหากผู้ใช้คลิกองค์ประกอบ และ "invalid" ในกรณีอื่นๆ เช่น เมื่อองค์ประกอบถูกเนื้อหา HTML อื่นๆ บังอยู่บางส่วน

คุณลงทะเบียน Listener เหตุการณ์สำหรับเหตุการณ์เหล่านี้ได้โดยตรงในบรรทัดในโค้ด HTML (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />) หรือใช้ addEventListener() บนองค์ประกอบ <permission> ดังที่แสดงในตัวอย่างต่อไปนี้

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

การตรวจหาฟีเจอร์

หากเบราว์เซอร์ไม่สนับสนุนองค์ประกอบ HTML เบราว์เซอร์จะไม่แสดงองค์ประกอบนั้น ซึ่งหมายความว่าหากคุณมีเอลิเมนต์ <permission> ในโค้ด HTML จะไม่มีอะไรเกิดขึ้นหากเบราว์เซอร์ไม่ทราบ คุณอาจยังคงต้องการตรวจหาการรองรับโดยใช้ JavaScript เช่น เพื่อสร้างข้อความแจ้งเกี่ยวกับสิทธิ์ที่ทริกเกอร์ผ่านการคลิก <button> ปกติ

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