كيفية تخصيص العاملين في الخدمة باستخدام تطبيق create-react-app

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

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

دعنا نمضي قدمًا ونكتشف كيفية حل هذه المشكلة.

العمل في وضع التطوير

حسنًا ، كيف يمكننا تشغيل SW في وضع التطوير ، حتى نتمكن من كتابة بعض الأكواد السيئة بسرعة ، ومعرفة ما الذي يصلح وما لا يصلح؟

أولاً ، دعنا نتعرف على سبب عدم نجاحه في وضع التطوير. قم بإنشاء مشروع CRA جديد ، وافتح registerServiceWorker.jsتحت srcالدليل.

في الجوهر أعلاه ، لدي فقط جزء من الكود ذي الصلة. ستلاحظ فحصًا مشروطًا process.env.NODE_ENV === 'production'. هذا هو التحقق لمعرفة ما إذا كنت تقوم بتشغيل إصدار إنتاج. إذا كنت لا تقوم بتشغيل إصدار إنتاج ، فسيتم استبدال SW بملف no-op.

يتم توفير السبب وراء هذا القرار في مشكلة GitHub هذه.

أولاً ، حاول تشغيل yarn startالتطبيق الخاص بك وتحقق من وجود ملف SW في نافذة شريط الأدوات. إذا قمت بالنقر فوق service-worker.jsالارتباط الموجود في شريط الأدوات ، فسيظهر لك الملف التالي:

لحسن الحظ ، هناك حل بسيط لذلك. إنها عملية سهلة من خطوتين.

أولاً ، داخل registerServiceWorker.jsالملف ، ابحث عن window.addEventListener('load')استدعاء الوظيفة. السطر الأول هو تصريح swUrlيقول فيه:

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

أعد تسمية service-workerجزء منه بأي شيء آخر. سأقوم بتسمية لي service-worker-custom.js.

ثانيًا ، أنشئ ملفًا داخل دليلك العام يحمل نفس الاسم تمامًا مثل الاسم المخصص الذي توصلت إليه للتو. لذلك ، أود إنشاء ملف يسمى service-worker-custom.jsداخل الدليل العام.

الآن ، داخل service-worker-custom.js، ضع بيان سجل بسيط. شيء من هذا القبيل: console.log('My custom service worker').

الآن ، قم بتشغيل التطبيق مرة أخرى مع yarn startوسترى بيان السجل المنبثق في وحدة تحكم المتصفح. قد تحتاج إلى إلغاء تسجيل عامل خدمة سابق إذا سبق لك تشغيل الغزل قبل ذلك.

لذا ، ها أنت ذا. عامل خدمة مخصص يمكنك تشغيله بأمان داخل وضع التطوير.

ملاحظة: ليس من الحكمة اختبار عامل خدمة في بيئة مطورة خارج وضع التصفح الخاص في متصفحك. أيضًا ، تأكد دائمًا من فحص التحديث عند إعادة التحميل داخل نافذة أدوات التطوير عند الاختبار في وضع التطوير.

الجمع بين Dev و Prod

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

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

يمكننا القيام بذلك مع sw-precacheالمكتبة. لقد قدمت هذه المكتبة في رسالتي السابقة. هنا رابط GitHub sw-precacheللمكتبة.

قم بتثبيت المكتبة بامتداد yarn add sw-precache. بمجرد القيام بذلك ، قم بإنشاء sw-precache-config.jsملف في الدليل الجذر الخاص بك. هنا ملفي:

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

ستلاحظ أن مسار الملف يفتقر إلى ./publicالبادئة ، على الرغم من وجود الملف في دليلنا public. سأشرح هذا قليلاً.

الآن ، قم بتحديث ملفك package.jsonبتعديل على buildالأمر. اجعل buildالأمر الخاص بك كما يلي:

react-scripts build && sw-precache --config=sw-precache-config.js

الآن ، دعنا نعود إلى مسار الملف الذي قدمناه لخيار importScripts. إذا لاحظت ، sw-precacheيعمل بشكل أساسي كعملية إنشاء ما بعد. الآن ، إذا قمت للتو بتشغيل عملية إنشاء ، وفتح دليل الإنشاء الذي تم إنشاؤه ، فستلاحظ ملف عامل الخدمة المخصص الخاص بك في مجلد الإنشاء. عندما نوفر مسارًا importScriptsللخيار ، فإننا نوفره بالنسبة إلى دليل البناء!

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

حسنًا ، ها أنت ذا! يمكنك الآن إدخال بعض كود SW المخصص في SW الافتراضي الذي تم إنشاؤه بواسطة CRA!