واجهة برمجة تطبيقات معلومات الشبكة لـ PWAs

واجهة برمجة تطبيقات معلومات الشبكة لـ PWAs

إذا كنت تعمل على تطوير تطبيقات ويب تقدمية تتطلب معلومات أكثر تفصيلاً حول حالة الشبكة الحالية بدلاً من مجرد قيمة منطقية بسيطة عبر الإنترنت / دون اتصال ، فإن واجهة برمجة تطبيقات جديدة متاحة الآن ، تسمى "Network Information API".

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

خاصية جديدة للملاح

تم تحسين كائن navigator بخاصية جديدة تسمى "connect" ، والتي تتيح قراءة حالة الشبكة لمرة واحدة بالإضافة إلى الاشتراك للتفاعل مع التغييرات في نوع الشبكة. لاحظ أنه حتى كتابة هذا التقرير ، فإن Chrome فقط يدعم واجهة برمجة التطبيقات بالكامل. لا يدعمها Safari و Firefox على الإطلاق. تتمتع المتصفحات الأخرى المستندة إلى Chromium مثل Edge أو Opera بدعم كامل تقريبًا ، بما في ذلك المقاييس الأكثر أهمية.

بيانات الشبكة الحقيقية في تطبيق الويب الخاص بك

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

بالطبع يمكنك التلاعب بهذه الميزة عن طريق فتح DevTools في متصفحك ومحاكاة خنق الشبكة عبر علامة تبويب الشبكة.

//
// Description:
//
// This is the exact React-hook I'm
// using on flaming.codes to classify
// the current network state.
//
// Note that the 'Network Information API'
// doesn't provide a flag for offline
// scenarios, therefore I added one to
// the network state object.
//
// This hook also only uses a subset of all
// (possible) available information, please
// see the MDN-docs for more information:
// 👉 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
//

/**
 * Read the current network classification
 * provided by the browser via the navigator.
 * 
 * @returns   The network state.
 */
export function useNetworkInformation() {
  const [state, setState] = useState<{
    isEnabled?: boolean;
    type?: string;
    // Directly taken from
    // 👉 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType
    effectiveType?: "slow-2g" | "2g" | "3g" | "4g" | "offline";
  }>({});

  useEffect(() => {
    const connection =
      // @ts-ignore
      navigator?.connection || navigator?.mozConnection || navigator?.webkitConnection;

    if (connection) {
      setState({
        isEnabled: true,
        type: connection.type,
        effectiveType: connection.effectiveType,
      });
    }

    function updateConnectionStatus() {
      setState({
        isEnabled: true,
        type: connection.type,
        effectiveType: navigator?.onLine ? connection.effectiveType : "offline",
      });
    }

    connection?.addEventListener("change", updateConnectionStatus);
    return () => {
      connection?.removeEventListener("change", updateConnectionStatus);
    };

    // Only run on mount explicitly.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return state;
}

كلمات ختامية

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