برنامج تعليمي لتطبيق الويب التقدمي: قم بإنشاء PWA الأول الخاص بك

صُنعت بواسطة Google بنفسها ويتم دفعها حاليًا إلى الأنظمة الأساسية الشائعة مثل Windows 10 ، ويمكن لـ PWA القيام بالعديد من الأشياء التي كانت حصرية في السابق للتطبيقات الأصلية ، بما في ذلك ميزات مثل إشعارات الدفع ، وإشراك واجهة التطبيق ، وإمكانيات وضع عدم الاتصال ، وعمليات تثبيت التطبيقات ... سمها ما شئت .

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

لتحقيق أفضل أغراض التعلم الخاصة بك ، سنقوم اليوم بإنشاء PWA يعمل بكامل طاقته باستخدام React و Node.js و Firebase.

المتطلبات الأساسية

• إصدار Node.js > = 8.10
• إصدار npm > = 5.6

ملاحظات : لا ينبغي أن يكون إصدار npm حقًا لأن تثبيت Node.js يأتي دائمًا مع أحدث إصدار من مدير الحزم npm .

1. إنشاء SPA مع create-react-app

أولاً ، نحتاج إلى شيء قوي للعمل عليه ، ويعد create-react-app هو الأداة المثالية لهذا الغرض.

 npx create-reaction-app my-PWA
cd my-pwa
بدء npm

ستساعد الأوامر المذكورة أعلاه في إنشاء بيئة تعليمية قائمة على React لتعمل معها.

قدمه عبر HTTPS

HTTPS هو المعيار الجديد للويب ومع وصول PWA ، أصبح أكثر انتشارًا. عادة ، يجب تقديم PWA عبر HTTPS لأن عمال الخدمة أنفسهم لا يمكنهم العمل بدونه ؛ ولكن نظرًا لأننا نعمل في بيئة مضيفة محلية ، فهذا ليس ضروريًا.

2. اجعلها تعمل دون اتصال بالإنترنت

بشكل افتراضي ، يجب أن يتم تكوين عمال الخدمة من create-react-app مسبقًا للتعامل مع التخزين المؤقت في وضع عدم الاتصال وتحميل المحتوى عندما لا يكون لدى المستخدم اتصال أو في زيارات لاحقة.

عامل الخدمة ، ببساطة ، هو برنامج نصي JavaScript يعمل على سلسلة منفصلة من الصفحة ، وبسبب هذا ، ليس لديه أي وصول إلى بنية DOM. يؤدي هذا النهج الجديد إلى ظهور ميزات أكثر تقدمًا ومعززة للأداء حيث أن عمال الخدمة الآن لا يتعاملون مع جميع الميزات النموذجية لـ PWA (إمكانيات غير متصلة بالإنترنت ، وإشعارات الدفع ، وما إلى ذلك) فحسب ، بل يلعبون أيضًا دورًا كبيرًا في تخفيف العمليات الحسابية الثقيلة من موقع الويب الخاص بك في موضوع منفصل.

لتثبيت عمال الخدمة على PWA الخاص بك ، ستحتاج إلى إلقاء نظرة على /src/index.js .

في index.js ، ابحث عن هذا الخط

 serviceWorker.unregister ()

قم بتغيير unregister() register() وسيتم تسجيل عمال الخدمة لديك تلقائيًا عند تشغيل my-pwa في وضع الإنتاج . لا يوصى بتمكين عمال الخدمة في وضع التطوير حيث يمكن أن يؤدي ذلك إلى حالات يقوم فيها PWA فقط بتحميل الأصول المخزنة مؤقتًا ولا يتضمن أحدث التغييرات المحلية.

لتشغيل my-pwa في وضع الإنتاج:

 npm تشغيل البناء
npx تخدم البناء 

بعد ذلك ، افتح Chrome وانتقل إلى localhost:5000 ، وافحصه وسترى الآن عمال الخدمة يعملون بشكل صحيح في علامة تبويب التطبيق .

وضمن فئة Cache Storage هو المكان الذي تريد التحقق مما إذا كان محتوى موقعك غير متصل بالإنترنت يتم تخزينه مؤقتًا بشكل صحيح.

ملاحظات : هناك حل بديل لتسجيل عمال الخدمة في الوضع غير الإنتاجي. يتم تحقيق ذلك عن طريق إزالة عملية الخط process.env.NODE_ENV === 'production' من src/serviceWorker.js .

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

3. إعداد إضافة إلى الشاشة الرئيسية

إذا تم تنفيذ كل شيء بشكل صحيح حتى الآن ، فمن المفترض أن ترى رمز تثبيت صغيرًا (+) عند إطلاق إنشاء إنتاج my-pwa الخاص بك.

نظرًا لأن كل شيء يتم تلقائيًا من أجلك ، فمن المحتمل أنك تتساءل كيف أصبح كل هذا ممكنًا. لا تقلق ، لهذا نحن هنا.

لجعل PWA A2HS (إضافة إلى الشاشة الرئيسية) - نحتاج بالفعل إلى ملف manifest.json . ملف manifest.json الذي يأتي مع create-react-app هو ملف JSON أساسي للغاية يحدد كيفية ظهور رموز تطبيقك للمستخدم ويحدد مظهر شاشة البداية. لتخصيصها ، قم بتغيير الملف الحالي في /public/manifest.json .

 {
  "الاسم المختصر": "My First PWA"،
  "الاسم": "إنشاء ملف PWA بسيط" ،
  "الرموز": [
    {
      "src": "favicon.ico" ،
      "الأحجام": "64x64 32x32 24x24 16x16" ،
      "اكتب": "image / x-icon"
    } ،
    {
      "src": "logo192.png" ،
      "النوع": "صورة / png" ،
      "الأحجام": "192 × 192"
    } ،
    {
      "src": "logo512.png"،
      "النوع": "صورة / png" ،
      "الأحجام": "512 × 512"
    }
  ] ،
  "start_url": "."،
  "عرض": "مستقل"،
  "theme_color": "# 000000"،
  "background_color": "#ffffff"
}

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

ملاحظات : لكي يعمل ملف manifest.json ، ستحتاج إلى تضمينه في index.html . بشكل افتراضي ، يجب أن يكون create-react-app قد فعل ذلك بالفعل من أجلك.

 <link rel = "manifest" href = "٪ PUBLIC_URL٪ / manifest.json" />

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

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

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

4. إعداد دفع الإخطارات

قطعت المتصفحات شوطًا طويلاً في دعمها للإشعارات الفورية. اعتبارًا من الآونة الأخيرة ، قدم Chrome حتى Notification Triggers لتمكين عرض الإشعارات في وضع الطائرة. هذه خطوة كبيرة للأمام لدفع الإشعارات.

والآن ، يجب أن تتساءل أين هذا الجزء الذي يستخدم Firebase في هذا البرنامج التعليمي. حسنًا ، هذا هو. في هذا الجزء ، ستتعرف على عملية دمج إشعارات الدفع في PWA باستخدام Firebase ، وتحديداً ميزة المراسلة السحابية بداخلها والتي تتيح إرسال الرسائل باستخدام طلبات HTTPS.

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

استنتاج

وهذا كل شيء من أجل PWA كامل. لا تتردد في طرح أي أسئلة علينا إذا شعرت بأنك عالق في أي جزء من البرنامج التعليمي وسنبذل قصارى جهدنا للإجابة عليه!

اقرأ أكثر:
كيفية دمج PWA في Magento 2