ปรับแต่งการวางซ้อนการควบคุมหน้าต่างของแถบชื่อ PWA

ใช้พื้นที่แถบชื่อข้างตัวควบคุมหน้าต่างเพื่อทำให้ PWA รู้สึกเหมือนแอปมากขึ้น

Amanda Baker

Thomas Steiner

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

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

คอมโพเนนต์การวางซ้อนการควบคุมหน้าต่าง

การวางซ้อนการควบคุมหน้าต่างประกอบด้วยฟีเจอร์ย่อย 4 รายการดังนี้

1. ค่า "window-controls-overlay" สำหรับช่อง "display_override" ในไฟล์ Manifest ของเว็บแอป
2. ตัวแปรสภาพแวดล้อม CSS titlebar-area-x, titlebar-area-y, titlebar-area-width และ titlebar-area-height
3. การกำหนดมาตรฐานของพร็อพเพอร์ตี้ CSS ที่เป็นกรรมสิทธิ์ก่อนหน้านี้ -webkit-app-region เป็นพร็อพเพอร์ตี้ app-region เพื่อกำหนดภูมิภาคที่ลากได้ในเนื้อหาเว็บ
4. กลไกในการค้นหาและแก้ไขปัญหารอบๆ หน้าต่างจะควบคุมภูมิภาคผ่านสมาชิก windowControlsOverlay ของ window.navigator

การวางซ้อนการควบคุมหน้าต่างคืออะไร

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

สถานะปัจจุบัน

วิธีใช้การวางซ้อนการควบคุมหน้าต่าง

กำลังเพิ่ม window-controls-overlay ลงในไฟล์ Manifest ของเว็บแอป

Progressive Web App สามารถเลือกใช้การวางซ้อนการควบคุมหน้าต่างได้โดยการเพิ่ม "window-controls-overlay" เป็นสมาชิกหลักของ "display_override" ในไฟล์ Manifest ของเว็บแอป โดยทำดังนี้

{
  "display_override": ["window-controls-overlay"]
}

การวางซ้อนการควบคุมหน้าต่างจะปรากฏเฉพาะเมื่อเป็นไปตามเงื่อนไขทั้งหมดต่อไปนี้

1. แอปจะไม่ได้เปิดในเบราว์เซอร์ แต่อยู่ในหน้าต่าง PWA แยกต่างหาก
2. ไฟล์ Manifest มี "display_override": ["window-controls-overlay"] (ค่าอื่นจะได้รับอนุญาตหลังจากนั้น)
3. PWA กำลังทำงานในระบบปฏิบัติการเดสก์ท็อป
4. ต้นทางปัจจุบันตรงกับต้นทางที่ติดตั้ง 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.windowControlsOverlay.getTitlebarAreaRect() จะแสดงผล DOMRect ซึ่งตำแหน่งและมิติข้อมูลเปิดเผยข้อมูลเกี่ยวกับระบบปฏิบัติการที่เบราว์เซอร์ทำงานอยู่ ปัจจุบันนักพัฒนาซอฟต์แวร์ค้นพบระบบปฏิบัติการได้จากสตริง User Agent อยู่แล้ว แต่เนื่องจากข้อกังวลเรื่องการเก็บลายนิ้วมือ จึงมีการพูดคุยกันเกี่ยวกับการตรึงสตริง UA และการรวมเวอร์ชันของระบบปฏิบัติการเข้าด้วยกัน ชุมชนเบราว์เซอร์มีความพยายามอย่างต่อเนื่องในการทำความเข้าใจความถี่ที่ขนาดของหน้าต่างควบคุมการเปลี่ยนแปลงวางซ้อนบนแพลตฟอร์มต่างๆ เนื่องจากปัจจุบันมีสมมติฐานที่ว่าเทคโนโลยีเหล่านี้ค่อนข้างเสถียรสำหรับระบบปฏิบัติการเวอร์ชันต่างๆ จึงไม่มีประโยชน์สำหรับการสังเกตระบบปฏิบัติการเวอร์ชันย่อย แม้ว่าปัญหานี้อาจเป็นปัญหาลายนิ้วมือ แต่จะใช้กับ PWA ที่ติดตั้งซึ่งใช้ฟีเจอร์แถบชื่อที่กำหนดเองเท่านั้น และไม่ได้มีผลกับการใช้งานเบราว์เซอร์ทั่วไป นอกจากนี้ navigator.windowControlsOverlayAPI จะไม่พร้อมใช้งานใน 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