נעץ אינפֿאָרמאַציע אַפּי פֿאַר פּוואַס

די נעטוואָרק אינפארמאציע אַפּי פֿאַר פּוואַס

אויב איר טאָמיד דעוועלאָפּעד פּראָגרעסיוו וועב אַפּפּס וואָס דאַרפן מער דיטיילד אינפֿאָרמאַציע וועגן דעם קראַנט נעץ שטאַט ווי בלויז אַ פּשוט אָנליין/אָפפלינע באָאָלעאַן ווערט, אַ נייַ אַפּי איז איצט בארעכטיגט, גערופֿן "נעטוואָרק אינפארמאציע אַפּי".

ווי ביי בייסיקלי יעדער נייַער מאָדערן בלעטערער שטריך, איר קענען פּראַגרעסיוולי פֿאַרבעסערן דיין וועב אַפּלאַקיישאַן מיט בלויז אַ ביסל שורות פון קאָד צו לערנען די גיכקייַט פון דעם קראַנט קשר.

א נייַע פאַרמאָג פֿאַר די נאַוויגאַטאָר

דער נאַוויגאַטאָר-כייפעץ איז ענכאַנסט מיט אַ נייַע פאַרמאָג גערופֿן "פֿאַרבינדונג", וואָס אַלאַוז ביידע אַ איין-צייט לייענען פון די נעץ שטאַט און אַ אַבאָנעמענט צו רעאַגירן אויף ענדערונגען אין די נעץ טיפּ. באַמערקונג אַז אין שרייבן, בלויז Chrome גאָר שטיצט די אַפּי. סאַפאַרי און פירעפאָקס שטיצן עס נישט. אנדערע קראָומיאַם בראַוזערז אַזאַ ווי עדזש אָדער אָפּעראַ האָבן קימאַט פול שטיצן, אַרייַנגערעכנט די מערסט וויכטיק מעטריקס.

פאַקטיש נעץ דאַטן אין דיין וועב אַפּלאַקיישאַן

די פאלגענדע קאָד ווייזט אַ גאַנץ ביישפּיל פון ווי איר קענען נוצן דעם נייַ נעטוואָרק אינפארמאציע אַפּי. פֿאַר אַ פאַקטיש דעמאַנסטריישאַן, מעגילע צו די דנאָ פון אַ בלאַט פון דעם PWA. אויב אייער בלעטערער שטיצט די אַפּי, איר וועט זען אַ סיגנאַל ייקאַן און אַ פירמע וואָס ווייַזן די קאַטאַגעריזיישאַן פון דיין קראַנט נעץ גיכקייַט. אויב דער שטריך איז נישט געשטיצט אין אייער בלעטערער, אַ צונעמען פירמע איז אויך רענדערד.

דאָך איר קענען שפּילן מיט דעם שטריך דורך עפן די דעווטאָאָלס פון דיין בלעטערער און סימיאַלייטינג אַ נעץ-גערגל דורך די נעץ קוויטל.

//
// 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;
}

קלאָוזינג ווערטער

ווי איר קענען זען, די קאָד פארלאנגט צו באַקומען אַ דיטיילד ינסייט אין די נעץ ספּידז פון דיין קלייאַנץ איז איצט גרינגער ווי אלץ, דאַנק צו די פּראָגרעס אין די קראָומיאַם מאָטאָר. עס איז ניט דאַרפֿן צו האַלטן פּאָללינג אַ מנהג סערווער און פירן אַ געשיכטע פון דאַטן פונקטן צו רעכענען די גיכקייַט דורך זיך.