זיהוי ייחודי של אפליקציות 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 וסוגרים אותה כדי לאלץ את הקובץ של המניפסט להתעדכן.
  8. פותחים את about://web-app-internals/ ובודקים את הנכס start_url של ה-PWA ההתקין כדי לוודא שהוא עודכן כצפוי.

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