ใช้พื้นที่แถบชื่อข้างการควบคุมหน้าต่างเพื่อให้ PWA รู้สึกเหมือนเป็นแอปมากขึ้น
หากยังจำบทความทำให้ PWA รู้สึกเหมือนเป็นแอปมากขึ้นได้ คุณอาจจำได้ว่าเราได้พูดถึงการปรับแต่งแถบชื่อของแอปเป็นกลยุทธ์ในการสร้างประสบการณ์การใช้งานที่เหมือนแอปมากขึ้น ต่อไปนี้คือตัวอย่างลักษณะที่อาจปรากฏของการดำเนินการนี้ซึ่งแสดงแอป Podcasts ของ macOS
ตอนนี้คุณอาจอยากโต้แย้งโดยบอกว่า Podcasts เป็นแอป 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
การวางซ้อนการควบคุมหน้าต่างคืออะไร
พื้นที่แถบชื่อหมายถึงพื้นที่ทางด้านซ้ายหรือขวาของตัวควบคุมหน้าต่าง (นั่นคือ ปุ่มย่อ ขยาย ปิด ฯลฯ) และมักจะมีชื่อแอปพลิเคชัน การวางซ้อนการควบคุมหน้าต่างช่วยให้ Progressive Web Application (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 อย่างคือ ในบางแพลตฟอร์ม การควบคุมหน้าต่างจะอยู่ทางด้านขวา ส่วนในแพลตฟอร์มอื่นๆ จะอยู่ทางด้านซ้าย ซ้ำร้ายไปกว่านั้น เมนู "จุด 3 จุด" ของ Chrome จะเปลี่ยนตำแหน่งด้วย โดยขึ้นอยู่กับแพลตฟอร์ม ซึ่งหมายความว่ารูปภาพพื้นหลังแบบไล่ระดับสีแบบเส้นตรงต้องปรับแบบไดนามิกให้ทำงานจาก #131313
→maroon
หรือ maroon
→#131313
→maroon
เพื่อให้กลมกลืนกับสีพื้นหลัง maroon
ของแถบชื่อซึ่งกำหนดโดย <meta name="theme-color" content="maroon">
ซึ่งทำได้โดยการค้นหา getTitlebarAreaRect()
API ในพร็อพเพอร์ตี้ 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');
}
ตอนนี้โค้ดที่แก้ไขแล้วใช้คลาส 2 รายการที่โค้ดด้านบนตั้งค่าแบบไดนามิกแทนที่จะใช้รูปภาพพื้นหลังในกฎ CSS ของคลาส .search
โดยตรง (เช่น ก่อนหน้านี้)
/* 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
หรือตั้งค่าโปรแกรมรับฟังเหตุการณ์สําหรับเหตุการณ์ 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);
}
คุณสามารถเพิ่มโปรแกรมรับฟังเหตุการณ์ลงใน windowControlsOverlay
แทนการกําหนดฟังก์ชันให้กับ ongeometrychange
ดังด้านล่าง อ่านเกี่ยวกับความแตกต่างระหว่าง 2 รายการนี้ได้ใน MDN
navigator.windowControlsOverlay.addEventListener(
'geometrychange',
debounce((e) => {
span.hidden = e.titlebarAreaRect.width < 800;
}, 250),
);
ความเข้ากันได้เมื่อทำงานในแท็บและในเบราว์เซอร์ที่ไม่รองรับ
กรณีที่จะเป็นไปได้มี 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 จะทำให้ PWA กลับไปใช้แถบชื่อแบบสแตนด์อโลนตามปกติ แม้ว่าจะเป็นไปตามเกณฑ์ข้างต้นและเปิดขึ้นด้วยการควบคุมหน้าต่างที่วางซ้อนกันก็ตาม การดำเนินการนี้เพื่อรองรับแถบสีดำที่ปรากฏขึ้นเมื่อไปยังต้นทางอื่น หลังจากกลับไปที่ต้นทางเดิม ระบบจะใช้การควบคุมหน้าต่างที่วางซ้อนกันอีกครั้ง
ความคิดเห็น
ทีม Chromium ต้องการทราบความคิดเห็นของคุณเกี่ยวกับ Window Controls Overlay API
บอกเราเกี่ยวกับการออกแบบ API
มีสิ่งใดเกี่ยวกับ API ที่ไม่ทำงานตามที่คาดไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องนำไปใช้กับแนวคิดของคุณ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกำหนดใน GitHub repo ที่เกี่ยวข้อง หรือแสดงความคิดเห็นในปัญหาที่มีอยู่
รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน
หากพบข้อบกพร่องในการใช้งาน Chromium หรือการติดตั้งใช้งานแตกต่างจากข้อมูลจำเพาะหรือไม่
รายงานข้อบกพร่องที่ new.crbug.com โปรดระบุรายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการง่ายๆ ในการจำลองข้อบกพร่อง และป้อน UI>Browser>WebAppInstalls
ในช่องคอมโพเนนต์ Glitch เหมาะอย่างยิ่งสำหรับการแชร์การจำลองข้อบกพร่องที่รวดเร็วและง่ายดาย
แสดงการสนับสนุน API
คุณกำลังวางแผนที่จะใช้ Window Controls Overlay API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ
ส่งทวีตถึง @ChromiumDev พร้อมแฮชแท็ก #WindowControlsOverlay
และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- คำอธิบาย
- ฉบับร่างข้อกำหนด
- ข้อบกพร่องของ Chromium
- รายการสถานะแพลตฟอร์ม Chrome
- การตรวจสอบแท็ก
- เอกสารที่เกี่ยวข้องของ Microsoft Edge
ขอขอบคุณ
Amanda Baker จากทีม Microsoft Edge เป็นผู้ติดตั้งใช้งานและระบุการวางซ้อนการควบคุมหน้าต่าง บทความนี้ผ่านการตรวจสอบโดย Joe Medley และ Kenneth Rohde Christiansen รูปภาพหลักโดย Sigmund จาก Unsplash