لقد صمّمت تطبيق ويب وكتبت رمزه ومشغّل الخدمات الخاص به، ثم أضفت أخيرًا بيان تطبيق الويب لوصف كيفية عمله عند تثبيته على جهاز المستخدم. يتضمن ذلك أشياء مثل الرموز عالية الدقة التي يمكن استخدامها، مثل مشغّل الهاتف الجوّال أو مبدل التطبيقات، أو كيفية بدء تطبيق الويب عند فتحه من الشاشة الرئيسية للمستخدم.
وعلى الرغم من أنّ العديد من المتصفحات لا تمتثل لبيان تطبيق الويب، إلا أنّ كل المتصفحات لن تحمِّل أو تراعي كل قيمة تحدّدها. أدخِل 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 وEmojityper. يمكن أن يكون رمز HTML لرؤوس المواقع الإلكترونية بسيطًا: ما عليك سوى تحديد البيان والسماح لتطبيق PWACompat بالتعامل مع الباقي.
📢🤣🎉