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

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

חלון ה-PWA

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

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

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

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

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

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

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

מצב כרטיסיות

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

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

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

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

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

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

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

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

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

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

פרטי המסך מתקבלים

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 הזה בקטע שליטה מלאה עם Virtual Keyboard API.

משאבים