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

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

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

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

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

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

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

אי אפשר להגדיר את הגודל והמיקום המועדפים של אפליקציית ה-PWA במניפסט. אפשר לשנות את המיקום והגודל של החלון רק באמצעות ה-API של JavaScript. בקוד, אפשר להזיז את חלון ה-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. אין אירוע לתעד את הזזת החלון, ולכן האפשרות היא לשלוח שאילתה לגבי המיקום בתדירות גבוהה.

במקום להזיז ולשנות את גודל החלון באופן מוחלט, אפשר להזיז אותו באופן יחסי ולשנות את הגודל באמצעות moveBy() ו-resizeBy().

עיון באתרים אחרים

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

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

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

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

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

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

דפדפן באפליקציה ב-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>. התכונה הזו פועלת רק ב-PWAs למחשב. במכשירים ניידים אין אפשרות לפתוח דפדפן עם כתובת 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, אבל כולן קשורות זו לזו באותו חלון של מערכת ההפעלה.

מידע נוסף על היכולת הניסיונית הזו זמין במאמר מצב אפליקציה עם כרטיסיות לאפליקציות 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 details.

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

דמיינו את התרחיש הבא. אתם במטבח ומכינים מתכון בטאבלט. סיימתם להכין את המצרכים. הידיים שלכם מלוכלכות ואתם חוזרים למכשיר כדי לקרוא את השלב הבא. אסון! המסך שחור! 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 תוכלו לדעת מתי המקלדת מופיעה ומתי היא נעלמת.
  • כדי להגדיר את המדיניות של המקלדת הווירטואלית לעריכת רכיבי המארח, מגדירים את הערך של contenteditable כ-auto או כ-manual באמצעות מאפיין ה-HTML virtualkeyboardpolicy. המדיניות מאפשרת לכם להחליט אם הדפדפן יטפל באופן אוטומטי במקלדת הווירטואלית (auto) או שהסקריפט יטפל בה (manual).
  • משתמשים במשתני סביבה של CSS כדי לקבל מידע על המראה של המקלדת הווירטואלית, כמו keyboard-inset-height ו-keyboard-inset-top.

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