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

Patrick Brosset

תאריך פרסום: 12 במאי 2026

התקנה של אפליקציות אינטרנט תמיד דרשה JavaScript. כשמשתמשים באירוע beforeinstallprompt, תהליך ההתקנה מתבצע כולו בסקריפט. השינוי הזה מתבצע באמצעות רכיב <install> חדש: מוסיפים רכיב HTML יחיד לדף והדפדפן מעבד בשבילכם לחצן התקנה מהימן, ללא צורך ב-JavaScript.

צוות Microsoft Edge, בשיתוף עם צוות Chrome, הטמיע את רכיב <install> ב-Chromium. היא זמינה עכשיו לבדיקה מאחורי תכונה ניסיונית ב-Chrome או ב-Edge מגרסה 148, ובתור גרסת מקור לניסיון שאפשר להשתמש בה בשני הדפדפנים החל מגרסה 148 ועד גרסה 153.

אתם יכולים לנסות את התכונה הזו ולהשוות אותה ל-Web Install API (navigator.install()) שכולל ניסיון בגרסת מקור משלו.

הבעיה

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

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

הרכיב <install>

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

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

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

התקנת האפליקציה הנוכחית

אם הדף הנוכחי מקשר למניפסט שיש בו שדה id, מספיק להשתמש באלמנט יחיד:

<install></install>

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

התקנה של אפליקציה אחרת

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

<install installurl="https://awesome-app.com/"></install>

אם הדף בכתובת https://awesome-app.com מקשר למניפסט שמוגדר בו שדה id, לא צריך לעשות שום דבר נוסף.

אם לא קיים שדה id, משתמשים במאפיין manifestid כדי לספק מניפסט מחושב id:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

כדי לקבל את המניפסט המחושב id:

1. פותחים את כלי הפיתוח.
2. עוברים לכרטיסייה אפליקציה.
3. בקטע זהות, מעתיקים את הערך של מזהה האפליקציה המחושב.

השימוש בלחצן <install> להתקנת אפליקציות ממקורות אחרים מאפשר לכם ליצור דף קטלוג שבו המשתמשים יכולים להתקין כמה אפליקציות, שלכל אחת מהן יש לחצן <install> משלה.

אספקת תוכן חלופי

אם הדפדפן לא תומך ברכיב <install>, מוצג כל HTML שמוסיפים בתוך הרכיב:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

זיהוי תמיכה

אם תוכן חלופי לא מספיק לתרחיש השימוש שלכם ואתם מעדיפים להטמיע חוויית משתמש שונה בדפדפנים שלא תומכים ברכיב <install>, אתם יכולים להשתמש ב-JavaScript כדי לזהות תמיכה:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

טיפול באירועים

רכיב <install> מפעיל אירועים שאפשר להאזין להם כדי לדעת אם הפעולה הצליחה, אם היא נדחתה או אם יש שגיאות אימות:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

אני רוצה לנסות

כדי לנסות את רכיב <install> היום, יש לכם שתי אפשרויות:

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

בדיקה מקומית

כדי לבדוק את הרכיב במכשיר שלכם היום:

1. להשתמש ב-Chrome או ב-Edge בגרסה 148 ואילך.
2. עוברים אל about://flags/#web-app-install-element בכרטיסייה חדשה.
3. מעבירים את ההגדרה Web App Install Element (רכיב להתקנת אפליקציית אינטרנט) למצב Enabled (מופעל).
4. מפעילים מחדש את הדפדפן.

בדיקה באתר הפעיל באמצעות גרסת מקור לניסיון

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

1. פותחים את דף הרישום של גרסת המקור לניסיון <install>.
2. מתחברים לחשבון.
3. לוחצים על הרשמה.
4. מזינים את המקור של האתר וממלאים את שאר הטופס.
5. אחרי שליחת הטופס, מקבלים מחרוזת של טוקן.
6. מוסיפים את הטוקן לדפים באתר באמצעות תג <meta>:

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

אפשר גם לשלוח את האסימון ככותרת תגובה של HTTP:

Origin-Trial: YOUR_TOKEN_HERE

גרסת המקור לניסיון זמינה גם ב-Chrome וגם ב-Edge בגרסאות 148 עד 153, ואותו טוקן יעבוד בשני הדפדפנים. מידע נוסף על תקופות ניסיון של מקורות

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

הדגמה

מומלץ לעיין ב<install> הדגמה של Element Store, קטלוג PWA שמשתמש ברכיב <install> כדי לאפשר לכם להתקין כמה אפליקציות לדוגמה.

השוואה ל-Web Install API

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

בעבר, ערכנו ניסויים ב-Web Install API ‏ (navigator.install()), שהוא ממשק API של JavaScript שמאפשר לאתר שלכם להפעיל התקנה של אפליקציות אינטרנט מאותו מקור או ממקורות שונים. מידע נוסף זמין במאמר Web Install API מוכן לבדיקה.

ל-Web Install API יש גם גרסת מקור לניסיון משלו.

הנה השוואה בין שתי הגישות:

דעתכם חשובה לנו

אנחנו בודקים באופן קבוע את המשוב שנשלח אלינו לגבי שני הגישות. בהתאם לצרכים שלכם, נוכל להוסיף תמיכה ברכיב <install>, ב-API‏ navigator.install() או בשניהם.

כדי לשתף משוב על הרכיב <install>, פותחים בעיה במאגר WICG שמוקדש להצעה הזו.

כדי לשתף משוב על navigator.install() ה-API, מוסיפים תגובה לבעיה Developer Feedback: navigator.install versus <install> element.

משאבים

• הסבר: רכיב <install>
• הדגמה: מאגר רכיבי <install>
• הוראות שימוש ומקור הדגמה
• כניסה לסטטוס של פלטפורמת Chrome
• ה-Web Install API מוכן לבדיקה (בלוג Edge)
• הסבר על Web Install API