تسهيل تثبيت Discourse كتطبيق ويب تقدمي (PWA)

ساهم ميزة
38

لقد أضفت الزر ببساطة عن طريق إنشاء مكون سمة.

ما عليك سوى إنشاء مكون سمة جديد.

أضف كود JavaScript التالي، مثلاً في رأس الصفحة:

<script>
    let deferredPrompt; // يسمح بإظهار موجه التثبيت
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("تم تشغيل beforeinstallprompt");
  // منع Chrome 76 والإصدارات الأقدم من إظهار الموجه تلقائياً
  e.preventDefault();
  // حفظ الحدث لتفعيله لاحقاً.
  deferredPrompt = e;
  // إظهار زر التثبيت
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // إظهار الموجه
  deferredPrompt.prompt();
  installButton.disabled = true;

  // انتظار استجابة المستخدم للموجه
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("تم قبول إعداد PWA");
      installButton.hidden = true;
    } else {
      console.log("تم رفض إعداد PWA");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("تم تشغيل appinstalled", evt);
});
</script>

ثم ضع كود HTML التالي في أي مكان تريد فيه ظهور زر التثبيت:

<button id="install_button" hidden>تثبيت</button>

يكون الزر مخفياً افتراضياً وسيظهر فقط إذا لم يكن تطبيق الويب التقدمي (PWA) مثبتاً.

لقد جربته على متصفح Chrome.

6 إعجابات