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

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

משאבים