ניהול החלונות

אפליקציית PWA מחוץ לדפדפן מנהלת חלון משלה. בקטע הזה נסביר על ממשקי ה-API והיכולות לניהול חלון במערכת ההפעלה.

החלון של אפליקציית ה-PWA

כשהאפליקציה פועלת בחלון משלה, שמנוהל על ידי אפליקציית ה-PWA, יש לה את כל היתרונות והאחריות של כל חלון במערכת ההפעלה הזו, למשל:

  • היכולת לשנות את גודל החלון ולהזיז אותו במערכות הפעלה עם תמיכה בריבוי חלונות, כמו Windows או ChromeOS.
  • שיתוף המסך עם חלונות של אפליקציות אחרות, כמו במצב המסך המפוצל ב-iPadOS או במצב המסך המפוצל ב-Android.
  • מופיעות במערכי האפליקציות, בסרגלי המשימות ובתפריט alt-tab במחשבים, וברשימות של חלונות לביצוע משימות מרובות במכשירים ניידים.
  • היכולת למזער את החלון, להעביר אותו בין מסכים ומחשבים ולסגור אותו בכל שלב.

העברת החלון ושינוי הגודל שלו

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

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

אי אפשר להגדיר את הגודל והמיקום המועדפים של אפליקציית ה-PWA במניפסט. אפשר למקם מחדש ולשנות את גודל החלון רק באמצעות JavaScript API. בקוד, אפשר להזיז את חלון ה-PWA ולשנות את הגודל שלו באמצעות הפונקציות moveTo(x, y) ו-resizeTo(x, y) של האובייקט window.

לדוגמה, אפשר לשנות את הגודל ולהזיז את החלון של אפליקציית ה-PWA כשהיא נטענת באמצעות:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

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

גלישה לאתרים אחרים

אם אתם רוצים לשלוח את המשתמש לאתר חיצוני שלא נכלל בהיקף של אפליקציית ה-PWA, אתם יכולים לעשות זאת באמצעות רכיב HTML <a href> רגיל, באמצעות location.href או על ידי פתיחת חלון חדש בפלטפורמות תואמות.

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

אלה כמה מהתכונות של הדפדפנים בתוך האפליקציה:

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

דפדפן מובנה באפליקציה של PWA למחשב, כשגולשים בכתובת URL שלא נכללת בהיקף.

דפדפן מובנה באפליקציה ב-iPhone כשגולשים בכתובת URL שלא נכללת בהיקף של אפליקציית PWA נפרדת.

דפדפן בתוך האפליקציה ב-Android כשגולשים בכתובת URL שלא נכללת בהיקף של אפליקציית PWA נפרדת.

תהליכי הרשאה

תהליכי אימות והרשאה רבים באינטרנט כוללים הפניה אוטומטית של המשתמש לכתובת URL אחרת במקור אחר, כדי לקבל אסימון שיוחזר למקור של אפליקציית ה-PWA. למשל, שימוש ב-OAuth 2.0.

במקרים כאלה, הדפדפן בתוך האפליקציה פועל לפי התהליך הבא:

  1. המשתמש פותח את אפליקציית ה-PWA שלכם ולוחץ על 'כניסה'.
  2. אפליקציית ה-PWA מפנה את המשתמש לכתובת URL שמחוץ להיקף של אפליקציית ה-PWA, כדי שמנוע הרינדור יפתח דפדפן מובנה בתוך אפליקציית ה-PWA.
  3. המשתמש יכול לבטל את הדפדפן באפליקציה ולחזור לאפליקציית ה-PWA בכל שלב.
  4. המשתמש מתחבר לדפדפן שבאפליקציה. שרת האימות מפנה את המשתמש למקור של ה-PWA, ושולח את האסימון כארגומנטים.
  5. הדפדפן באפליקציה נסגר מעצמו כשהוא מזהה כתובת URL שנכללת בהיקף של אפליקציית ה-PWA.
  6. המנוע מפנה את הניווט בחלון הראשי של ה-PWA לכתובת ה-URL שאליה עבר שרת האימות בזמן שהיה בדפדפן שבאפליקציה.
  7. ה-PWA מקבל את האסימון, מאחסן אותו ומרינדר את ה-PWA.

אילוץ הניווט בדפדפן

אם רוצים לאלץ פתיחה של הדפדפן עם כתובת URL ולא דפדפן מובנה באפליקציה, אפשר להשתמש ביעד _blank של רכיבי <a href>. התכונה הזו פועלת רק ב-PWA למחשב. במכשירים ניידים אין אפשרות לפתוח דפדפן באמצעות כתובת URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

פתיחת חלונות חדשים

במחשב, המשתמשים יכולים לפתוח יותר מחלון אחד של אותה אפליקציית PWA. כל חלון יהיה ניווט שונה לאותו start_url, כאילו פותחים שתי כרטיסיות בדפדפן עם אותה כתובת URL. בתפריט של אפליקציית ה-PWA, המשתמשים יכולים לבחור באפשרות 'קובץ' ואז 'חלון חדש'. בקוד של אפליקציית ה-PWA, אפשר לפתוח חלון חדש באמצעות הפונקציה open(). פרטים נוספים זמינים במסמכי התיעוד.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

אותה אפליקציית PWA מותקנת עם כמה חלונות פתוחים במערכת הפעלה למחשב.

קריאה ל-open() בחלון של אפליקציית PWA ב-iOS או ב-iPadOS מחזירה את הערך null ולא פותחת חלון. פתיחת חלונות חדשים ב-Android יוצרת דפדפן חדש בתוך האפליקציה לכתובת ה-URL – גם אם כתובת ה-URL נכללת בהיקף של אפליקציית ה-PWA – שבדרך כלל לא מפעיל חוויית גלישה חיצונית.

כותרת החלון

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

אתם יכולים להגדיר את התוכן של שורת הכותרת:

  • באופן סטטי ברכיב ה-HTML <title>.
  • שינוי דינמי של מאפיין המחרוזת document.title בכל שלב.

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

מצב כרטיסיות

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

מידע נוסף על היכולת הניסיונית הזו זמין במאמר מצב אפליקציה עם כרטיסיות לאפליקציות PWA.

שכבת-על של פקדי החלונות

צייןנו שאפשר לשנות את שם החלון על ידי הגדרת הערך של הרכיב <title> או של המאפיין document.title. אבל הוא תמיד ערך מחרוזת. מה אם היינו יכולים לעצב את שורת הכותרת כרצוננו, באמצעות HTML,‏ CSS ותמונות? כאן נכנס לתמונה שכבת-העל של אמצעי הבקרה בחלון – יכולת ניסיונית חדשה ב-Microsoft Edge וב-Google Chrome ל-PWA במחשב.

מידע נוסף על היכולת הזו זמין במאמר התאמה אישית של שכבת-העל של פקדי החלונות בסרגל הכותרת של ה-PWA.

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

ניהול החלונות

כשמשתמשים בכמה מסכים, הם רוצים לנצל את כל המרחב הזמין להם. לדוגמה:

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

Window Management API מאפשר ל-PWA לעשות בדיוק את זה ועוד.

אחזור פרטי המסך

Window Management API מוסיף שיטה חדשה, window.getScreenDetails(), שמחזירה אובייקט עם מסכים כמערך בלתי ניתן לשינוי של מסכים מצורפים. יש גם אובייקט פעיל שניתן לגשת אליו מ-ScreenDetails.currentScreen, שתואם ל-window.screen הנוכחי.

האובייקט המוחזר גם יוצר אירוע screenschange כשהמערך screens משתנה. (הדבר לא קורה כשמשנים מאפיינים במסכים ספציפיים). מסכים נפרדים, window.screen או מסך במערך screens, גם מפעילים אירוע change כשהמאפיינים שלהם משתנים.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

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

נעילה של מסך מצב שינה

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

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

מקלדת וירטואלית

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

בעזרת VirtualKeyboard API, עכשיו יש לאפליקציית ה-PWA שליטה רבה יותר על המקלדת בפלטפורמות תואמות באמצעות ממשק navigator.virtualKeyboard, כולל:

  • הצגה והסתרה של המקלדת הווירטואלית באמצעות הפונקציות navigator.virtualKeyboard.show() ו-navigator.virtualKeyboard.hide().
  • מציינים לדפדפן שאתם אחראים לסגירת המקלדת הווירטואלית בעצמכם, על ידי הגדרת navigator.virtualKeyboard.overlaysContent כ-true.
  • לדעת מתי המקלדת מופיעה ונעלמת באמצעות האירוע geometrychange של navigator.virtualKeyboard.
  • הגדרת מדיניות המקלדת הווירטואלית לעריכת רכיבי המארח (באמצעות contenteditable) באמצעות מאפיין ה-HTML virtualkeyboardpolicy. המדיניות מאפשרת לכם להחליט אם הדפדפן יטפל באופן אוטומטי במקלדת הווירטואלית באמצעות הערך auto, או שהסקריפט יטפל בה באמצעות הערך manual.
  • שימוש במשתני סביבה של CSS כדי לקבל מידע על המראה של המקלדת הווירטואלית, כמו keyboard-inset-height ו-keyboard-inset-top.

מידע נוסף על ה-API הזה זמין במאמר שליטה מלאה באמצעות VirtualKeyboard API.

משאבים