PWA के लिए नेटवर्क सूचना API

PWA के लिए नेटवर्क सूचना API

यदि आप कभी भी ऐसे प्रगतिशील वेब ऐप्स विकसित कर रहे हैं जिनके लिए केवल एक साधारण ऑनलाइन/ऑफ़लाइन बूलियन मान की तुलना में वर्तमान नेटवर्क स्थिति के बारे में अधिक विस्तृत जानकारी की आवश्यकता होती है, तो अब एक नया API उपलब्ध है, जिसे "नेटवर्क सूचना API" कहा जाता है।

मूल रूप से हर नई आधुनिक ब्राउज़र सुविधा के साथ, आप वर्तमान कनेक्शन की गति के बारे में जानने के लिए कोड की कुछ पंक्तियों के साथ अपने वेब एप्लिकेशन को उत्तरोत्तर बढ़ा सकते हैं।

नाविक के लिए एक नई संपत्ति

नेविगेटर-ऑब्जेक्ट को "कनेक्शन" नामक एक नई संपत्ति के साथ बढ़ाया गया है, जो नेटवर्क स्थिति के साथ-साथ नेटवर्क प्रकार में परिवर्तनों पर प्रतिक्रिया करने के लिए सदस्यता दोनों को एक बार पढ़ने में सक्षम बनाता है। ध्यान दें कि, लेखन के समय, केवल क्रोम ही पूरी तरह से एपीआई का समर्थन करता है। सफारी और फायरफॉक्स इसका बिल्कुल भी समर्थन नहीं करते हैं। अन्य क्रोमियम-आधारित ब्राउज़र जैसे एज या ओपेरा को लगभग पूर्ण समर्थन प्राप्त है, जिसमें सबसे महत्वपूर्ण मीट्रिक भी शामिल है।

आपके वेब एप्लिकेशन में वास्तविक नेटवर्क डेटा

निम्न कोड एक संपूर्ण उदाहरण दिखाता है कि आप इस नए नेटवर्क सूचना API का उपयोग कैसे कर सकते हैं। वास्तविक विश्व प्रदर्शन के लिए, बस इस 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;
}

समापन शब्द

जैसा कि आप देख सकते हैं, क्रोमियम इंजन में प्रगति के लिए धन्यवाद, आपके क्लाइंट की नेटवर्क गति में विस्तृत अंतर्दृष्टि प्राप्त करने के लिए आवश्यक कोड अब पहले से कहीं अधिक आसान है। गति की गणना स्वयं करने के लिए एक कस्टम सर्वर को मतदान करने और डेटा बिंदुओं के इतिहास को प्रबंधित करने की कोई आवश्यकता नहीं है।