ใช้พื้นที่แถบชื่อข้างตัวควบคุมหน้าต่างเพื่อทำให้ PWA ของคุณมีความรู้สึกคล้ายกับแอปมากขึ้น
หากคุณจำบทความของฉันที่ชื่อทำให้ PWA ของคุณมีการทำงานเหมือนแอปมากขึ้น คุณอาจจำได้ว่า อย่างที่ผมพูดถึงไปแล้วว่าการปรับแต่งแถบชื่อของแอปเป็น เพื่อสร้างประสบการณ์ที่คล้ายคลึงกับแอปมากขึ้น นี่คือตัวอย่างของลักษณะ กำลังแสดงแอปพอดแคสต์บน 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 (PWAs) มอบความรู้สึกที่คล้ายกับแอปมากขึ้นด้วยการสลับ แถบชื่อแบบความกว้างเต็มที่มีอยู่สำหรับภาพซ้อนทับขนาดเล็กที่มีตัวควบคุมหน้าต่าง วิธีนี้ช่วยให้ ให้วางเนื้อหาที่กำหนดเองในพื้นที่แถบชื่อที่เบราว์เซอร์ควบคุมก่อนหน้านี้
สถานะปัจจุบัน
ขั้นตอน | สถานะ |
---|---|
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 คือ
ไม่สามารถลากได้อีกต่อไป (นอกเหนือจากพื้นที่ที่เล็กมาก) เนื่องจากปุ่มควบคุมหน้าต่างจะไม่ลาก
และส่วนที่เหลือของแถบชื่อจะประกอบด้วย Widget การค้นหา แก้ไขปัญหานี้โดยใช้
พร็อพเพอร์ตี้ 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');
}
แทนที่จะใช้ภาพพื้นหลังในกฎ 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 กรณีที่เป็นไปได้ที่ควรพิจารณา ได้แก่
- กรณีที่แอปทำงานในเบราว์เซอร์ที่รองรับการวางซ้อนการควบคุมหน้าต่าง แต่ ตำแหน่งที่มีการใช้แอปในแท็บเบราว์เซอร์
- กรณีที่แอปทำงานในเบราว์เซอร์ที่ไม่รองรับการวางซ้อนการควบคุมหน้าต่าง
ในทั้งสองกรณี โดยค่าเริ่มต้น HTML ที่สร้างขึ้นสำหรับการควบคุมหน้าต่าง
โฆษณาซ้อนทับจะแสดงแบบอินไลน์เหมือนกับเนื้อหา HTML ทั่วไปและตัวแปร env()
ค่าสำรอง
จะเข้าสู่ตำแหน่งตรงนี้ ในเบราว์เซอร์ที่รองรับ คุณยังสามารถเลือกที่จะไม่แสดง
HTML ที่กำหนดสำหรับการวางซ้อนการควบคุมหน้าต่างด้วยการตรวจสอบพร็อพเพอร์ตี้ visible
ของการวางซ้อน และหาก
รายงาน false
จากนั้นซ่อนเนื้อหา HTML นั้น
โปรดอย่าลืมว่าเบราว์เซอร์ที่ไม่สนับสนุนจะไม่พิจารณาเบราว์เซอร์
"display_override"
พร็อพเพอร์ตี้ไฟล์ Manifest ของเว็บแอปเลย หรือไม่รู้จัก
"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
- ตรวจสอบ TAG
- เอกสารที่เกี่ยวข้องของ Microsoft Edge
กิตติกรรมประกาศ
มีการใช้การวางซ้อนการควบคุมหน้าต่างและระบุโดย Amanda Baker จากทีม Microsoft Edge บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kenneth Rohde Christiansen รูปภาพหลักโดย Sigmund ใน Unsplash