برنامه های وب پیشرو: اعلان & نصب اندازه گیری

1. خوش آمدید

در این آزمایشگاه، یک PWA قابل نصب موجود را می گیرید و یک دکمه نصب سفارشی درون برنامه ای اضافه می کنید. این پنجمین مورد از مجموعه کدهای همراه برای کارگاه برنامه کاربردی وب پیشرو است. کد قبلی از تب به نوار وظیفه بود. سه کد دیگر در این سری وجود دارد.

چیزی که یاد خواهید گرفت

• یک دکمه نصب سفارشی درون برنامه ای PWA ایجاد کنید

آنچه شما باید بدانید

• جاوا اسکریپت

آنچه شما نیاز خواهید داشت

• مرورگری که از Service Workers پشتیبانی می کند

2. راه اندازی کنید

با شبیه‌سازی یا دانلود کد شروع مورد نیاز برای تکمیل این لبه کد شروع کنید:

Repo را شبیه سازی کنید

دانلود فایل فشرده

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شاخه pwa04--prompt-measure-install هستید. فایل فشرده حاوی کد آن شاخه نیز می باشد.

این پایگاه کد به Node.js 14 یا بالاتر نیاز دارد. هنگامی که کد را در دسترس دارید، npm ci از خط فرمان موجود در پوشه کد اجرا کنید تا تمام وابستگی های مورد نیاز خود را نصب کنید. سپس، npm start اجرا کنید تا سرور توسعه برای Codelab راه اندازی شود.

فایل README.md کد منبع توضیحی برای همه فایل های توزیع شده ارائه می دهد. علاوه بر این، فایل‌های موجود کلیدی که در سرتاسر این Codelab با آنها کار خواهید کرد، به شرح زیر است:

فایل های کلیدی

• js/main.js - فایل جاوا اسکریپت برنامه اصلی

3. دکمه نصب را تنظیم کنید

قبل از افزودن درخواست‌های نصب و ثبت رویدادهای نصب، تنظیماتی وجود دارد که باید انجام شود. ابتدا یک فایل js/lib/install.js ایجاد کنید و کد زیر را اضافه کنید:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

سپس، در js/main.js در پایین رویداد DOMContentLoaded ، کد زیر را اضافه کنید:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

توضیح

این کد یک کلاس Install را تنظیم می کند که در مرحله بعدی استفاده می شود و آن را به برنامه در حال اجرا متصل می کند.

4. Install Prompt Listeners را اضافه کنید

به منظور استفاده از ماشه دکمه نصب برای فعال کردن PWA خود برای نصب، باید اعلان نصب را ضبط کنید. وقتی نصب شد، باید دستور نصب ضبط شده را بازنشانی کنید. برای انجام این کار، کدی را بنویسید تا موارد زیر را در constructor کلاس Install در js/lib/install.js انجام دهید:

اعلان نصب عکسبرداری

• به رویداد beforeinstallprompt در window گوش دهید.
• از شلیک رویداد جلوگیری کنید
• اعلان را ضبط کنید
• ماشه دکمه نصب را نشان دهید

هنگام نصب، درخواست را بازنشانی کنید

• به رویداد appinstalled در window گوش دهید.
• درخواست ضبط شده را بازنشانی کنید
• ماشه دکمه نصب را مخفی کنید

5. نصب را از دکمه درون برنامه آغاز کنید

هنگامی که درخواست ضبط شد، دکمه نصب PWA باید بتواند آن را فعال کند. برای انجام این کار، موارد زیر را به کلاس Install در js/lib/install.js اضافه کنید:

• یک روش async برای راه اندازی نصب آن
  • از دستور ضبط شده برای درخواست نصب استفاده می کند
  • await انتخاب کاربر از درخواست باشید
  • درخواست را بازنشانی کنید
  • اگر کاربر درخواست نصب را پذیرفت، دکمه نصب را پنهان کنید
• یک شنونده رویداد click را به دکمه نصب در constructor کلاس اضافه کنید که ماشه نصب را فراخوانی می کند.

6. تبریک!

شما به تازگی یاد گرفته اید که چگونه نصب PWA را از دکمه نصب درون برنامه ای خود راه اندازی کنید.

کدهای بعدی این سری، توانمندسازی شما PWA است