تثبيت تطبيقات الويب باستخدام عنصر التثبيت الجديد في HTML

Patrick Brosset

تاريخ النشر: 12 مايو 2026

لطالما كان تثبيت تطبيقات الويب يتطلّب JavaScript. عند استخدام حدث beforeinstallprompt، يتم تنفيذ عملية التثبيت بالكامل في النص البرمجي. يغيّر عنصر <install> الجديد ذلك، إذ يمكنك إدراج عنصر HTML واحد في صفحتك وسيعرض المتصفّح زر تثبيت موثوقًا لك بدون الحاجة إلى JavaScript.

الصورة

نفّذ فريق Microsoft Edge، بالتعاون مع فريق Chrome، العنصر <install> في Chromium. يمكنك الآن تجربة هذه الميزة من خلال تفعيل علامة في الإصدار 148 من Chrome أو Edge، كما يمكنك استخدامها في كلا المتصفّحين من خلال مرحلة التجربة والتقييم التي تبدأ بالإصدار 148 وتنتهي بالإصدار 153.

جرِّبها وتعرَّف على كيفية مقارنتها بواجهة برمجة التطبيقات الإلزامية Web Install API (navigator.install())، والتي تتضمّن تجربة أصل خاصة بها.

المشكلة

تتجزّأ عملية تثبيت تطبيق الويب. يتضمّن كل متصفّح مجموعة نقاط دخول خاصة به، مثل رموز شريط العناوين وعناصر القائمة والطلبات. يتمتع المطوّرون بتحكّم محدود في وقت عرض عملية التثبيت وكيفية عرضها.

إنّ إنشاء تجربة مشابهة لتجربة متجر التطبيقات تتيح للمستخدمين تثبيت تطبيقات أخرى من موقعك الإلكتروني هو أمر أكثر صعوبة، لأنّ عملية التثبيت كانت في السابق محصورة بالصفحة الحالية.

العنصر <install>

يتحكّم المتصفّح في محتوى عنصر <install> الجديد في HTML وطريقة عرضه. على غرار عناصر الأذونات الأخرى، مثل <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. استخدِم الإصدار 148 من Chrome أو Edge أو الإصدارات الأحدث.
  2. انتقِل إلى about://flags/#web-app-install-element في علامة تبويب جديدة.
  3. اضبط عنصر تثبيت تطبيق الويب على مفعّل.
  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، وسيعمل الرمز المميز نفسه في كلا المتصفّحَين. لمزيد من المعلومات حول الإصدارات التجريبية من المصدر، يُرجى الاطّلاع على:

أمثلة واقعية

يمكنك الاطّلاع على <install> Element Store التجريبي، وهو كتالوج لتطبيقات الويب التقدّمية يستخدم العنصر <install> للسماح لك بتثبيت العديد من التطبيقات النموذجية.

مقارنة بواجهة Web Install API

إنّ العنصر <install> ليس الطريقة الوحيدة التي نختبر من خلالها كيفية تحسين عمليات تثبيت التطبيقات على الويب.

في السابق، جرّبنا Web Install API (navigator.install())، وهي واجهة برمجة تطبيقات JavaScript إلزامية تتيح لموقعك الإلكتروني أيضًا بدء عملية تثبيت تطبيقات الويب من المصدر نفسه أو من مصادر متعددة. لمزيد من المعلومات، يُرجى الاطّلاع على واجهة برمجة التطبيقات Web Install API أصبحت جاهزة للاختبار.

تتضمّن Web Install API أيضًا مرحلة التجربة والتقييم خاصة بها.

في ما يلي مقارنة بين الطريقتَين:

عنصر navigator.install() API
المنهجية HTML تعريفي Imperative JavaScript
يجب إدخال الرمز عنصر HTML واحد JavaScript لاستدعاء navigator.install() ومعالجة الوعد الذي تم إرجاعه
ثقة المتصفّح عالية: يتحكّم المتصفّح في محتوى الزر ومظهره، على غرار عناصر الأذونات مستوى الثقة منخفض: يتطلّب إجراءً من المستخدم (مثل النقر) كإشارة ثقة
التثبيت المشترك المصدر نعم، باستخدام installurl نعم، من خلال تمرير عنوان URL إلى navigator.install()
التخصيص الحد الأدنى: يحدّد المتصفّح شكل الزر كاملة: يمكنك تصميم واجهة المستخدم الخاصة بك وطلب البيانات من واجهة برمجة التطبيقات من أي تفاعل
الخيار الاحتياطي مضمّن: يتم عرض محتوى العنصر الفرعي إذا كان العنصر غير متوافق كتابة منطق رصد الميزات والاحتياط بنفسك
الأفضل في: أزرار التثبيت المضمّنة التي تتضمّن الحد الأدنى من الرموز البرمجية، والحالات التي تكون فيها واجهة المستخدم الموثوق بها من المتصفّح مرغوبة مسارات التثبيت المخصّصة، وواجهات المستخدم الديناميكية للكتالوج، والدمج في الواجهات الحالية التي تستخدم JavaScript بشكل كبير

يسرّنا أن نعرف رأيك

نحن نسعى جاهدين للحصول على ملاحظات حول كلتا الطريقتين. بناءً على احتياجاتك، يمكننا إضافة دعم للعنصر <install> أو واجهة برمجة التطبيقات navigator.install() أو كليهما.

لمشاركة ملاحظات حول العنصر <install>، يُرجى فتح مشكلة في مستودع WICG المخصّص لهذا الاقتراح.

لمشاركة ملاحظات حول واجهة برمجة التطبيقات navigator.install()، أضِف تعليقًا إلى المشكلة ملاحظات المطوّرين: مقارنة بين navigator.install والعنصر <install>.

الموارد