نصب برنامه‌های وب با عنصر نصب جدید HTML

پاتریک بروسه
Patrick Brosset
Homepage

منتشر شده: ۱۲ مه ۲۰۲۶

نصب برنامه‌های وب همیشه به جاوا اسکریپت نیاز داشته است. وقتی از رویداد beforeinstallprompt استفاده می‌کنید، جریان نصب کاملاً در اسکریپت اجرا می‌شود. عنصر جدید <install> این وضعیت را تغییر می‌دهد: یک عنصر HTML را در صفحه خود قرار دهید و مرورگر یک دکمه نصب قابل اعتماد را برای شما نمایش می‌دهد، بدون اینکه به جاوا اسکریپتی نیاز باشد.

تصویر

تیم مایکروسافت اج، با همکاری تیم کروم، عنصر <install> را در کرومیوم پیاده‌سازی کرد. اکنون می‌توانید آن را با پرچمی در کروم یا اج از نسخه ۱۴۸ به بعد آزمایش کنید، و به عنوان یک نسخه آزمایشی اصلی که می‌توانید در هر دو مرورگر از ۱۴۸ شروع و به ۱۵۳ ختم شود، از آن استفاده کنید.

آن را امتحان کنید و ببینید که چگونه با API نصب وب ضروری ( navigator.install() ) که نسخه آزمایشی اصلی خود را دارد، مقایسه می‌شود.

مشکل

نصب برنامه‌های وب به صورت تکه‌تکه انجام می‌شود. هر مرورگر مجموعه نقاط ورودی خاص خود را دارد، به عنوان مثال آیکون‌های نوار آدرس، آیتم‌های منو و اعلان‌ها. توسعه‌دهندگان کنترل محدودی بر زمان و نحوه نمایش جریان نصب دارند.

ساختن یک تجربه شبیه به اپ استور که به کاربران اجازه دهد برنامه‌های دیگر را از سایت شما نصب کنند، سخت‌تر است، زیرا نصب از نظر تاریخی محدود به صفحه فعلی بوده است.

عنصر <install>

محتوا و نحوه‌ی نمایش عنصر جدید <install> در HTML توسط مرورگر کنترل می‌شود. مشابه سایر عناصر مجوز مانند <geolocation> ، کنترل مرورگر بر متن، زبان و ظاهر برچسب دکمه به این معنی است که می‌تواند به کلیک کاربر به عنوان یک سیگنال واقعی از قصد و نیت او اعتماد کند.

کاربری که روی دکمه‌ای با عنوان «نصب برنامه‌ی شگفت‌انگیز» کلیک می‌کند، بعید است از ظاهر شدن پیام نصب شگفت‌زده شود.

از آنجا که مرورگر دکمه را رندر می‌کند، شما یک فرآیند نصب مطمئن با حداقل کد دریافت می‌کنید و نیازی به تنظیم فرآیند beforeinstallprompt در جاوا اسکریپت ندارید.

برنامه فعلی را نصب کنید

اگر صفحه فعلی به مانیفستی که دارای فیلد id است لینک شده باشد، تنها به یک عنصر نیاز دارید:

<install></install>

مرورگر دکمه را با متن و آیکون‌های استاندارد نمایش می‌دهد و وقتی کاربر روی آن کلیک می‌کند، روند نصب عادی مرورگر آغاز می‌شود.

یک برنامه متفاوت نصب کنید

برای نصب یک برنامه وب که در مبدا متفاوتی نسبت به صفحه فعلی قرار دارد، از ویژگی installurl برای اشاره به برنامه وب دیگر استفاده کنید:

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

اگر صفحه https://awesome-app.com به یک مانیفست لینک شده باشد که یک فیلد id را تعریف می‌کند، تنها کاری که باید انجام دهید همین است.

اگر فیلد id وجود ندارد، از ویژگی manifestid برای ارائه یک id محاسبه‌شده id استفاده کنید:

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

برای دریافت id مانیفست محاسبه شده:

  1. ابزار توسعه (DevTools) را باز کنید.
  2. به برگه برنامه بروید.
  3. در بخش Identity ، مقدار Computed App ID را کپی کنید.

استفاده از دکمه <install> برای نصب سایر برنامه‌های اصلی به این معنی است که می‌توانید یک صفحه کاتالوگ ایجاد کنید که به کاربران امکان نصب چندین برنامه را می‌دهد، که هر کدام دکمه <install> مخصوص به خود را دارند.

محتوای جایگزین ارائه دهید

اگر مرورگر از عنصر <install> پشتیبانی نکند، هر کد HTML که درون عنصر قرار دهید، نمایش داده می‌شود:

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

تشخیص پشتیبانی

اگر محتوای جایگزین برای مورد استفاده شما کافی نیست و ترجیح می‌دهید تجربه کاربری متفاوتی را در مرورگرهایی که از عنصر <install> پشتیبانی نمی‌کنند، پیاده‌سازی کنید، از جاوا اسکریپت برای تشخیص پشتیبانی استفاده کنید:

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. از کروم یا اج نسخه ۱۴۸ یا بالاتر استفاده کنید.
  2. در یک تب جدید به about://flags/#web-app-install-element بروید.
  3. عنصر نصب برنامه وب را روی فعال تنظیم کنید.
  4. مرورگر را مجدداً راه اندازی کنید.

با استفاده از نسخه آزمایشی origin، روی سایت اصلی خود تست کنید

نسخه آزمایشی Origin به کاربران واقعی در سایت اصلی شما اجازه می‌دهد بدون نیاز به فعال کردن اولیه پرچم، از این ویژگی استفاده کنند.

  1. صفحه ثبت نام آزمایشی <install> element origin را باز کنید.
  2. وارد سیستم شوید.
  3. روی ثبت نام کلیک کنید.
  4. مبدا سایت خود را وارد کنید و بقیه فرم را پر کنید.
  5. پس از ارسال فرم، یک رشته توکن دریافت می‌کنید.
  6. با استفاده از تگ <meta> توکن را به صفحات سایت خود اضافه کنید: 
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

به عنوان یک روش جایگزین، می‌توانید توکن را به عنوان هدر پاسخ HTTP ارسال کنید:

Origin-Trial: YOUR_TOKEN_HERE

نسخه آزمایشی origin برای هر دو مرورگر کروم و اج در نسخه‌های ۱۴۸ تا ۱۵۳ در دسترس است و توکن یکسانی در هر دو مرورگر کار خواهد کرد. برای کسب اطلاعات بیشتر در مورد نسخه‌های آزمایشی origin، به لینک زیر مراجعه کنید:

آن را در عمل ببینید

نسخه آزمایشی فروشگاه عنصر <install> را بررسی کنید، یک کاتالوگ PWA که از عنصر <install> برای نصب چندین برنامه نمونه استفاده می‌کند.

مقایسه با API نصب وب

عنصر <install> تنها راهی نیست که ما برای بهبود نصب برنامه‌ها در وب آزمایش می‌کنیم.

پیش از این، ما با API نصب وب ( navigator.install() ) آزمایش کردیم، که یک API جاوا اسکریپت ضروری است که به سایت شما اجازه می‌دهد نصب برنامه‌های وب با منشاء یکسان یا بین منشاء را آغاز کند. برای کسب اطلاعات بیشتر، به «API نصب وب آماده آزمایش است» مراجعه کنید.

API نصب وب همچنین نسخه آزمایشی اصلی خود را دارد.

در اینجا نحوه مقایسه این دو رویکرد آورده شده است:

عنصر رابط navigator.install()
رویکرد HTML اعلانی جاوا اسکریپت دستوری
کد مورد نیاز یک عنصر HTML واحد جاوا اسکریپت برای فراخوانی navigator.install() و مدیریت promise برگشتی
اعتماد مرورگر بالا: مرورگر، محتوا و ظاهر دکمه را کنترل می‌کند، مشابه عناصر مجوز کم: به عنوان یک سیگنال اعتماد، نیاز به فعال‌سازی کاربر (کلیک، لمس) دارد
نصب بین مبدائی بله، با installurl بله، با ارسال یک URL به navigator.install()
سفارشی‌سازی مینیمال: مرورگر تصمیم می‌گیرد که دکمه چگونه به نظر برسد کامل: شما رابط کاربری خودتان را طراحی می‌کنید و از هر تعاملی API را فراخوانی می‌کنید
بازگشت به عقب داخلی: اگر عنصر پشتیبانی نشود، محتوای فرزند رندر می‌شود شما منطق تشخیص ویژگی و جایگزین خودتان را می‌نویسید
بهترین برای دکمه‌های نصب کشویی با حداقل کد؛ سناریوهایی که رابط کاربری قابل اعتماد مرورگر مطلوب است جریان‌های نصب سفارشی، رابط‌های کاربری کاتالوگ پویا، ادغام با رابط‌های کاربری موجود که جاوااسکریپت زیادی دارند

به ما اطلاع دهید که چه فکر می‌کنید

ما به طور فعال در حال دریافت بازخورد در مورد هر دو رویکرد هستیم. بسته به نیاز شما، می‌توانیم پشتیبانی از عنصر <install> یا API مربوط navigator.install() یا هر دو را اضافه کنیم.

برای به اشتراک گذاشتن بازخورد در مورد عنصر <install> ، یک موضوع (issue) در مخزن WICG که به این پیشنهاد اختصاص داده شده است، باز کنید .

برای به اشتراک گذاشتن بازخورد در مورد API مربوط به navigator.install() ، نظری به بخش « بازخورد توسعه‌دهندگان: مشکل عنصر navigator.install در مقابل <install> » اضافه کنید.

منابع