apex map rotation
1.0.0
تطبيق Apex Legends Map Rotation غير الرسمي الذي يتيح للمستخدمين رؤية الخرائط الحالية والتالية بالإضافة إلى الاشتراك في إشعارات تغيير الخريطة.
على الرغم من أن Apex Legends Status هو موقع ويب مثير للاهتمام إلى جانب ميزة تدوير الخريطة، إلا أنه يفتقر إلى الإشعارات. لذلك، سيتعين عليك التحقق يدويًا في كل مرة تحتاج فيها إلى معرفة الخريطة الحالية.
تم إنشاء Apex Legends Map Rotation نتيجة جهد لتتمكن من معرفة الخريطة القادمة حتى لا تضطر إلى التحقق بنفسك مرة أخرى.
مرحبًا، وشكراً لك على المساهمة في Apex Legends - Map Rotation!
أولاً، قم باستنساخ المستودع من GitHub:
# HTTPS
git clone https://github.com/lgaspari/apex-map-rotation.git && cd apex-map-rotation
# SSH
git clone [email protected]:lgaspari/apex-map-rotation.git && cd apex-map-rotation ثم استخدم npm لتثبيت التبعيات:
npm install قم بعمل نسخة من ملف .env في .env.local . املأ متغيرات البيئة الفارغة بقيمتها المناسبة كما يلي:
VITE_APEX_LEGENDS_API_SECRET_TOKEN : رمز سري غير رسمي لـ Apex Legends API للمصادقةالآن، في الأغلب، ستستخدم هذا الأمر لتشغيل التطبيق:
npm run startبخلاف ذلك، إذا كنت ترغب في تشغيل التطبيق باستخدام رمز الإنتاج، فاستخدم هذا بدلاً من ذلك:
npm run start:productionنحن نستخدم ESLint للعثور على المشكلات وإصلاحها في التعليمات البرمجية الخاصة بنا. تحقق من الكود المحلي الخاص بك عن طريق تشغيل الأمر التالي:
npm run lintبالإضافة إلى ذلك، يمكنك تثبيت ملحقات ESLint وPrettier لـ Visual Studio Code لمساعدتك في اكتشاف الأخطاء وتصحيح تنسيق التعليمات البرمجية.
نحن نستخدم Vitest كإطار اختبار لتطبيقنا. تحقق من اختباراتك المحلية عن طريق تشغيل الأمر التالي:
npm run testبالإضافة إلى ذلك، يمكنك تثبيت ملحق Vitest لـ Visual Studio Code لتشغيل الاختبارات بسرعة.
يتم تشغيل سير عمل التكامل المستمر في كل دفعة إلى الفرع main . عندما لا تتجاوز تغييراتك خطوات Lint و Test ، يفشل سير العمل. من فضلك، تأكد من تصحيح هذه المشكلات في التزام منفصل.
حاليًا، لم يتم تكوين النشر المستمر؛ سيتعين عليك تشغيل هذا الأمر يدويًا:
npm run deployيرجى الامتناع عن النشر في الإنتاج دون سابق إنذار.
هذه ميزة تجريبية وقد يتم تعطيلها في أي وقت.
نستخدم Vite لتشغيل التطبيق وإنشائه. ولذلك، لإعداد تطبيق الويب التقدمي، نستخدم البرنامج الإضافي Vite PWA، الذي يجعل التكوين سلسًا.
لتوليد الحد الأدنى من أصول PWA المطلوبة، نستخدم Vite PWA Assets Generator. سيقوم الأمر أدناه بإنشاء الأصول بناءً على الملف public/logo.svg باستخدام التكوين من pwa-assets.config.ts. تأكد من تحديثه قبل تشغيله:
npm run generate-pwa-assetsإذا كنت تواجه مشكلات في تثبيت PWA، فيمكنك استخدام Lighthouse من أدوات التطوير للتحقق من ما هو مفقود حتى يعمل.
هذه هي الخطوات للمتصفحات المستندة إلى Chromium:
يجب أن يطالبك التطبيق إذا كان هناك أي تحديث لعامل الخدمة. ومع ذلك، لتسهيل الأمور، يمكنك تشغيل خيار من أدوات التطوير لتحديث العاملين في الخدمة عند إعادة التحميل:
CTRL+SHIFT+Rإذا كنت لا تزال تواجه مشكلات، فيمكنك تحديث عامل الخدمة بنفسك عن طريق الضغط على زر التحديث.
عند تحديث أصول PWA، قد لا تتمكن من رؤية الأصول الجديدة المحملة. إذا كان الأمر كذلك، فيرجى التأكد من إعادة تثبيت التطبيق.
نحن نستخدم واجهة الإشعارات الخاصة بـ Notifications API لتكوين إشعارات سطح المكتب وعرضها للمستخدم. يمكنك قراءة المزيد حول Notifications API في MDN Web Docs.
التحقق من دعم واجهة برمجة التطبيقات (API) من خلال
'Notification' in window.
| منصة | شجاع | الكروم | حافة | فايرفوكس | سفاري | الملاحظات |
|---|---|---|---|---|---|---|
| ماك | نعم | نعم | نعم | نعم | نعم | - - |
| دائرة الرقابة الداخلية | لا | لا | لا | لا | نعم ¹ | ¹ يجب تفعيل الميزة التجريبية. |
| أندرويد | نعم | نعم | نعم | نعم | لا يوجد | - - |
طلب أذونات الإعلام من خلال
Notification.requestPermission()باستخدامPromises.
| منصة | شجاع | الكروم | حافة | فايرفوكس | سفاري | الملاحظات |
|---|---|---|---|---|---|---|
| ماك | نعم ¹ | نعم ¹ | نعم ¹ | نعم | نعم | ¹ قد يتطلب الأمر خطوات يدوية إضافية لمنح الإذن. |
| دائرة الرقابة الداخلية | لا يوجد | لا يوجد | لا يوجد | لا يوجد | نعم ¹ | ¹ دعم PWA فقط. |
| أندرويد | نعم | نعم | نعم ¹ | نعم ² | لا يوجد | ¹ قد يتطلب الأمر خطوات يدوية إضافية لمنح الإذن. ² قد يتم عرض صفحة غير آمنة بسبب الشهادة الموقعة ذاتيًا. |
إنشاء مثيل إعلام جديد باستخدام
new Notification(title, options);
| منصة | شجاع | الكروم | حافة | فايرفوكس | سفاري | الملاحظات |
|---|---|---|---|---|---|---|
| ماك | نعم | نعم | نعم | نعم | نعم | - - |
| دائرة الرقابة الداخلية | لا يوجد | لا يوجد | لا يوجد | لا يوجد | لا ¹ | ¹ ولا حتى من PWA. |
| أندرويد | لا | لا | لا | نعم | لا يوجد | - - |
يعمل عمال الخدمة بشكل أساسي كخوادم وكيلة تقع بين تطبيقات الويب والمتصفح والشبكة (عند توفرها). يمكنك قراءة المزيد حول Service Worker API في MDN Web Docs.
| منصة | شجاع | الكروم | حافة | فايرفوكس | سفاري | الملاحظات |
|---|---|---|---|---|---|---|
| ماك | نعم | نعم | نعم | نعم | نعم | - - |
| دائرة الرقابة الداخلية | نعم | نعم | نعم | نعم | نعم | - - |
| أندرويد | نعم | نعم | نعم | نعم | لا يوجد | - - |
تطبيق الويب التقدمي (PWA) هو تطبيق تم إنشاؤه باستخدام تقنيات النظام الأساسي للويب، ولكنه يوفر تجربة مستخدم مثل تجربة التطبيق الخاص بالنظام الأساسي. يمكنك قراءة المزيد حول تطبيقات الويب التقدمية في MDN Web Docs.
| منصة | شجاع | الكروم | حافة | فايرفوكس | سفاري | الملاحظات |
|---|---|---|---|---|---|---|
| ماك | نعم ¹ | نعم ¹ | نعم ¹ | لا | لا | ¹ يمكن تثبيته من زر Install PWA الموجود على يمين شريط العناوين أو زر Options > Install app . |
| دائرة الرقابة الداخلية | لا | لا | لا | لا | نعم ¹ | ¹ يمكن تثبيته من زر Share > Add to Home Screen . |
| أندرويد | نعم ¹ | نعم ¹ | نعم ¹ | نعم ² | لا يوجد | ¹ يمكن تثبيته من خلال النافذة المنبثقة Add to Home Screen أو زر Options > Install app .يمكن تثبيت ² من Options > Add to Home screen . |
جميع الصور والأيقونات والعلامات التجارية مملوكة لأصحابها. Apex Legends هي علامة تجارية مسجلة لشركة EA. تنتمي أصول اللعبة والمواد والأيقونات إلى شركة Electronic Arts. كن على علم بأن EA وRespawn لا يؤيدان محتوى هذا الموقع ولا يتحملان المسؤولية عن محتوى هذا الموقع.
