5 טעויות קריטיות בעיצוב Window Controls Overlay ב-PWA

משהו מוזר קורה כשהמפתחים מגלים לראשונה את ה-Window Controls Overlay API (או בקיצור WCO). הם מתלהבים מהיכולת לבטל את סרגל הכותרת האפור והמשעמם של הדפדפן, וממהרים לשים שם שורת חיפוש, כפתורי פרופיל ולוגו.

ואז האפליקציה עולה ללייב.

ראיתי שוב ושוב את אותן 5 טעויות שחוזרות על עצמן. המשתמשים ב-macOS לא יכולים ללחוץ על החיפוש כי כפתורי הרמזור מסתירים אותו, והמשתמשים ב-Windows לא מצליחים לגרור את החלון על המסך.

הגדרה · Window Controls Overlay

טכנולוגיית אינטרנט המאפשרת לאפליקציות PWA בדסקטופ להרחיב את אזור התוכן אל תוך סרגל הכותרת (Titlebar), תוך שמירה על כפתורי המערכת (סגירה, מזעור, הגדלה) כגרסה צפה.

הנה 5 הטעויות הנפוצות ביותר, ולמה הן הורסות לכם את חווית האפליקציה ב-2026.

1. שימוש בפיקסלים קשיחים במקום ב-CSS Environment Variables

זו הטעות הנפוצה ביותר. מפתחים מודדים את הגובה והרוחב של כפתורי המערכת ב-Mac (למשל 80 פיקסלים משמאל), שמים padding-left: 80px ב-CSS, וסוגרים את הלילה.

מה הבעיה? ב-Windows כפתורי המזעור והסגירה נמצאים בכלל בצד ימין, והם תופסים רוחב שונה לגמרי.

💡

לעולם אל תנחשו את גודל סרגל הכותרת. משתנים דינמיים של ה-browser הם החוק היחיד.

איך לתקן את זה?

מנועי הדפדפנים מספקים משתני סביבה ייעודיים. צריך להשתמש ב-env() כדי לקבל את המיקום המדויק בכל מערכת הפעלה:

• env(titlebar-area-x)
• env(titlebar-area-y)
• env(titlebar-area-width)
• env(titlebar-area-height)

אם תגדירו את המכולה של העליונית בעזרת המשתנים האלה, האלמנטים שלכם יזוזו אוטומטית בהתאם למחשב שבו האפליקציה רצה.

2. שילוב שגוי של אזורי גרירה (Drag vs No-Drag)

חלון דסקטופ ממוצע דורש שטח שדרכו המשתמש יכול לתפוס את החלון ולגרור אותו על המסך. כשאתם משתלטים על ה-Titlebar, גוגל ומיקרוסופט הופכות את כל האזור הזה לניתן לגרירה כברירת מחדל.

אם שמתם שם שורת חיפוש או כפתור, המשתמש ינסה ללחוץ עליהם — ויגלה שהוא פשוט גורר את החלון.

איך לתקן את זה?

מגדירים באופן מפורש מה מיועד לגרירה ומה למענה בלחיצות. ב-CSS משתמשים בתכונה הנתמכת מקצה לקצה:

.custom-titlebar {
  app-region: drag;
  /* לחלופין: -webkit-app-region: drag; */
}

.custom-titlebar input,
.custom-titlebar button {
  app-region: no-drag;
  /* לחלופין: -webkit-app-region: no-drag; */
}

משפט פשוט לא לשכוח: לחצן חייב להיות no-drag.

3. התעלמות מוחלטת מדפדפנים ומערכות שלא תומכות ב-WCO

נכון, ב-2026 הרוב המוחלט של הדפדפנים המודרניים בדסקטופ תומכים ב-WCO. אבל מה קורה כשהמשתמש פותח את ה-PWA בדפדפן שאינו תומך, או כשהוא גולש מהגרסה הוובית הרגילה?

אם העיצוב שלכם מבוסס מראש על הנחת יסוד שהסרגל המותאם קיים, התפריט העליון שלכם פשוט ייעלם או ייחתך על ידי כותרת הדפדפן הרגילה.

טבלת השוואה: התנהגות PWA עם ובלי WCO

תמיד עטפו את CSS ה-WCO שלכם כך:

@media (display-mode: window-controls-overlay) {
  .header {
    position: fixed;
    left: env(titlebar-area-x);
    top: env(titlebar-area-y);
    width: env(titlebar-area-width);
    height: env(titlebar-area-height);
  }
}

4. דחיסת עומס ויזואלי לאזור מצומצם

גובה סרגל הכותרת נע בדרך כלל בין 30 ל-40 פיקסלים. זה ספייס זעיר.

אני רואה מעצבים שמנסים להכניס לשם:

• לוגו מלא של החברה
• שדה חיפוש רחב
• תפריט ניווט עם 5 קישורים
• תמונת פרופיל וכפתור התראות

זה צפוף, לא קריא ומזמין טעויות לחיצה.

💡

הסרגל העליון נועד לפעולות ליבה בלבד. כל השאר שייך ל-Sidebar או לתוכן המרכזי.

השאירו מינימום 30% מרווח נקי בסרגל העליון. הרווח הזה הוא לא שטח מבוזבז — הוא שטח הגרירה של המשתמש.

5. חוסר התאמה למצב חלון לא פעיל (Blur State)

כשהמשתמש עובר לעבוד באפליקציה אחרת, מערכת ההפעלה מעבירה את החלון שלכם למצב לא פעיל. באפליקציות נייטיב כמו Spotify, כותרת החלון משנה את צבעה או מעפילה מעט כדי להבהיר שהחלון אינו בפוקוס.

אם ה-PWA שלכם נשאר באותה רמת בוהק וצבעוניות, האפליקציה מרגישה מוזרה ומלאכותית.

איך לתקן את זה?

האזינו לאירועי הפוקוס של החלון ב-JavaScript או השתמשו במימוש CSS:

window.addEventListener('blur', () => {
  document.body.classList.add('window-inactive');
});

window.addEventListener('focus', () => {
  document.body.classList.remove('window-inactive');
});

כעת תוכלו להנמיך opacity של רכיבים בסרגל כשהחלון ברקע.

הסיכום: המלצה אחת מתועדפת לשנת 2026

אם אתם עומדים לשדרג את ה-PWA שלכם ולשלב Window Controls Overlay, התחילו קודם כל מבניית השלד הדינמי (CSS Env Variables + Fallback).

אל תתחילו מהעיצוב ב-Figma. התחילו מקוד CSS נקי שמגיב נכון לשינוי גודל החלון ב-Windows וב-Mac, וודאו שקיימים אזורי גרירה ברורים. רק ברגע שהתשתית הטכנית יציבה — תוסיפו את שורת החיפוש או הטאבים.

אפליקציית רשת שלא מכבדת את חוקי מערכת ההפעלה תמיד תרגיש כמו אתר בתחפושת.