ממשק מידע לרשת עבור PWA

ממשק המידע API לרשת עבור PWA

אם אי פעם פיתחת אפליקציות אינטרנט מתקדמות הדורשות מידע מפורט יותר על מצב הרשת הנוכחי מאשר רק ערך בוליאני מקוון/לא מקוון, יש כעת API חדש שנקרא "רשת מידע API".

כמו בכל תכונת דפדפן מודרנית חדשה, אתה יכול לשפר את יישום האינטרנט שלך בהדרגה עם כמה שורות קוד כדי ללמוד על מהירות החיבור הנוכחי.

נכס חדש לנווט

אובייקט הנווט השתפר עם מאפיין חדש בשם "חיבור", המאפשר הן קריאה חד פעמית של מצב הרשת והן הרשמה להגיב לשינויים בסוג הרשת. שים לב, נכון לכתיבה, רק Chrome תומך במלואו ב- API. ספארי ופיירפוקס לא תומכים בזה כלל. לדפדפנים אחרים המבוססים על כרום כגון Edge או אופרה יש תמיכה כמעט מלאה, כולל המדדים החשובים ביותר.

נתוני רשת אמיתיים ביישום האינטרנט שלך

הקוד הבא מציג דוגמה מלאה לאופן השימוש ב- API החדש של מידע רשת. להפגנה בעולם האמיתי, פשוט גלול לתחתית העמוד של PWA זה. אם הדפדפן שלך תומך ב- API, תראה סמל אות ותווית המציגה את הסיווג של מהירות הרשת הנוכחית שלך. אם התכונה אינה נתמכת בדפדפן שלך, תווית מתאימה יוצגה גם כן.

כמובן שאתה יכול לשחק עם תכונה זו על ידי פתיחת 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. אין צורך להמשיך ולסקור שרת מותאם אישית ולנהל היסטוריה של נקודות נתונים כדי לחשב את המהירות בעצמך.