ניהול הניווט באפליקציות PWA מותקנות

Demián Renzulli
Demián Renzulli
Dan Murphy
Dan Murphy
Dibyajyoti Pal
Dibyajyoti Pal
Vincent Scheib
Vincent Scheib

פורסם: 19 באוגוסט 2025

ניהול הניווט כולל את השיטות לשליטה באופן שבו Progressive Web App‏ (PWA) מטפל בניווט של המשתמשים. רכיב חשוב בתהליך הזה הוא לכידת הניווט, תהליך בדפדפן שקובע אם לחיצה על קישור תפעיל את ה-PWA המותקן או תפתח כרטיסייה חדשה בדפדפן.

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

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

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

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

הגישה החדשה והמאוחדת ללכידת ניווט פותחת קישורים באופן אוטומטי ב-PWA המותקן המתאים. קישורים יפנו לכרטיסיית דפדפן רק אם ה-PWA לא מותקן או אם המשתמש ביטל את ההסכמה. ההתנהגות החדשה הזו זמינה החל מגרסה Chrome 139 ל-Windows, ל-Mac ול-Linux, ותמיכה ב-ChromeOS תתווסף בגרסה עתידית.

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

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

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

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

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

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

המשתמש לוחץ על קישור אל chat.google.com (שהותקן כאפליקציית PWA) מתוך calendar.google.com.

פעולות משתמש

כל פעולת משתמש מורכבת משלושה רכיבים מרכזיים: האירוע (למשל, קליק או הקשה), הפלטפורמה שבה הוא מתרחש (למשל, דף אינטרנט או קיצור דרך בשולחן העבודה) וסוג הקישור שמופעל (למשל, כתובת URL מסוג HTTPS). לדוגמה, פעולה של משתמש יכולה להיות לחיצה על קישור ל-https://chat.google.com/meeting_room_id במסגרת ה-PWA של Google Chat מדף אינטרנט בכתובת calendar.google.com.

החלטות לגבי דפדפן

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

  1. קובעים אם אפשר לתעד את הניווט: באופן כללי, ניווט נחשב כניווט שאפשר לתעד אם הוא יוצר פריים חדש ולא נפתח בהקשר גלישה משני.
  2. זיהוי PWA ששולט בכתובת ה-URL: אם אפשר ללכוד את הניווט, הדפדפן מנסה למצוא PWA ששולט בכתובת ה-URL (נמצא בטווח שמוגדר במניפסט של אפליקציית האינטרנט).
  3. אימות העדפת המשתמש: אם נמצא PWA ששולט בדפדפן, הדפדפן בודק את העדפת המשתמש. אם המשתמש לא ביטל את ההסכמה בהגדרות האפליקציה, אפליקציית ה-PWA תופעל. אחרת, הקישור ייפתח בכרטיסייה חדשה בדפדפן.
  4. הפעלת ה-PWA: הדפדפן מפעיל את ה-PWA באמצעות אלגוריתם הטיפול בהפעלה. אפשר להשפיע על ההתנהגות הזו באמצעות Launch Handler API, שמוסבר בהמשך.

בתרשים הבא מוצג סיכום של התהליך הזה:

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

אמצעי בקרה למפתחים

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

Launch Handler API

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

אפשר להפעיל PWA על ידי התמקדות בחלון קיים או פתיחת חלון חדש.
ממשק ה-API של Launch Handler: מאפשר לקבוע איך אפליקציית ה-PWA תופעל.

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

  • focus-existing: כדי לטפל בקישור בחלון אפליקציה קיים, כמו PWA שכבר פועל במצב עצמאי.
  • navigate-existing: באפשרות הזו, ההקשר האחרון של הגלישה בחלון של אפליקציית אינטרנט, שהייתה אינטראקציה איתו, מועבר לכתובת ה-URL של היעד של ההפעלה.
  • navigate-new: באפשרות הזו נוצר הקשר גלישה חדש בחלון של אפליקציית אינטרנט כדי לטעון את כתובת ה-URL של היעד של ההפעלה.

משתמשים בפרמטר launchQueue API כדי לספק פרמטרים נוספים ולטפל במקרים מיוחדים. ‫Launch Handler API זמין מגרסה Chrome 110, אבל הוא הופך להרבה יותר שימושי עם העדכון של לכידת הניווט. מידע נוסף בנושא זמין במסמכי העזרה בנושא Launch Handler API.

ממשקי API קשורים אחרים

בנוסף לטיפול בהפעלה, ממשקי API אחרים יכולים גם הם למלא תפקיד בתהליך הזה, בהתאם לצרכים הספציפיים של האפליקציה. הם כוללים את URL Protocol Handlers, שמאפשרים לאפליקציית אינטרנט לרשום את היכולת שלה לטפל בסכימות של כתובות URL מעבר ל-http ו-https הרגילים (לדוגמה, פרוטוקולים רגילים כמו mailto: או פרוטוקולים מותאמים אישית כמו web+music). בנוסף, Web App Scope Extensions API (שנמצא כרגע בפיתוח) מאפשר להרחיב את ההיקף של ה-PWA כדי ללכוד קישורים ממקורות אחרים, כולל תת-דומיינים, כך שכאשר משתמש לוחץ על קישור ממקור משויך, אפשר להפעיל את ה-PWA. הסבר מפורט על הנושאים האלה חורג מהיקף המאמר הזה, אבל אפשר לעיין בקישורים הרלוונטיים כדי לקבל מידע נוסף.

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

לפני צילום המסך של הניווט

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

אחרי צילום המסך של הניווט

בסרטון הבא מוצג אותו תהליך עבודה של משתמש, אבל עם התנהגות הניווט החדשה. בגרסה הזו, לחיצה על הקישור ל-Google Chat מיומן Google פותחת את המרחב המתאים ישירות באפליקציית ה-PWA המותקנת. בנוסף, צוות Google Chat הטמיע טיפול בהפעלה על ידי הוספת מאפיין launch_handler למניפסט של אפליקציית האינטרנט. הגדרת הערך client_mode ל-focus-existing מבטיחה שהקישור ייפתח במופע קיים של PWA, אם מופע כזה כבר פועל. הסרת זמן האחזור שקשור לפתיחת כרטיסייה חדשה בדפדפן ואז להפעלת טעינת דף, יכולה לקצר את הזמן שנדרש עד שהמשתמש יכול לבצע אינטראקציה עם הדף. למעשה, ב-Google Chat שיפרנו משמעותית את זמן האחזור של הניווט, כי אין יותר צורך בהפעלת אפליקציה חדשה.

סיכום והשלבים הבאים

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

השלבים השונים שמתוארים במאמר.
תרשים של ניווט בתיעוד (גרסה מלאה)

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