كيفية دمج تحديد الموقع الجغرافي في PWA

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

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

• معرفة صلبة بجافا سكريبت و HTML.
• يتم تقديم PWA عاملة عبر HTTPS (اتبع البرنامج التعليمي PWA الخاص بنا لإنشاء واحد).

تحديد الموقع الجغرافي في العمل

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

كيفية دمج الموقع الجغرافي في PWA الخاص بك

أساسيات

أولاً ، نحتاج إلى فهم الآلية الكامنة وراء كائن navigator.geolocation . كائن navigator هو كائن حاوية يتم من خلاله توفير الكثير من واجهات برمجة تطبيقات الويب لنا. يوجد داخل حاوية navigator كائن geolocation ، والذي يتم توفيره من خلال هذه الطرق الثلاث:

• getCurrentPosition()
• watchPosition()
• clearWatch()

استخدام getCurrentPosition() للحصول على منصب المستخدم

يجب أن يكون الغرض من الطريقة الأولى ، getCurrentPosition() ، واضحًا لك - فهو يجلب موقعًا لجهاز المستخدم.

 navigator.geolocation.getCurrentPosition (() => {})

تتوفر المواضع التي تم جلبها في coords timestamp ، مع كون coords ككائن Coordinates . بشكل افتراضي ، يتم تحديد كائن Coordinates من خلال هذه الخصائص:

• accuracy دقة الموقف بالأمتار
• altitude ارتفاع الموقع
• accuracy دقة ارتفاع الموقع بالأمتار
• الاتجاه الذي heading إليه الجهاز ، معبراً عنه بالدرجات. (0 = شمال ، شرق = 90 ، جنوب = 180 ، غرب = 270)
• latitude وخط العرض للموضع
• longitude وخط الطول للموقع
• speed السرعة التي يعمل بها الجهاز ، معبراً عنها بالأمتار / الثانية

كما قد تكون خمنت ، فإن الأجهزة التي تفتقر إلى أجهزة التتبع المناسبة لن تتلقى الفوائد الكاملة لواجهة برمجة التطبيقات هذه ، وبالتالي إرجاع بعض القيم فقط وترك القيم الأخرى null . على سبيل المثال ، على جهاز كمبيوتر سطح المكتب ، يمكننا فقط تلقي قيم longitude latitude accuracy ، بينما تعود القيم الأخرى المطلوبة ( heading speed ) null .

watchPosition() - الاسترداد الدوري لموقع المستخدم

بينما تُستخدم الطريقة المذكورة أعلاه في الغالب لاسترداد موقع المستخدم ، إلا أنها ليست مفيدة للتطبيقات التي تعتمد على الموقع الدقيق للمستخدم ، حيث من المعروف أن المستخدمين لديك يتنقلون كثيرًا. هذا عندما نحتاج إلى طريقة watchPosition() الخاصة بـ navigator.geolocation والتي ستسجل وظيفة رد الاتصال للتحديثات الدورية لموقع المستخدم.

 navigator.geolocation.watchPosition (position => {
    console.log (موقف)
})

تقوم طريقة watchPosition بإرجاع id معاملة فريد يمكن استخدامه لإيقاف تلقي تحديثات الموقع. باستخدام id الفريد وطريقة navigator.geolocation.clearWatch() ، يمكننا التوقف عن المشاهدة لموقع ما:

 const id = navigator.geolocation.watchPosition (position => {
    console.log (موقف)
})

// توقف عن المشاهدة بعد 10 ثوانٍ
setTimeout (() => {
  navigator.geolocation.clearWatch (id)
} ، 10 * 1000)

معالجة الأخطاء

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

 الوظيفة locationError (error) {
    التبديل (رمز الخطأ) {
        خطأ الحالة.
            إرجاع "رفض المستخدم طلب تحديد الموقع الجغرافي." ؛
        خطأ الحالة.
            إرجاع "معلومات الموقع غير متوفرة حاليًا." ؛
        خطأ في الحالة.
            إرجاع "مهلة طلب موقع المستخدم." ؛
        خطأ الحالة.
            إرجاع "حدث خطأ غير معروف." ؛
    }
}

بالإضافة إلى ذلك ، يمكنك اختبار ذلك في وحدة التحكم:

 navigator.geolocation.getCurrentPosition (position => {
  console.log (موقف)
} ، خطأ => {
	خطأ وحدة التحكم (خطأ)
})

سيؤدي هذا إلى إرجاع خاصية code ، مع 1 يعني أن إذن المستخدم قد تم رفضه ، و 2 يعني أن منصب المستخدم غير متاح حاليًا ، و 3 يعني أن الطلب قد انتهى مهلة.

ما وراء الأساسيات

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

مهلة عند البحث عن الإحداثيات

في حالة وجود حالة بطيئة في الشبكة لدى المستخدمين ، يمكن استخدام المهلة للإشارة إلى انتهاء صلاحية العملية. لإضافة مهلة ، نحتاج إلى إضافة مُعامل ثالث يحتوي على الخصائص التالية:

• timeout عدد المللي ثانية قبل انتهاء صلاحية العملية.
• maxiumAge الحد الأقصى لعمر الموضع الذي تم تخزينه مؤقتًا بواسطة المتصفحات ، ويتم قياسه بالمللي ثانية.
• enableHighAccuracy خيار صواب / خطأ واضح بذاته والذي قد يستهلك المزيد من الوقت والموارد من أجل الحصول على مواقع أكثر دقة.

 navigator.geolocation.getCurrentPosition (position => {
  console.log (موقف)
} ، خطأ => {
	خطأ وحدة التحكم (خطأ)
} ، {
  المهلة: 2000 ،
  العمر الأقصى: 20000 ،
  تمكين عالية الدقة: صحيح
})

عرض موقف المستخدم على خرائط جوجل

باستخدام Google Maps API ، يمكننا عرض موقع المستخدم على خريطة Google.

 <script src = "// maps.googleapis.com/maps/api/js؟v=3.exp&sensor=true"> </script>

للحصول على عرض توضيحي لـ Google Map API على الويب ، نوصي بهذا الدليل من Google: عرض موقع المستخدم أو الجهاز على الخرائط. في الدليل ، ستجد HTML أساسيًا مع واجهة برمجة تطبيقات خرائط Google المدمجة.

بدلاً من ذلك ، استخدم react-geolocated المتفاعل لـ PWA القائم على React

في حالة عدم شعورك بذلك ، react-geolocated هو أيضًا طريقة رائعة لتكامل الموقع الجغرافي مع تطبيقك المستند إلى React بطريقة سريعة وسهلة. ما عليك سوى تثبيت الوحدة النمطية أعلى PWA الحالي باستخدام:

 npm تثبيت رد فعل تحديد الموقع الجغرافي - حفظ

بعد ذلك ، اتبع الخطوات الموضحة في رابط GitHub الرسمي ويجب أن يكون لديك PWA وظيفي مع تحديد الموقع الجغرافي المدمج.

استنتاج

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

بالنسبة لتجار Magento الذين يبحثون عن حل موثوق ، نحن نقدم حل Magento PWA الكامل والفعال من حيث التكلفة لعملك.