لقد صممت تطبيق ويب، وكتبت التعليمات البرمجية ومشغّل الخدمات، وأخيرًا أضفت بيان تطبيق الويب لوصف آلية عمله عند "مثبت" على جهاز المستخدم. ويشمل ذلك مثلاً استخدام أيقونات عالية الدقة في مشغّل التطبيقات أو أداة تبديل التطبيقات على الهاتف الجوّال، أو كيفية بدء تطبيق الويب عند فتحه من شاشة البدء الخاصة بالمستخدم.
على الرغم من أنّ العديد من المتصفّحات ستلتزم ببيان تطبيق الويب، لن يحمّل كل متصفّح أو يحترم
كل قيمة تحدّدها. أدخِل PWACompat، وهي مكتبة تأخذ بيان تطبيق الويب وتُدرج تلقائيًا علامتَي meta أو link ذات الصلة
للرموز بأحجام مختلفة ورمز التطبيق المفضّل ووضع التشغيل والألوان وما إلى ذلك.
هذا يعني أنك لم تعد مضطرًا إلى إضافة علامات عدد لا يحصى من العلامات القياسية وغير القياسية (مثل
<link rel="icon" ... /> أو <meta name="orientation" ... />) إلى صفحاتك. وأجهزة iOS الرئيسية
على الشاشة، سينشئ PWACompat شاشات البداية ديناميكيًا حتى لا تضطر إلى
إنشاء واحد لكل حجم شاشة مختلف.
استخدام PWACompat
لاستخدام PWACompat، احرص على تضمين رابط يؤدي إلى ملف ملف ملف بيان تطبيق الويب على جميع صفحاتك:
<link rel="manifest" href="manifest.webmanifest" />
بعد ذلك، يمكنك تضمين هذا النص البرمجي أو إضافته إلى ملف برمجي يتم تحميله بشكل غير متزامن:
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
سيجلب PWACompat ملف البيان وينجز المهام المطلوبة لمتصفِّح المستخدم، بغض النظر عن سواء كانت على جهاز محمول أو كمبيوتر مكتبي.
ما زلنا نقترح إضافة رمز اختصار واحد على الأقل بجودة عالية لفهرسة البحث:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
لمزيد من المعلومات، اطّلِع على أفضل الممارسات.
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
بالعمق
ما هي وظيفة PWACompat بالنسبة إلى المتصفّحات المتوافقة؟ سيحمِّل PWACompat بيان تطبيق الويب الخاص بك. و:
- أنشئ علامات رمز وصفية لجميع الرموز في البيان (مثل رمز المفضّل للمتصفّحات القديمة)
- إنشاء علامات وصفية احتياطية لمختلف المتصفّحات (مثل شوك iOS، وWebKit/Chromium، وغيرها) تصف كيف ينبغي فتح تطبيق ويب
- لضبط لون المظهر استنادًا إلى البيان
بالنسبة إلى Safari، فإن PWACompat أيضًا:
- لضبط
apple-mobile-web-app-capable(الفتح بدون متصفِّح Chrome) أوضاع العرضstandaloneأوfullscreenأوminimal-ui - يتم إنشاء
apple-touch-iconصورة، مع إضافة خلفية البيان إلى الرموز الشفافة: بخلاف ذلك، يعرض iOS الشفافية باللون الأسود - إنشاء صور شاشة البداية الديناميكية التي تتطابق بشكل وثيق مع صور شاشة البداية التي تم إنشاؤها للمتصفّحات المستندة إلى Chromium
إذا أردت المساهمة بشكل أكبر أو المساعدة في إتاحة التوافق مع المزيد من المتصفّحات، يمكنك الاطّلاع على PWACompat على GitHub.
جرّبه الآن
يتم عرض PWACompat على Airhorner وv8.dev أداة كتابة الرموز التعبيرية: مواقعك الإلكترونية يمكن أن يكون HTML للعنوان بسيطًا: ما عليك سوى تحديد البيان والسماح لـ PWACompat بالتعامل مع باقي المهام.
📢🤣🎉