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

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

Amanda Baker

Thomas Steiner

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

ตอนนี้คุณอาจอยากโต้แย้งโดยบอกว่า Podcasts เป็นแอป 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

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

พื้นที่แถบชื่อหมายถึงพื้นที่ทางด้านซ้ายหรือขวาของตัวควบคุมหน้าต่าง (นั่นคือ ปุ่มย่อ ขยาย ปิด ฯลฯ) และมักจะมีชื่อแอปพลิเคชัน การวางซ้อนการควบคุมหน้าต่างช่วยให้ Progressive Web Application (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 อย่างคือ ในบางแพลตฟอร์ม การควบคุมหน้าต่างจะอยู่ทางด้านขวา ส่วนในแพลตฟอร์มอื่นๆ จะอยู่ทางด้านซ้าย ซ้ำร้ายไปกว่านั้น เมนู "จุด 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.windowControlsOverlay.getTitlebarAreaRect()วิธีนี้จึงแสดงผล DOMRect ซึ่งมีตำแหน่งและขนาดที่แสดงข้อมูลเกี่ยวกับระบบปฏิบัติการที่เบราว์เซอร์ทำงานอยู่ ปัจจุบันนักพัฒนาแอปสามารถดูระบบปฏิบัติการจากสตริง User Agent อยู่แล้ว แต่เนื่องจากข้อกังวลเกี่ยวกับการเก็บข้อมูลลายนิ้วมือ จึงมีการพูดคุยเกี่ยวกับการหยุดสตริง UA และรวมเวอร์ชันระบบปฏิบัติการ ชุมชนเบราว์เซอร์พยายามอย่างต่อเนื่องเพื่อทำความเข้าใจความถี่ที่ขนาดของการควบคุมหน้าต่างวางซ้อนกันเปลี่ยนแปลงไปในแต่ละแพลตฟอร์ม เนื่องจากปัจจุบันมีการสันนิษฐานว่าการควบคุมเหล่านี้ค่อนข้างคงที่ในระบบปฏิบัติการแต่ละเวอร์ชัน จึงจะไม่เป็นประโยชน์ต่อการตรวจสอบระบบปฏิบัติการเวอร์ชันย่อย แม้ว่านี่อาจเป็นปัญหาการจดจำลายนิ้วมือ แต่ปัญหานี้มีผลกับ PWA ที่ติดตั้งไว้ซึ่งใช้ฟีเจอร์แถบชื่อที่กำหนดเองเท่านั้น และไม่มีผลกับการใช้งานเบราว์เซอร์ทั่วไป นอกจากนี้ navigator.windowControlsOverlay 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