ใช้พื้นที่แถบชื่อข้างตัวควบคุมหน้าต่างเพื่อทำให้ PWA รู้สึกเหมือนแอปมากขึ้น
หากจำบทความเรื่องทําให้ PWA รู้สึกเหมือนแอปมากขึ้นได้ คุณอาจจำได้ว่าเป็นวิธีที่ผมพูดถึงการปรับแต่งแถบชื่อของแอปว่าเป็นกลยุทธ์ในการสร้างประสบการณ์การใช้งานที่คล้ายกับแอปมากขึ้น นี่เป็นภาพตัวอย่างของแอป พอดแคสต์ macOS
ตอนนี้คุณอาจจะอยากปฏิเสธเพราะพอดแคสต์เป็นแอป macOS เฉพาะแพลตฟอร์มที่ทำงานในเบราว์เซอร์ไม่ได้ คุณจึงทำสิ่งต่างๆ ที่ต้องการได้โดยไม่จำเป็นต้องเล่นตามกฎของเบราว์เซอร์ จริง แต่ข่าวดีก็คือฟีเจอร์การวางซ้อนการควบคุมหน้าต่างซึ่งเป็นหัวข้อของบทความนี้จะช่วยให้คุณสร้างอินเทอร์เฟซผู้ใช้ที่คล้ายกันสำหรับ PWA ได้ในเร็วๆ นี้
คอมโพเนนต์การวางซ้อนการควบคุมหน้าต่าง
การวางซ้อนการควบคุมหน้าต่างประกอบด้วยฟีเจอร์ย่อย 4 รายการดังนี้
- ค่า
"window-controls-overlay"
สำหรับช่อง"display_override"
ในไฟล์ Manifest ของเว็บแอป - ตัวแปรสภาพแวดล้อม CSS
titlebar-area-x
,titlebar-area-y
,titlebar-area-width
และtitlebar-area-height
- การกำหนดมาตรฐานของพร็อพเพอร์ตี้ CSS ที่เป็นกรรมสิทธิ์ก่อนหน้านี้
-webkit-app-region
เป็นพร็อพเพอร์ตี้app-region
เพื่อกำหนดภูมิภาคที่ลากได้ในเนื้อหาเว็บ - กลไกในการค้นหาและแก้ไขปัญหารอบๆ หน้าต่างจะควบคุมภูมิภาคผ่านสมาชิก
windowControlsOverlay
ของwindow.navigator
การวางซ้อนการควบคุมหน้าต่างคืออะไร
พื้นที่แถบชื่อหมายถึงพื้นที่ว่างทางด้านซ้ายหรือด้านขวาของตัวควบคุมหน้าต่าง (ซึ่งก็คือปุ่มสำหรับย่อ ขยาย ปิด ฯลฯ) และมักจะมีชื่อของแอปพลิเคชันอยู่ หน้าต่าง การวางซ้อนการควบคุมช่วยให้เ��็บแอปพลิเคชันแบบโปรเกรสซีฟ (PWA) ให้ความรู้สึกเหมือนแอปมากขึ้นโดยสลับแถบชื่อความกว้างเต็มขนาดที่มีอยู่เป็นการวางซ้อนขนาดเล็กที่มีการควบคุมหน้าต่าง วิธีนี้ช่วยให้นักพัฒนาซอฟต์แวร์วางเนื้อหาที่กำหนดเองในส่วนที่ก่อนหน้านี้ใช้พื้นที่แถบชื่อที่เบราว์เซอร์ควบคุมได้
สถานะปัจจุบัน
ขั้นตอน | สถานะ |
---|---|
1. สร้างข้อความอธิบาย | เสร็จสมบูรณ์ |
2. สร้างฉบับร่างเริ่มต้นของข้อกำหนด | เสร็จสมบูรณ์ |
3. รวบรวมความคิดเห็นและทำซ้ำเกี่ยวกับการออกแบบ | กำลังดำเนินการ |
4. ช่วงทดลองใช้จากต้นทาง | เสร็จสมบูรณ์ |
5. เปิดตัว | เสร็จสมบูรณ์ (ใน Chromium 104) |
วิธีใช้การวางซ้อนการควบคุมหน้าต่าง
กำลังเพิ่ม window-controls-overlay
ลงในไฟล์ Manifest ของเว็บแอป
Progressive Web App สามารถเลือกใช้การวางซ้อนการควบคุมหน้าต่างได้โดยการเพิ่ม "window-controls-overlay"
เป็นสมาชิกหลักของ "display_override"
ในไฟล์ Manifest ของเว็บแอป โดยทำดังนี้
{
"display_override": ["window-controls-overlay"]
}
การวางซ้อนการควบคุมหน้าต่างจะปรากฏเฉพาะเมื่อเป็นไปตามเงื่อนไขทั้งหมดต่อไปนี้
- แอปจะไม่ได้เปิดในเบราว์เซอร์ แต่อยู่ในหน้าต่าง PWA แยกต่างหาก
- ไฟล์ Manifest มี
"display_override": ["window-controls-overlay"]
(ค่าอื่นจะได้รับอนุญาตหลังจากนั้น) - PWA กำลังทำงานในระบบปฏิบัติการเดสก์ท็อป
- ต้นทางปัจจุบันตรงกับต้นทางที่ติดตั้ง PWA
ผลที่ตามมาคือพื้นที่แถบชื่อว่างเปล่าพร้อมด้วยตัวควบคุมหน้าต่างปกติทางด้านซ้ายหรือ��วา ขึ้นอยู่กับระบบปฏิบัติการ
การย้ายเนื้อหาไปยังแถบชื่อ
ตอนนี้ในแถบชื่อมีพื้นที่ว่างแล้ว คุณสามารถย้ายบางสิ่งไปที่นั่นได้ สำหรับบทความนี้ ฉันสร้าง PWA สำหรับเนื้อหาแนะนำของ Wikimedia ฟีเจอร์ที่มีประโยชน์สำหรับแอปนี้อาจเป็นการค้นหาคำในชื่อบทความ HTML สำหรับฟีเจอร์การค้นหาจะมีลักษณะดังนี้
<div class="search">
<img src="logo.svg" alt="Wikimedia logo." width="32" height="32" />
<label>
<input type="search" />
Search for words in articles
</label>
</div>
หากต้องการย้าย div
นี้ขึ้นไปยังแถบชื่อ ต้องใช้ CSS บางรายการดังนี้
.search {
/* Make sure the `div` stays there, even when scrolling. */
position: fixed;
/**
* Gradient, because why not. Endless opportunities.
* The gradient ends in `#36c`, which happens to be the app's
* `<meta name="theme-color" content="#36c">`.
*/
background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
/* Use the environment variable for the left anchoring with a fallback. */
left: env(titlebar-area-x, 0);
/* Use the environment variable for the top anchoring with a fallback. */
top: env(titlebar-area-y, 0);
/* Use the environment variable for setting the width with a fallback. */
width: env(titlebar-area-width, 100%);
/* Use the environment variable for setting the height with a fallback. */
height: env(titlebar-area-height, 33px);
}
ดูผลกระทบของโค้ดนี้ได้ในภาพหน้าจอด้านล่าง แถบชื่อตอบสนองอย่างสมบูรณ์ เมื่อคุณปรับขนาดหน้าต่าง PWA แถบชื่อจะโต้ตอบราวกับว่าสร้างขึ้นจา��������้อหา HTML ปกติ ซึ่งอันที่จริงแล้วก็คือ
การระบุว่าส่วนใดของแถบชื่อที่สามารถลากได้
แม้ว่าภาพหน้าจอด้านบนจะแสดงว่าคุณดำเนินการเสร็จแล้ว แต่ภาพเหล่านั้นยังไม่เสร็จ คุณจะลากหน้าต่าง PWA ไม่ได้อีกต่อไป (นอกเหนือจากพื้นที่ขนาดเล็กมาก) เนื่องจากปุ่มควบคุมหน้าต่างไม่ใช่พื้นที่สำหรับลาก และส่วนที่เหลือของแถบชื่อประกอบด้วยวิดเจ็ตการค้นหา คุณแก้ไขปัญหานี้โดยใช้พร็อพเพอร์ตี้ CSS app-region
ที่มีค่าเป็น drag
ในกรณีคอนกรีต คุณสามารถทำให้ทุกอย่างนอกเหนือจากองค์ประกอบ input
ลากได้
/* The entire search `div` is draggable… */
.search {
-webkit-app-region: drag;
app-region: drag;
}
/* …except for the `input`. */
input {
-webkit-app-region: no-drag;
app-region: no-drag;
}
เมื่อใช้ CSS นี้ ผู้ใช้จะลากหน้าต่างแอปได้ตามปกติโดยลาก div
, img
หรือ label
มีเพียงองค์ประกอบ input
เท่านั้นที่เป็นอินเทอร์แอกทีฟ ระบบจึงป้อนคำค้นหาได้
การตรวจหาฟีเจอร์
ระบบจะตรวจจับการรองรับการวางซ้อนการควบคุมหน้าต่างได้โดยการทดสอบการมีอยู่ของ windowControlsOverlay
:
if ('windowControlsOverlay' in navigator) {
// Window Controls Overlay is supported.
}
กำลังค้นหาภูมิภาคการควบคุมหน้าต่างด้วย windowControlsOverlay
ที่ผ่านมา โค้ดมีปัญหา 1 อย่างคือ ในบางแพลตฟอร์ม ตัวควบคุมหน้าต่างจะอยู่ทางขวา
บนที่อื่น การควบคุมหน้าต่างจะอยู่ทางซ้าย และและทำให้เหตุการณ์แย่ลง เมนู Chrome "จุด 3 จุด" จะเปลี่ยนตำแหน่งเช่นกันโดยจะขึ้นอยู่กับแพลตฟอร์ม ซึ่งหมายความว่าคุณจะต้องปรับภาพพื้นหลังแบบไล่ระดับสีแบบเส้นตรงแบบไดนามิกเพื่อให้แสดงผลจาก #131313
→maroon
หรือ maroon
→#131313
→maroon
เพื่อให้กลมกลืนไปกับสีพื้นหลังmaroon
ของแถบชื่อซึ่งกำหนดโดย<meta name="theme-color" content="maroon">
ซึ่งทำได้ด้วยการค้นหา API ของ getTitlebarAreaRect()
ในพร็อพเพอร์ตี้ navigator.windowControlsOverlay
if ('windowControlsOverlay' in navigator) {
const { x } = navigator.windowControlsOverlay.getTitlebarAreaRect();
// Window controls are on the right (like on Windows).
// Chrome menu is left of the window controls.
// [ windowControlsOverlay___________________ […] [_] [■] [X] ]
if (x === 0) {
div.classList.add('search-controls-right');
}
// Window controls are on the left (like on macOS).
// Chrome menu is right of the window controls overlay.
// [ [X] [_] [■] ___________________windowControlsOverlay [⋮] ]
else {
div.classList.add('search-controls-left');
}
} else {
// When running in a non-supporting browser tab.
div.classList.add('search-controls-right');
}
แทนที่จะมีภาพพื้นหลังในกฎ CSS ของคลาส .search
โดยตรง (เหมือนก่อนหน้านี้) ตอนนี้โค้ดที่แก้ไขแล้วจะใช้คลาส 2 คลาสที่โค้ดด้านบนตั้งค่าไว้แบบไดนามิก
/* For macOS: */
.search-controls-left {
background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);
}
/* For Windows: */
.search-controls-right {
background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
}
กำลังกำหนดว่าจะแสดงการวางซ้อนการควบคุมหน้าต่างหรือไม่
การวางซ้อนการควบคุมหน้าต่างจะไม่ปรากฏในพื้นที่แถบชื่อในทุกสถานการณ์ แม้ว่าโดยปกติแล้วจะไม่ปรากฏในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์การวางซ้อนการควบคุมหน้าต่าง แต่ฟีเจอร์ดังกล่าวก็จะไม่ปรากฏขึ้นเมื่อ PWA ที่เป็นปัญหาทำงานในแท็บ หากต้องการตรวจจับสถานการณ์นี้ ให้ค้นหาพร็อพเพอร์ตี้ visible
ของ windowControlsOverlay
ดังนี้
if (navigator.windowControlsOverlay.visible) {
// The window controls overlay is visible in the title bar area.
}
หรือคุณจะใช้คิวรี่สื่อ display-mode
ใน JavaScript และ/หรือ CSS ก็ได้ ดังนี้
// Create the query list.
const mediaQueryList = window.matchMedia('(display-mode: window-controls-overlay)');
// Define a callback function for the event listener.
function handleDisplayModeChange(mql) {
// React on display mode changes.
}
// Run the display mode change handler once.
handleDisplayChange(mediaQueryList);
// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener('change', handleDisplayModeChange);
@media (display-mode: window-controls-overlay) {
/* React on display mode changes. */
}
การได้รับแจ้งเกี่ยวกับการเปลี่ยนแปลงรูปทรงเรขาคณิต
การค้นหาเกี่ยวกับพื้นที่ที่ซ้อนทับสำหรับการควบคุมหน้าต่างด้วย getTitlebarAreaRect()
ก็เพียงพอสำหรับการดำเนินการแบบครั้งเดียว เช่น การตั้งค่าภาพพื้นหลังที่ถูกต้องตามตำแหน่งของการควบคุมหน้าต่าง แต่ในกรณีอื่นๆ อาจจำเป็นต้องมีการควบคุมแบบละเอียดมากกว่านี้ ตัวอย่างเช่น กรณีการใช้งานที่เป็นไปได้คือการปรับการวางซ้อนการควบคุมหน้าต่างตามพื้นที่ว่าง และเพิ่มมุกตลกในการวางซ้อนการควบคุมหน้าต่างเมื่อมีที่ว่างเพียงพอ
คุณสามารถรับการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงเรขาคณิตได้โดยการสมัครรับข้อมูลจาก navigator.windowControlsOverlay.ongeometrychange
หรือโดยการตั้งค่า Listener เหตุการณ์สำหรับเหตุการณ์ geometrychange
เหตุการณ์นี้จะเริ่มทํางานเฉพาะเมื่อมองเห็นการวางซ้อนการควบคุมหน้าต่างเท่านั้น ซึ่งก็คือเมื่อ navigator.windowControlsOverlay.visible
คือ true
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
if ('windowControlsOverlay' in navigator) {
navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
span.hidden = e.titlebarAreaRect.width < 800;
}, 250);
}
แทนที่จะกำหนดฟังก์ชันให้กับ ongeometrychange
คุณยังสามารถเพิ่ม Listener เหตุการณ์ไปยัง windowControlsOverlay
ตามที่ระบุด้านล่างได้ด้วย อ่านความแตกต่างระหว่างเครื่องมือทั้งสองได้บน MDN
navigator.windowControlsOverlay.addEventListener(
'geometrychange',
debounce((e) => {
span.hidden = e.titlebarAreaRect.width < 800;
}, 250),
);
ความเข้ากันได้เมื่อเรียกใช้ในแท็บและเบราว์เซอร์ที่ไม่รองรับ
โดยควรพิจารณา 2 กรณีดังนี้
- กรณีที่แอปกำลังทำงานในเบราว์เซอร์ที่รองรับการวางซ้อนการควบคุมหน้าต่าง แต่มีการใช้แอปในแท็บเบราว์เซอร์
- กรณีที่แอปกำลังทำงานในเบราว์เซอร์ที่ไม่รองรับการวางซ้อนการควบคุมหน้าต่าง
ในทั้ง 2 กรณี โดยค่าเริ่มต้น HTML ที่สร้างขึ้นสำหรับการวางซ้อนการควบคุมหน้าต่างจะแสดงในบรรทัดเหมือนกับเนื้อหา HTML ปกติ และค่าสำรองของตัวแปร env()
จะเริ่มต้นสำหรับการจัดตำแหน่ง ในเบราว์เซอร์ที่รองรับ คุณยังสามารถเลือกที่จะไม่แสดง HTML ที่กำหนดสำหรับการวางซ้อนการควบคุมหน้าต่างได้โดยตรวจสอบพร็อพเพอร์ตี้ visible
ของโฆษณาซ้อนทับ และหากรายงาน false
ก็ให้ซ่อนเนื้อหา HTML นั้น
โปรดทราบว่าเบราว์เซอร์ที่ไม่รองรับจะไม่พิจารณาพร็อพเพอร์ตี้ไฟล์ Manifest ของเว็บแอป "display_override"
เลย หรือไม่รู้จัก "window-controls-overlay"
ดังนั้นจึงใช้ค่าถัดไปที่เป็นไปได้ตามเชนโฆษณาสำรอง เช่น "standalone"
ข้อควรพิจารณาเกี่ยวกับ UI
ถึงแม้คุณอาจจะอยากดู แต่เราไม่แนะนำให้สร้างเมนูแบบเลื่อนลงแบบคลาสสิกในพื้นที่การวางซ้อนการควบคุมหน้าต่าง การทำเช่นนี้เป็นการละเมิดหลักเกณฑ์การออกแบบใน macOS ซึ่งเป็นแพลตฟอร์มที่ผู้ใช้คาดหวังว่าแถบเมนู (ทั้งที่ระบบมีให้และแบบกำหนดเอง) ที่ด้านบนของหน้าจอ
หากแอปนำเสนอประสบการณ์การใช้งานแบบเต็มหน้าจอ ให้คำนึงว่าควรที่จะใส่การวางซ้อนการควบคุมหน้าต่างเป็นส่วนหนึ่งของมุมมองแบบเต็มหน้าจอหร��อไม่ คุณอาจต้องการจัดเรียงเลย์เอาต์ใหม่เมื่อเหตุการณ์ onfullscreenchange
เริ่มทำงาน
ข้อมูลประชากร
ฉันได้สร้างเวอร์ชันสาธิต ซึ่งคุณสามารถใช้ในเบราว์เซอร์ต่างๆ ที่มีการรองรับและไม่รองรับ รวมถึงในสถานะติดตั้งและยังไม่ได้ติดตั้ง สำหรับประสบการณ์การวางซ้อนการควบคุมหน้าต่างจริงๆ คุณจะต้องติดตั้งแอป คุณจะเห็นภาพหน้าจอ 2 ภาพของสิ่งที่จะเกิดขึ้นด้านล่าง ซอร์สโค้ดของแอปจะอยู่ใน Glitch
ฟีเจอร์การค้นหาในการวางซ้อนการควบคุมหน้าต่างทำงานได้อย่างสมบูรณ์:
ข้อควรพิจารณาด้านความปลอดภัย
ทีม Chromium ออกแบบและติดตั้งใช้งาน Window Controls Overlay API โดยใช้หลักการสำคัญที่ระบุไว้ในการควบคุมสิทธิ์เข้าถึงฟีเจอร์แพลตฟอร์มเว็บที่มีประสิทธิภาพ ซึ่งรวมถึงการควบคุมผู้ใช้ ความโปร่งใส และการยศาสตร์
การปลอมแปลง
การให้สิทธิ์เว็บไซต์ควบคุมแถบชื่อเพียงบางส่วนทำให้นักพัฒนาซอฟต์แวร์สามารถปลอมแปลงเนื้อหาในพื้นที่ที่เคยเป็นภูมิภาค��ี่เชื่อถือได้และมีการควบคุมผ่านเบราว์เซอร์ ปัจจุบันสำหรับเบราว์เซอร์ Chromium โหมดสแตนด์อโลนจะมีแถบชื่อที่เมื่อเปิดใช้งานครั้งแรกจะแสดงชื่อของหน้าเว็บทางด้านซ้าย และจุดเริ่มต้นของหน้าเว็บทางด้านขวา (ตามด้วยปุ่ม "การตั้งค่าและอื่นๆ" และส่วนควบคุมหน้าต่าง) หลังจากผ่านไป 2-3 วินาที ข้อความต้นฉบับจะหายไป หากเบราว์เซอร์ตั้งค่าเป็นภาษาแบบขวาไปซ้าย (RTL) เลย์เอาต์นี้จะพลิกให้ข้อความต้นฉบับอยู่ทางด้านซ้าย ซึ่งจะเป็นการเปิดหน้าต่างควบคุมการวางซ้อนเพื่อหลอกต้นทางหากมีระยะห่างจากขอบระหว่างต้นทางกับขอบด้านขวาของการวางซ้อนไม่เพียงพอ เช่น ต้นทาง "evil.ltd" อาจต่อท้ายด้วยเว็บไซต์ที่เชื่อถือได้ "google.com" เพื่อให้ผู้ใช้เชื่อว่าแหล่งที่มานั้นเชื่อถือได้ แผนคือการเก็บข้อความต้นทางนี้ไว้เพื่อให้ผู้ใช้ทราบถึงที่มาของแอปและตรวจสอบว่าตรงกับสิ่งที่คาดหวังไว้ สำหรับเบราว์เซอร์ที่กำหนดค่า RTL จะต้องมีระยะห่างจากขอบด้านขวาของข้อความต้นทางเพียงพอเพื่อป้องกันไม่ให้เว็บไซต์ที่เป็นอันตรายแนบต้นทางที่ไม่ปลอดภัยกับต้นทางที่เชื่อถือได้
การเก็บลายนิ้วมือ
การเปิดใช้การ��วบคุมหน้าต่างที่วางซ้อนและบริเวณที่ลากได้จะไม่ก่อให้เกิดข้อกังวลด้านความเป็นส่วนตัวที่ร้ายแรงไปกว่าการตรวจหาฟีเจอร์ อย่างไรก็ตาม เนื่องจากขนาดและตำแหน่งของปุ่มควบคุมหน้าต่างในระบบปฏิบัติการต่างๆ แตกต่างกัน เมธอด navigator.
จะแสดงผล DOMRect
ซึ่งตำแหน่งและมิติข้อมูลเปิดเผยข้อมูลเกี่ยวกับระบบปฏิบัติการที่เบราว์เซอร์ทำงานอยู่ ปัจจุบันนักพัฒนาซอฟต์แวร์ค้นพบระบบปฏิบัติการได้จากสตริง User Agent อยู่แล้ว แต่เนื่องจากข้อกังวลเรื่องการเก็บลายนิ้วมือ จึงมีการพูดคุยกันเกี่ยวกับการตรึงสตริง UA และการรวมเวอร์ชัน��องระบบปฏิบัติการเข้าด้วยกัน ชุมชนเบราว์เซอร์มีความพยายามอย่างต่อเนื่องในการทำความเข้าใจความถี่ที่ขนาดของหน้าต่างควบคุมการเปลี่ยนแปลงวางซ้อนบนแพลตฟอร์มต่างๆ เนื่องจากปัจจุบันมีสมมติฐานที่ว่าเทคโนโลยีเหล่านี้ค่อนข้างเสถียรสำหรับระบบปฏิบัติการเวอร์ชันต่างๆ จึงไม่มีประโยชน์สำหรับการสังเกตระบบปฏิบัติการเวอร์ชันย่อย แม้ว่าปัญหานี้อาจเป็นปัญหาลายนิ้วมือ แต่จะใช้กับ PWA ที่ติดตั้งซึ่งใช้ฟีเจอร์แถบชื่อที่กำหนดเองเท่านั้น และไม่ได้มีผลกับการใช้งานเบราว์เซอร์ทั่วไป นอกจากนี้ navigator.
API จะไม่พร้อมใช้งานใน iframe ที่ฝังภายใน PWA
การนำทาง
การนำทางไปยังต้นทางอื่นภายใน PWA จะทำให้ระบบกลับไปใช้แถบชื่อแบบสแตนด์อโลนตามปกติ แม้ว่าจะมีคุณสมบัติตรงตามเกณฑ์ข้างต้นและมีการเปิดใช้งานโดยมีการวางซ้อนการควบคุมหน้าต่าง เพื่อรองรับแถบสีดำที่ปรากฏในการนำทางไปยังต้นทางอื่น หลังจากกลับไปยังต้นทางเดิมแล้ว ระบบจะใช้การวางซ้อนการควบคุมหน้าต่างอีกครั้ง
ความคิดเห็น
ทีม Chromium ต้องการทราบข้อมูลเกี่ยวกับประสบการณ์การใช้งาน Window Controls Overlay API
บอกให้เราทราบเกี่ยวกับการออกแบบ API
มีบางอย่างเกี่ยวกับ API ที่ไม่เป็นไปตามที่คุณคาดหวังไหม หรือมีวิธีการหรือพร็อพเพอร์ตี้ ที่ขาดหายไปที่คุณจำเป็นต้องใช้ในการนำแนวคิดของคุณไปปฏิบัติหรือไม่ หากมีข้อสงสัยหรือความคิดเห็น เกี่ยวกับโมเดลความปลอดภัย โปรดแจ้งปัญหาเกี่ยวกับข้อมูลจำเพาะในที่เก็บ GitHub ที่เกี่ยวข้อ�� หรือแสดงความคิดเห็นเกี่ยวกับปัญหาที่มีอยู่
รายงานปัญหาเกี่ยวกับการใช้งาน
คุณพบข้อบกพร่องในการใช้งาน Chromium หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนดหรือไม่
รายงานข้อบกพร่องที่ new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการง่ายๆ ในการทำซ้ำ และป้อน UI>Browser>WebAppInstalls
ในช่องคอมโพเนนต์ Glitch เหมาะสำหรับการแชร์การดำเนินการซ้ำที่ง่ายและรวดเร็ว
แสดงการสนับสนุนสำหรับ API
คุณกำลังวางแผนที่จะใช้ Window Controls Overlay API ใช่ไหม การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chromium จัดลำดับความสำคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านั้นสำคัญเพียงใด
ส่งทวีตถึง @ChromiumDev พร้อมแฮชแท็ก #WindowControlsOverlay
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนั้นที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- คำอธิบาย
- ฉบับร่างของข้อกำหนด
- ข้อบกพร่องของ Chromium
- รายการสถานะ Chrome Platform
- ตรวจสอบแท็ก
- เอกสารที่เกี่ยวข้องของ Microsoft Edge
ข้อความแสดงการยอมรับ
การวางซ้อนการควบคุมหน้าต่างได้รับการติดตั้งใช้งานและระบุโดย Amanda Baker จากทีม Microsoft Edge บทความนี��ได้รับการตรวจสอบโดย Joe Medley และ Kenneth Rohde Christiansen รูปภาพหลักของ Sigmund ใน Unsplash