إنشاء شاشة PWA Splash مخصصة

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

حالة شاشات البداية في PWAs

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

كيفية إنشاء شاشة البداية الخاصة بك

على Android ، تكون العملية سريعة مثل وضع ثلاثة أسطر من التعليمات البرمجية. ومع ذلك ، بالنسبة لنظام التشغيل iOS ، فهي قصة مختلفة حيث يتعين عليك عمل أحجام صور مختلفة لأحجام مختلفة للشاشات.

لأجهزة الأندرويد

القيام بذلك يدويًا

في ملف manifest.json الخاص بك ، تأكد من تهيئة الخصائص الثلاث التالية: name ، background_color ، icons بشكل صحيح:

• name : اسم PWA الخاص بك
• background_color : لون خلفية شاشة البداية. يتم التعرف على قيم ألوان CSS الصالحة فقط.
• icons : أيقونة .png بحجم 192 × 192 بكسل كحد أدنى.

على سبيل المثال ، إليك ما يجب أن يبدو عليه ملف manifest.json الذي تم تكوينه بشكل صحيح. لاحظ كيف أن خاصية icons لها أربعة أحجام مختلفة - يتم توفير هذه الرموز ذات الأحجام المختلفة من أجل توفير أفضل توافق للأجهزة المختلفة.

 {
    "theme_color": "# f69435"،
    "background_color": "#ffffff"،
    "عرض": "ملء الشاشة" ،
    "مجال": "/"،
    "start_url": "/"،
    "app_name": "SimiCart" ،
    "الاسم المختصر": "SimiCart" ،
    "الوصف": "حلول التجارة الإلكترونية من الجيل التالي لـ Magento" ،
    "الرموز": [
        {
            "src": "/icon-192x192.png" ،
            "الأحجام": "192x"،
            "النوع": "صورة / png"
        } ،
        {
            "src": "/icon-256x256.png" ،
            "الأحجام": "256x"،
            "النوع": "صورة / png"
        } ،
        {
            "src": "/icon-384x384.png" ،
            "الأحجام": "384x"،
            "النوع": "صورة / png"
        } ،
        {
            "src": "/icon-512x512.png" ،
            "الأحجام": "512x"،
            "النوع": "صورة / png"
        }
    ]
}

بعد الانتهاء من إعداد الخصائص (وملف manifest.json الخاص بك) ، ستقوم المتصفحات التي تدعم PWA (عادةً Chrome) بإنشاء أحجام أيقونات مختلفة لشاشة البداية وعرضها وفقًا لذلك.

مجهود جميل ، أليس كذلك؟ إذا سألتنا ، نعتقد أن هذا هو ما يجب أن تشعر به تجربة التطوير.

 يوصى بالقراءة: PWA Manifest: إنشاء تطبيق الويب الخاص بك يظهر الطريق السهل

استخدام مولد البيان

يمكنك أتمتة هذه العملية دون عناء باستخدام أداة Manifest Generator . ما عليك سوى إدخال المعلومات المطلوبة وسيقوم المولد الخاص بنا بإنشاء ملف .zip يحتوي على جميع المعلومات التي تحتاجها.

لنظام iOS

لا تريد Apple بالتأكيد جعل هذه العملية سهلة للمطورين. في وقت كتابة هذا التقرير ، كانت حالة دعم Web App Manifest مدرجة على أنها مدعومة جزئيًا - لم تتغير بعد عامين من ظهورها لأول مرة. هذا يعني أن PWAs لا تتلقى أي دعم icons ، minimal-ui ، fullscreen ، theme-color ، orientation .

لحسن الحظ ، لا تزال هناك طريقة للتغلب على هذا وهي استخدام العلامة الوصفية <apple-touch-startup-image> . ليس حلاً مثاليًا - لكنه يعمل.

 <! - شاشة البداية لـ iPhone X (1125 بكسل × 2436 بكسل) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 375 بكسل) و (ارتفاع الجهاز: 812 بكسل) و (-webkit-device-pixel-ratio: 3)" href = "/ apple -launch-1125x2436.png ">

باستخدام العلامة الوصفية <apple-touch-startup-image> ، يمكنك تحديد صورة بدقة ثابتة لشاشة البداية الخاصة بـ PWA (أي startup-image ). تتوافق شاشة البداية المخصصة هذه مع حجم شاشة واحد فقط ، وستحتاج إلى الكثير من أحجام الصور المختلفة لتلائم أحجام الشاشات المختلفة لمنتجات Apple في السوق.

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

 <! - iPhone X (1125px x 2436px) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 375 بكسل) و (ارتفاع الجهاز: 812 بكسل) و (-webkit-device-pixel-ratio: 3)" href = "/ apple -launch-1125x2436.png ">
<! - iPhone 8 و 7 و 6s و 6 (750 بكسل × 1334 بكسل) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 375 بكسل) و (ارتفاع الجهاز: 667 بكسل) و (-webkit-device-pixel-ratio: 2)" href = "/ apple -launch-750x1334.png ">
<! - iPhone 8 Plus، 7 Plus، 6s Plus، 6 Plus (1242px x 2208px) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 414 بكسل) و (ارتفاع الجهاز: 736 بكسل) و (-webkit-device-pixel-ratio: 3)" href = "/ apple -بدء -1242x2208.png ">
<! - iPhone 5 (640px x 1136px) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 320 بكسل) و (ارتفاع الجهاز: 568 بكسل) و (-webkit-device-pixel-ratio: 2)" href = "/ apple -launch-640x1136.png ">
<! - iPad Mini ، Air (1536px x 2048px) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 768 بكسل) و (ارتفاع الجهاز: 1024 بكسل) و (-webkit-device-pixel-ratio: 2)" href = "/ apple -launch-1536x2048.png ">
<! - iPad Pro 10.5 "(1668px x 2224px) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 834 بكسل) و (ارتفاع الجهاز: 1112 بكسل) و (-webkit-device-pixel-ratio: 2)" href = "/ apple -launch-1668x2224.png ">
<! - iPad Pro 12.9 "(2048px x 2732px) ->
<link rel = "apple-touch-startup-image" media = "(عرض الجهاز: 1024 بكسل) و (ارتفاع الجهاز: 1366 بكسل) و (-webkit-device-pixel-ratio: 2)" href = "/ apple -launch-2048x2732.png ">

اربط هذا الرمز في <head> الخاص بـ index.html ، ولا تنس إدراج علامة <meta> أدناه لتمكين سلوك PWA ، وإلا فلن تعمل شاشة البداية على الإطلاق.

 <meta name = "apple-mobile-web-app-enabled" content = "yes">

مع هذا ، يجب أن تكون مستعدًا تمامًا. قم بتشغيل iOS PWA وستتمكن من رؤية شاشة البداية.

باستخدام مولد شاشة iOS Splash

بالطبع ، هناك طرق أفضل لأتمتة هذه العملية ، وذلك باستخدام iOS Splash Screen Generator. مع صورتك كمصدر لها ، سينشئ لك المولد صورًا مختلفة الحجم مع كود HTML المطلوب لإدراجه في index.html الخاص بك.

استنتاج

على الرغم من أنها ليست جزءًا من تجربة الإعداد ، إلا أن شاشة البداية لا تزال تلعب دورًا مهمًا في تكوين تصور إيجابي لعلامتك التجارية - إنها الفاكهة التي يمكن أن تحقق نتائج لا تتوقعها.

نأمل أن يحل هذا البرنامج التعليمي مشكلتك بالضبط. يمكن أن يكون تنفيذ PWA وتخصيصه مشكلة إذا لم تكن لديك أنت وفريقك خبرة كبيرة في هذا المجال. يمكن أن يساعد حل تطوير PWA احترافي مثل SimiCart في تسهيل الأمر كثيرًا.