API πληροφοριών δικτύου για PWA

Το API πληροφοριών δικτύου για PWA

Εάν έχετε αναπτύξει ποτέ προοδευτικές εφαρμογές ιστού που απαιτούν πιο λεπτομερείς πληροφορίες σχετικά με την τρέχουσα κατάσταση του δικτύου από μια απλή τυπική τιμή σε απευθείας σύνδεση/εκτός σύνδεσης, είναι τώρα διαθέσιμο ένα νέο API, που ονομάζεται "Network Information API".

Όπως συμβαίνει με κάθε νέα σύγχρονη λειτουργία προγράμματος περιήγησης, μπορείτε να βελτιώσετε προοδευτικά την εφαρμογή ιστού σας με μερικές γραμμές κώδικα για να μάθετε για την ταχύτητα της τρέχουσας σύνδεσης.

Μια νέα ιδιότητα για τον πλοηγό

Το αντικείμενο πλοήγησης βελτιώθηκε με μια νέα ιδιότητα που ονομάζεται "σύνδεση", η οποία επιτρέπει τόσο την εφάπαξ ανάγνωση της κατάστασης του δικτύου όσο και μια συνδρομή για να αντιδράσουν σε αλλαγές στον τύπο δικτύου. Λάβετε υπόψη ότι, από τη σύνταξη, μόνο το Chrome υποστηρίζει πλήρως το API. Το Safari και ο Firefox δεν το υποστηρίζουν καθόλου. Άλλα προγράμματα περιήγησης που βασίζονται στο Chromium, όπως το Edge ή το Opera έχουν σχεδόν πλήρη υποστήριξη, συμπεριλαμβανομένων των πιο σημαντικών μετρήσεων.

Πραγματικά δεδομένα δικτύου στην εφαρμογή Ιστού σας

Ο ακόλουθος κώδικας δείχνει ένα πλήρες παράδειγμα του τρόπου με τον οποίο μπορείτε να χρησιμοποιήσετε αυτό το νέο 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. Δεν χρειάζεται να συνεχίσετε τη δημοσκόπηση ενός προσαρμοσμένου διακομιστή και να διαχειρίζεστε ένα ιστορικό σημείων δεδομένων για να υπολογίσετε μόνοι σας την ταχύτητα.