كيفية دمج الإضافة إلى الشاشة الرئيسية في PWA

نشرت: 2021-05-13

جدول المحتويات

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

 يوصى بقراءة: PWA مقابل Native: أيهما يناسبك بشكل أفضل؟

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

دعم المتصفحات

A2HS قريبة جدًا من كونها ميزة عالمية بين المتصفحات. حاليًا ، يتم دعمه حاليًا بواسطة Mobile Chrome / Android Webview (من الإصدار 31 فصاعدًا) ، و Opera لنظام Android (من الإصدار 32 وما بعده) و Firefox لنظام Android (من الإصدار 58 وما بعده). للحصول على عرض أكثر تفصيلاً ، تحقق من موقع CanIUse.

إضافة PWA إلى الشاشة الرئيسية قيد التشغيل

عند الوصول إلى موقع تم تمكين إضافة PWA إلى الشاشة الرئيسية (A2HS-Enabled) ، يمكن رؤية لافتة تُعلم أنه يمكن إضافة الموقع إلى شاشتك الرئيسية في الجزء السفلي من واجهة المستخدم:

Harlow Bros - أضف PWA إلى الشاشة الرئيسية
Harlow Bros - عمل فخور لـ SimiCart

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

كيفية جعل تطبيق الويب الخاص بك ممكّنًا A2HS على الهاتف المحمول

معايير قابلة للتثبيت

لكي يكون تطبيق الويب الخاص بك قابلاً للتثبيت ، يجب أن:

  • لم يتم تثبيته بالفعل
  • يفي بإرشادات تفاعل المستخدم (يجب أن يتفاعل المستخدم مع الصفحة لمدة 30 ثانية على الأقل)
  • يتم تقديمها من خلال اتصال آمن (HTTPS)
  • لديك عامل خدمة مسجل
  • لديك ملف بيان تم تكوينه بشكل صحيح
  • والأهم من ذلك ، يجب أن يدعم المتصفح المستخدم الحدث beforeinstallprompt . للحصول على قائمة كاملة بالمستعرضات التي تدعم الحدث beforeinstallprompt ، قم بالرجوع إلى CanIUse.

ابدء

لأغراض العرض التوضيحي ، سنستخدم في هذه المقالة مشروع create-react-app كقاعدة لإنشاء PWA قابل للتثبيت. إنشاء-رد-تطبيق هو أمر React بسيط لإنشاء تطبيق صفحة واحدة.

ملاحظة : يتطلب create-react-app التفاعلي عقدة على الأقل> = 10.16 و npm> = 5.6

افتح موجه أوامر Node.js الخاص بك ، وقم بتشغيل الأوامر التالية: 

 npx إنشاء-رد فعل-التطبيق pwa-a2hs
القرص المضغوط pwa-a2hs
بداية الغزل
إنشاء تطبيق تجريبي للتفاعل
تطبيق الويب الأساسي الخاص بنا بعد تشغيل الأوامر

قم بإنشاء ملف بيان

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

نوصي باستخدام أداة Manifest Generator لإنشاء الملف تلقائيًا ، جنبًا إلى جنب مع الرموز المحسّنة للحجم لتطبيقك.

التكوين الأمثل لمولد بيان تطبيق الويب

باستخدام منشئ البيان ، يمكنك الحصول على ملف manifest.zip بالمحتوى مثل:

تم إنشاء بيان تطبيق الويب

ويجب أن يبدو manifest.webmanifest الخاص بك كما يلي: 

 {
    "theme_color": "# f69435"،
    "background_color": "# f69435"،
    "عرض": "مستقل"،
    "مجال": "/"،
    "start_url": "."،
    "الاسم": "PWA-A2HS" ،
    "الاسم_ المختصر": "PWA" ،
    "الوصف": "Demo PWA لميزة A2HS" ،
    "الرموز": [
        {
            "src": "/icon-192x192.png" ،
            "الأحجام": "192x192"،
            "النوع": "صورة / png"
        } ،
        {
            "src": "/icon-256x256.png" ،
            "الأحجام": "256 × 256"،
            "النوع": "صورة / png"
        } ،
        {
            "src": "/icon-384x384.png" ،
            "الأحجام": "384 × 384" ،
            "النوع": "صورة / png"
        } ،
        {
            "src": "/icon-512x512.png" ،
            "الأحجام": "512 × 512"،
            "النوع": "صورة / png"
        }
    ]
}

الآن انسخ محتوى ملفات البيان التي تم إنشاؤها إلى المجلد /public/ ، واحذف ملف manifest.json الافتراضي في هذا المجلد ، وانتقل إلى الخطوة التالية.

اربط HTML بالبيان

عندما تنتهي من تكوين ملف البيان الخاص بك ، احفظه في الدليل الجذر لموقع الويب الخاص بك بحيث يمكن استدعاؤه لاحقًا بمسار نسبي ، على سبيل /manifest.webmanifest . لإنهاء إعداد ملف البيان الخاص بك ، قم بالإشارة إليه في رأس HTML الخاص بك ( \pwa-a2hs\public\index.html ) ، كالتالي: 

 <head>
    <meta charset = "utf-8" />
    <link rel = "icon" href = "٪ PUBLIC_URL٪ / favicon.ico" />
    <meta name = "viewport" content = "width = device-width، initial-scale = 1" />
    <meta name = "theme-color" content = "# 000000" />
    <ميتا
      الاسم = "الوصف"
      content = "موقع ويب تم إنشاؤه باستخدام إنشاء-رد-تطبيق"
    />
    <link rel = "apple-touch-icon" href = "٪ PUBLIC_URL٪ / logo192.png" />
    <link rel = "manifest" href = "٪ PUBLIC_URL٪ / manifest.webmanifest" />
       <title> PWA A2HS </title>
  </head>

قم بإعداد تدفق التثبيت

بيان تطبيق الويب ليس كل ما هو مطلوب لجعل تطبيق الويب الخاص بك قابلاً للتثبيت. هناك بعض التهيئة الإضافية التي يتعين عليك إجراؤها لجعل تطبيق الويب الخاص بك قابلاً للتثبيت ، وبالتالي اجعله أقرب إلى PWA.

إنشاء عامل خدمة

يعترض عامل الخدمة طلبات الشبكة الخاصة بك ويمكّن العديد من الميزات المشابهة للتطبيقات التي تشتهر بها PWA. قم بإنشاء ملف service-worker.js في pwa-a2hs\public بالمحتوى التالي: 

 self.addEventListener ('fetch'، function (event) {
  event.respondWith (
      caches.match (event.request). ثم (الوظيفة (الاستجابة) {
          الرد || إحضار (event.request) ؛
      })
  ) ؛
}) ؛

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

سجل عمال الخدمة الخاصة بك

ولكي service-worker.js ، علينا تسجيله عن طريق إدخال هذا الرمز في نهاية index.html الخاص بـ <body> : 

 //index.html
<script>
    إذا ('serviceWorker' في الملاح) {
      // تسجيل عامل خدمة مستضاف في جذر
      // الموقع باستخدام النطاق الافتراضي.
      navigator.serviceWorker.register ('/ service-worker.js'). ثم (الوظيفة (التسجيل) {
        console.log ('نجح تسجيل عامل الخدمة:' ، التسجيل) ؛
      } ، / * catch * / function (error) {
        console.log ('فشل تسجيل عامل الخدمة:' ، خطأ) ؛
      }) ؛
    } آخر {
      console.log ('عمال الخدمة غير مدعومين.') ؛
    }
  </script>

حان الوقت لاختباره!

يجب أن يكون PWA الخاص بك قابلاً للتثبيت الآن. قم بتحديث الواجهة الأمامية الخاصة بك وسترى زر التثبيت على شريط المهام (سطح المكتب) أو لافتة إشعار صغيرة (الهاتف المحمول).

زر تثبيت PWA على شريط المتصفح

سيؤدي النقر فوق " تثبيت " إلى ظهور اختصار PWA كما هو الحال على سطح المكتب / الشاشة الرئيسية:

رمز PWA على سطح المكتب / الشاشة الرئيسية

هناك المزيد لتجربة A2HS

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

زر التثبيت في صفحة التسجيل
أظهر زر التثبيت في صفحة التسجيل

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