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

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

חלון ה-PWA

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

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

הזזה ושינוי גודל של החלון

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

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

אין דרך להגדיר את הגודל והמיקום המועדפים של ה-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.

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

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

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

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

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].pointerTypes;  // e.g. ["touch"]
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.

משאבים