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

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

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

วันที่ แถบชื่อแอปพอดแคสต์ใน macOS แสดงปุ่มควบคุมสื่อและข้อมูลเมตาเกี่ยวกับพอดแคสต์ที่เล่นอยู่
แถบชื่อที่กำหนดเองทำให้ PWA ของคุณมีรูปลักษณ์คล้ายแอปเฉพาะแพลตฟอร์ม

แต่ถึงตอนนี้ คุณอาจไม่สนใจแล้วว่า 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 (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"]
}

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

  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 คือ ไม่สามารถลากได้อีกต่อไป (นอกเหนือจากพื้นที่ที่เล็กมาก) เนื่องจากปุ่มควบคุมหน้าต่างจะไม่ลาก และส่วนที่เหลือของแถบชื่อจะประกอบด้วย 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 จะเปลี่ยนไป ของคุณ โดยอิงตามแพลตฟอร์ม ซึ่งหมายความว่าภาพพื้นหลังแบบไล่ระดับสีแบบเส้นตรงจะต้อง ปรับเปลี่ยนแบบไดนามิกให้มีผลตั้งแต่ #131313maroon หรือ maroon#131313maroon กลืนไปกับสีพื้นหลัง 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 นั้น

วันที่ PWA ทำงานอยู่ในแท็บเบราว์เซอร์โดยมีการวางซ้อนการควบคุมหน้าต่างในส่วนเนื้อหา
ตัวควบคุมต่างๆ สำหรับแถบชื่อสามารถแสดงในส่วนเนื้อหาของเบราว์เซอร์เวอร์ชันเก่าได้โดยง่าย

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

วันที่ PWA ที่ทำงานในโหมดสแตนด์อโลนโดยมีการวางซ้อนการควบคุมหน้าต่างแสดงอยู่ในเนื้อหา
ตัวควบคุมต่างๆ สำหรับแถบชื่อสามารถแสดงในส่วนเนื้อหาของเบราว์เซอร์เวอร์ชันเก่าได้โดยง่าย

ข้อควรพิจารณาเกี่ยวกับ UI

แม้จะห้ามใจยาก แต่เราไม่แนะนำให้สร้างเมนูแบบเลื่อนลงแบบคลาสสิกในพื้นที่การวางซ้อนการควบคุมหน้าต่าง เนื่องจากการกระทำดังกล่าวจะละเมิด หลักเกณฑ์การออกแบบใน macOS แพลตฟอร์มที่ผู้ใช้คาดว่าจะใช้แถบเมนู (ทั้งที่ระบบมีให้ ที่กำหนดเอง) ที่ด้านบนของหน้าจอ

หากแอปนำเสนอประสบการณ์การใช้งานแบบเต็มหน้าจอ โปรดพิจารณาอย่างรอบคอบว่าเหมาะสมหรือไม่ เพื่อให้การวางซ้อนการควบคุมหน้าต่างเป็นส่วนหนึ่งของมุมมองแบบเต็มหน้าจอ คุณอาจ ต้องการจัดเรียงการออกแบบใหม่เมื่อ onfullscreenchange เริ่มทำงาน

สาธิต

ฉันได้สร้างการสาธิตที่คุณสามารถเล่นได้ใน เบราว์เซอร์ที่สนับสนุนและไม่สนับสนุนแตกต่างกัน และอยู่ในสถานะติดตั้งและไม่ได้ติดตั้ง สำหรับ ของการวางซ้อนการควบคุมหน้าต่างจริง คุณจะต้องติดตั้งแอป คุณจะเห็นภาพหน้าจอ 2 ภาพที่แสดงสิ่งที่จะเกิดขึ้นด้านล่าง ซอร์สโค้ดของแอปมีอยู่ใน Glitch

วันที่ แอปสาธิตเนื้อหาเด่นของ Wikimedia ที่มีการวางซ้อนการควบคุมหน้าต่าง
แอปเดโมพร้อมให้ทดลองใช้แล้ว

ฟีเจอร์การค้นหาในการวางซ้อนการควบคุมหน้าต่างทำงานได้อย่างสมบูรณ์

วันที่ แอปเดโมเนื้อหาเด่นของ Wikimedia ที่มีการวางซ้อนการควบคุมหน้าต่างและการค้นหาที่ใช้คำว่า &quot;Cleopa...&quot; การไฮไลต์บทความที่มีคำว่า &quot;คลีโอพัตรา&quot; ที่ตรงกัน
ฟีเจอร์การค้นหาที่ใช้การวางซ้อนการควบคุมหน้าต่าง

ข้อควรพิจารณาด้านความปลอดภัย

ทีม 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 จะทำให้ต้นทางดังกล่าวกลับไปใช้เวอร์ชันสแตนด์อโลนปกติ แถบชื่อ แม้ว่าจะมีคุณสมบัติตรงตามเกณฑ์ข้างต้นและเปิดขึ้นพร้อมกับการวางซ้อนการควบคุมหน้าต่าง เพื่อรองรับแถบสีดำที่ปรากฏในการนำทางไปยังต้นทางอื่น หลัง หากกลับไปยังต้นทางเดิม ระบบจะใช้การวางซ้อนการควบคุมหน้าต่างอีกครั้ง

วันที่ แถบ URL สีดำสำหรับการนำทางนอกต้นทาง
แถบสีดำจะปรากฏเมื่อผู้ใช้นำทางไปยังต้นทางอื่น

ความคิดเห็น

ทีม Chromium ต้องการทราบประสบการณ์ของคุณเกี่ยวกับ Window Controls Overlay API

บอกเราเกี่ยวกับการออกแบบ API

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

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chromium ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อกําหนดหรือไม่ รายงานข้อบกพร่องที่ new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุด วิธีการง่ายๆ สำหรับการทำซ้ำ แล้วป้อน UI>Browser>WebAppInstalls ในคอมโพเนนต์ ภาพ Glitch เหมาะสำหรับการแชร์ซ้ำที่ง่ายและรวดเร็ว

แสดงการรองรับ API

คุณวางแผนที่จะใช้ Window Controls Overlay API ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยทีม Chromium เพื่อจัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นเห็นว่าการสนับสนุนเบราว์เซอร์นั้นสำคัญเพียงใด

ส่งทวีตไปยัง @ChromiumDev โดยใช้ #WindowControlsOverlay และแจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้แฮชแท็กนั้น

ลิงก์ที่มีประโยชน์

กิตติกรรมประกาศ

มีการใช้การวางซ้อนการควบคุมหน้าต่างและระบุโดย Amanda Baker จากทีม Microsoft Edge บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kenneth Rohde Christiansen รูปภาพหลักโดย Sigmund ใน Unsplash