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

واو، مهما فعلت، يظهر هذا الملف الذي حوّلتُه إلى PNG بصيغة JPEG. في البداية ظننتُ أن برنامج Preview قد قام بعملية تحويل رديئة، لكنني استخدمتُ بعد ذلك برنامج Affinity Photo الذي يُعتَبر موثوقًا.

لا أعتقد أنني غيّرتُ تلك الإعدادات منذ أن لا يوجد خيار ‘إعادة الضبط’ بجانبها.

عندما أرفع صورة أخرى بصيغة PNG، أرى أن النوع يثبت. يبدو أن هناك شيئًا في هذا الملف يجعل Discourse يريد تحويله حقًا. هل لديكم أفكار؟

3 إعجابات

لقد واجهت خطأً معروفًا (وإن كان نادرًا!) تم إصلاحه من خلال الإلتزام المذكور أعلاه. ومع ذلك، فإن هذا الإلتزام غير موجود بعد في إصدار مستقر من Discourse.

يجب أن يؤدي ضبط recompress original jpg quality على 100 بشكل مؤقت إلى منع حدوث التحويل.

(…أو يمكنك محاولة خفض جودة ملف PNG الذي تقوم بتصديره ليكون أقل من قيمة إعداد recompress original jpg quality.)

فقط تأكد من إعادة تعيين هذا الإعداد إلى قيمته السابقة بعد رفع الشعار!

3 إعجابات

أعتقد أنني يجب أن أحصل على وسام لوقوعي في خطوتين من أخطاء Discourse في أسبوع واحد. :slight_smile:

ومع ذلك، فقد قمت بكلا الخطوتين ومع ذلك لا يزال الملف يُحوَّل إلى JPEG. قمت بضبط الإعداد على 100%، ثم حفظت الصورة بصيغة JPG بنسبة 92%، ثم exportedها بصيغة PNG (لم أستطع تغيير الجودة مباشرة في PNG؟). هل هناك أي أفكار أخرى للحلول البديلة، أو شيء ربما أخطأت فيه؟

إعجاب واحد (1)

بعد التبديل إلى الفرع stable، يمكنني تكرار المشكلة (المعروفة):

لكن لا يمكنني تكرار المشكلة باستخدام الحل البديل المقترح:

أنا في حيرة من أمري، للأسف!

لا يظهر أيضًا في متصفح موزيلا فايرفوكس.

هل هناك سبب لعدم ظهور شريط التثبيت هذا على أجهزة iOS (خاصة الآن بعد دعمها لتطبيقات الويب التقدمية)؟

نعم، تعمل بشكل مذهل على جهاز Pixelbook Go الخاص بي. تُعد تطبيقات الويب التقدمية ضرورة على نظام تشغيل كروم.

لأن متصفح iOS لا يحتوي على هذه الميزة وليس لديه خطط لإضافتها.

إعجابَين (2)

ما اقترحته سابقًا، لماذا لا يكون هناك زر أو رابط في مكان ما على الموقع الإلكتروني لتثبيت تطبيق الويب التقدمي (PWA)، كما هو موضح في هذا المقال.

لدينا هذا بالفعل منذ سنوات:

عذراً، أنا أتحدث عن زر/رابط مستمر أقل بروزاً، ربما في القائمة، للمستخدمين الذين لا يملكون تطبيق الويب التقدمي (PWA).

السبب الذي يجعلني أرى هذا مفيداً هو أنه عندما يكون لدينا مستخدم يريد تثبيت التطبيق، لا نعرف ما هي حالته الحالية، ويتطلب الأمر الكثير من الجهد لإجراء جلسة أسئلة وأجوبة. سيكون من الرائع لو كان هناك عملية من خطوتين موثوقة يمكن أن نقدمها لهم: أي، الذهاب إلى قائمة الهامبرغر → تثبيت التطبيق. بهذه الطريقة، لا نحتاج إلى القلق بشأن لغتهم الأم، أو عدد مرات الزيارة، أو ما إذا كان قد أغلق لافتة إعلانية أو قام بإلغاء التثبيت في الماضي، أو ما هو المتصفح الذي يستخدمونه، أو كيف يعرض خيار التثبيت.

3 إعجابات

هذا هو سير العمل الحالي حرفيًا :joy:

على الأرجح، يكمن جزء كبير من الارتباك هنا (بما في ذلك ارتباكي أنا) في أن هناك خيارًا مختلفًا لتثبيت تطبيقات الويب التقدمية (PWA) اعتمادًا على المتصفح:

  1. متصفح كروم على أجهزة أندرويد (أي المتصفح الافتراضي): أفترض أن هذا هو المكان الذي حصلت منه على لقطات الشاشة التي شاركتها. إذن، يبدو أنه في هذا المتصفح، يوجد خيار “تثبيت التطبيق” في قائمة الهامبرغر. سيكون رائعًا لو كان هذا الخيار متاحًا في جميع المتصفحات، لكن يبدو أنه غير ممكن حاليًا.

  2. متصفح سفاري على آيفون (المتصفح الافتراضي): لا يوجد زر للتثبيت في قائمة الهامبرغر. للتثبيت، يجب النقر على أيقونة المشاركة (مربع مع سهم للأعلى)، ثم التمرير للأسفل إلى خيار “إضافة إلى الشاشة الرئيسية”. أفترض من النقاش هنا أنه لا يمكن إضافة الزر إلى قائمة الهامبرغر. ومع ذلك، فإن هذا يحفظ التطبيق على الشاشة الرئيسية، رغم أنني لست متأكدًا مما إذا كان هذا كافياً لمنحه وظائف تطبيق الويب التقدمي (PWA)، مثل حفظ الحالة السابقة.

  3. كروم على سطح المكتب: لا أرى زر التثبيت في قائمة الهامبرغر في متصفح كروم على جهاز ماك الخاص بي. هل من المفترض أن يكون موجودًا هناك؟ هل يمكن إضافته؟

  4. سفاري على سطح المكتب: لا أرى زر التثبيت في قائمة الهامبرغر في متصفح سفاري على جهاز ماك الخاص بي أيضًا. هل من المفترض أن يكون موجودًا هناك؟ هل يمكن إضافته؟

إعجاب واحد (1)

نعم، ما يقوله @JQ331 صحيح.

حل فالكو هو قائمة Chrome. عندما أقول “قائمة الهامبرغر”، فأنا أعني قائمة Discourse وليس متصفح الويب. ونظرًا لأن بعض الأشخاص في الأعلى أشاروا إلى أنها لا تعمل في Safari أو Firefox، فإن هذا الخيار يعتمد على المتصفح. بافتراض أنه يمكن تثبيته هناك، فإن الخيار ببساطة غير متاح، لذا يبدو أن خيار قائمة Discourse هو الأفضل. بالإضافة إلى ذلك، فهو يذكر المستخدم بوجود هذا الخيار، بينما قد لا يبحثون أبدًا في قائمة Chrome.

إعجاب واحد (1)

لا يمكنك إضافة أزرار تثبيت على أي شيء تتحكم فيه Apple، وقد أعلنت Apple مرارًا وتكرارًا أنها لا ترغب في السماح للمطورين بإنشاء هذه الأزرار مطلقًا.

هو موجود لدي:

كما أنه موجود في شريط العناوين على سطح المكتب.

لا تظهره على موقعك بسبب مسألة شعار JPG بالكامل. تعد PWA هدفًا سريع التغير، وتتغير المعايير باستمرار. أنصحك باستخدام قناة الإصدار الافتراضية لدينا إذا كنت تريد أقصى توافق مع PWA.

3 إعجابات

كنت أشير إلى قائمة هامبرغر الخاصة بـ Discourse (وليس قائمة Chrome). في الواقع، أرى الآن أن لقطات شاشة نظام Android كانت مأخوذة أيضًا من قائمة Chrome، وليس من قائمة هامبرغر الخاصة بـ Discourse.

سيكون من الجيد وجود الزر في قائمة هامبرغر الخاصة بـ Discourse؛ حيث سيراه المستخدم بشكل أكثر تكرارًا، وسيكون الأمر أكثر وضوحًا من حيث كيفية إرشاد المستخدمين لتثبيته كتطبيق ويب تقدمي (PWA). ربما لا يستحق ذلك جهدًا كبيرًا من المطورين، لكنه سيكون لمسة مفيدة.

يبدو أن متصفحات كروميوم هي الوحيدة التي تحتوي على موجه التثبيت. يعتمد كل من موزيلا فايرفوكس وسفاري على محركات تصيير مختلفة.

إعجاب واحد (1)

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

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

أضف كود 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 إعجابات

رائع! هل تفكر في جعله مكون سمة رسمي؟ أو الأفضل من ذلك، تعديل مكون سمة روابط الهامبرغر لتشمل ذلك؟ لأن هذا هو المكان الذي أرغب فيه!

إعجابَين (2)

هل يمكنك رفع الكود المعدن الذي يظهر فيه زر تثبيت التطبيق في قائمة الهامبرغر؟

إعجاب واحد (1)

لا يبدو أنني أستطيع تشغيل هذا. بصراحة، أنا جديد على كل هذا.

لقد قمت بتحميل المكون، وأضفت جافاسكريبت إلى الرأس، وقمت بتعيين المكون على السمة الافتراضية.

ولكن بعد ذلك النص البرمجي لـ HTML - هل من الممكن وضع HTML في منشور؟ لا يبدو الأمر كذلك. إذا لم يكن الأمر كذلك، فأين يمكنني وضعه بشكل مفيد؟

شكرا! آمل حقًا أن يساعدني هذا.

أعتقد أن هذا سيعمل فقط على نظام أندرويد؟