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

Pete LePage

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

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

מה המאפיין id עושה?

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

תמיכה בדפדפנים

התמיכה בנכס id נוספה ב-Chrome 96.

מה עושים אם יש אפליקציה ללא id?

אין צורך לבצע שום פעולה, ושום דבר לא יקרה אם לא תוסיפו id לקובץ המניפסט של אפליקציית האינטרנט (כל עוד start_url ונתיב המניפסט לא ישתנו). כדי שה-PWA שלכם יהיה עמיד בפני שינויים עתידיים, תוכלו להוסיף את המאפיין id למניפסט של אפליקציית האינטרנט.

איך קובעים ומגדירים את id?

הדרך הבטוחה והמדויקת ביותר לקבוע את הערך של id לאפליקציית PWA היא לבדוק את הערך שמחושב על ידי Chrome.

  1. ב-Chrome מגרסה 96 ואילך, פותחים את החלונית Manifest בחלונית Application ב-DevTools.
  2. הערה מתחת למאפיין Computed App Id תופיע כאשר id לא יצוין בקובץ המניפסט של אפליקציית האינטרנט.
  3. מעתיקים את הערך של id שמוצג בהערה (ראו צילום המסך בהמשך).
  4. מוסיפים נכס id למניפסט של אפליקציית האינטרנט באמצעות הערך id שמוצג בהערה.

מזהה האפליקציה הממוחשבת בחלונית 'אפליקציה' ב-DevTools.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

מה קורה אם לא מגדירים id?

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

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

איך אפשר לבדוק את זה?

כדי לבדוק את ההתנהגות, מבצעים את השלבים הבאים:

  1. מתקינים את ה-PWA.
  2. פותחים את about://web-app-internals/ ובודקים את הנכס manifest_id ואת הנכס start_url של אפליקציית ה-PWA שהותקנה.
  3. מוסיפים נכס id למניפסט של אפליקציית האינטרנט לפי השלבים שמפורטים בקטע איך קובעים ומגדירים את id למעלה.
  4. מפעילים מחדש את הדפדפן באמצעות chrome://restart, פותחים את אפליקציית ה-PWA מ-about://apps וסוגרים אותה כדי לאלץ את הקובץ של המניפסט להתעדכן.
  5. פותחים את about://web-app-internals/ ובודקים את הנכס manifest_id של אפליקציית ה-PWA שהותקנה כדי לוודא שהיא לא השתנתה.
  6. משנים את start_url במניפסט של אפליקציית האינטרנט.
  7. מפעילים מחדש את הדפדפן באמצעות chrome://restart, מפעילים את ה-PWA מ-about://apps, ואז סוגרים את ה-PWA כדי לאלץ רענון של קובץ המניפסט.
  8. פותחים את about://web-app-internals/ ובודקים את הנכס start_url של ה-PWA שהותקן כדי לוודא שהוא עודכן כצפוי.

מקורות מידע נוספים