تتيح لك العديد من المتصفحات تفعيل عملية التثبيت والترويج لها. من تطبيق الويب التقدّمي (PWA) مباشرةً من خلال واجهة المستخدم يتيح "التثبيت" (الذي كان يُعرف أحيانًا باسم "الإضافة إلى الشاشة الرئيسية") للمستخدمين تثبيت تطبيق الويب التقدّمي (PWA) على أجهزتهم الجوّالة أو أجهزة الكمبيوتر المكتبي يؤدي تثبيت تطبيق ويب تقدّمي (PWA) إلى إضافته إلى حساب المستخدم مشغّل التطبيقات حتى يمكن تشغيله مثل أي تطبيق آخر مثبَّت.
بالإضافة إلى تجربة التثبيت التي يوفّرها المتصفّح، يمكنك توفير خطوات تثبيت مخصصة مباشرة داخل تطبيقك.
عند التفكير في الترويج للتثبيت، ضع في اعتبارك كيف يمكن للمستخدمين
استخدام تطبيق الويب التقدّمي (PWA) على سبيل المثال، إذا كانت هناك مجموعة من المستخدمين الذين يستخدمون تطبيق الويب التقدّمي PWA عدّة
مرات في الأسبوع، قد يستفيد هؤلاء المستخدمون من الراحة الإضافية
تشغيل تطبيقك من شاشة رئيسية للهاتف أو من قائمة "ابدأ" في كمبيوتر مكتبي
نظام التشغيل. تستفيد أيضًا بعض تطبيقات الإنتاجية والترفيه
من مساحة الشاشة الإضافية التي تم إنشاؤها عن طريق إزالة أشرطة أدوات المتصفح من
نافذة في وضع standalone أو minimal-ui المثبَّت.
المتطلبات الأساسية
قبل البدء، تأكَّد من أنّ تطبيق الويب التقدّمي (PWA) يستوفي متطلبات قابلية التثبيت، والتي عادةً ما تتضمّن بيان تطبيق الويب.
ترقية التثبيت
لإظهار أنّ تطبيق الويب التقدّمي الخاص بك قابل للتثبيت ولتوفير خيار مسار التثبيت داخل التطبيق:
- يرصد الحدث
beforeinstallprompt. - احفظ حدث
beforeinstallpromptلتتمكّن من بدء عملية التثبيت. لاحقًا. - تنبيه المستخدم بأنّ تطبيق الويب التقدّمي (PWA) قابل للتثبيت مع توفير زر أو غير ذلك لبدء تدفق التثبيت داخل التطبيق.
الاستماع إلى حدث "beforeinstallprompt"
إذا كان تطبيق الويب التقدّمي يستوفي معايير التثبيت المطلوبة:
ينشّط المتصفّح حدث beforeinstallprompt. احفظ مرجعًا للحدث.
وتعديل واجهة المستخدم للإشارة إلى أنّ المستخدم يمكنه تثبيت تطبيق الويب التقدّمي (PWA)
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
مسار التثبيت داخل التطبيق
لتوفير إمكانية التثبيت داخل التطبيق، يجب توفير زر أو عنصر واجهة آخر
يمكن للمستخدم النقر عليها لتثبيت التطبيق عند النقر على العنصر أو
تم النقر عليه، للاتصال بـ prompt() في حدث beforeinstallprompt المحفوظ (المحفوظ في
deferredPrompt). ويعرض للمستخدم مربّع حوار تثبيت نمطي، يسأل
لتأكيد رغبتهم في تثبيت تطبيق الويب التقدّمي (PWA).
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
تمثّل السمة userChoice وعودًا يتم حلها وفقًا لاختيار المستخدم.
يمكنك طلب "prompt()" في الحدث المؤجل مرّة واحدة فقط. إذا كان المستخدم
يرفضه، وعليك الانتظار إلى حين وقوع الحدث "beforeinstallprompt".
يتم إطلاقها مرة أخرى، عادةً بعد موقع userChoice مباشرةً
تم حلها.
رصد وقت تثبيت تطبيق الويب التقدّمي (PWA) بنجاح
يمكنك استخدام السمة userChoice لتحديد ما إذا كان المستخدِم قد ثبَّتها.
تطبيقك من داخل واجهة المستخدم. إذا ثبَّت المستخدم تطبيق الويب التقدّمي (PWA)
من شريط العناوين أو من مكوّن المتصفّح الآخر، لن يساعدك userChoice.
وبدلاً من ذلك، ننصحك بالاستماع إلى حدث "appinstalled" الذي يتم تنشيطه متى شئت.
تثبيت تطبيق الويب التقدّمي (PWA) بغض النظر عن الآلية المستخدمة لتثبيته.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
التعرّف على كيفية إطلاق تطبيق الويب التقدّمي (PWA)
يشير الاستعلام عن وسائط display-mode لصفحات الأنماط المتتالية (CSS) إلى كيفية إطلاق تطبيق الويب التقدّمي (PWA)، إما في
أو علامة تبويب متصفّح، أو كتطبيق ويب تقدّمي مثبَّت. وهذا يجعل من الممكن تطبيق مختلف
الأنماط بناءً على كيفية تشغيل التطبيق. على سبيل المثال، يمكنك ضبط إعدادات التطبيق
إخفاء زر التثبيت دائمًا وتوفير زر الرجوع عند تشغيله
تطبيق الويب التقدّمي (PWA) المثبّت.
تتبُّع كيفية إطلاق تطبيق الويب التقدّمي (PWA)
لتتبُّع كيفية تشغيل المستخدمين لتطبيق الويب التقدّمي (PWA)، استخدِم matchMedia() لاختبار
استعلام عن الوسائط (display-mode). إنّ متصفّح Safari على iOS غير متوافق مع هذه الميزة بعد، لذا يجب.
بدلاً من ذلك، حدد navigator.standalone، والتي تعرض قيمة منطقية تشير إلى ما إذا كان
تشغيل المتصفّح في الوضع المستقل
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
التتبُّع عند تغيير وضع العرض
لتتبُّع ما إذا كان المستخدم يتغيّر بين standalone وbrowser tab، استمع إلى
التغييرات على الاستعلام عن الوسائط display-mode.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
تعديل واجهة المستخدم استنادًا إلى وضع العرض الحالي
لتطبيق لون خلفية مختلف لتطبيق الويب التقدّمي (PWA) عند تشغيله كتطبيق مثبَّت تطبيق الويب التقدّمي (PWA)، استخدِم لغة CSS المشروطة:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
تعديل رمز تطبيقك واسمه
ماذا لو كنت بحاجة إلى تحديث اسم تطبيقك أو توفير رموز جديدة؟ يمكنك الاطِّلاع على كيفية معالجة Chrome لتحديثات بيان تطبيق الويب. لمعرفة متى وكيف تظهر هذه التغييرات في Chrome.