useNetwork

1'use client'
2 
3import * as React from 'react'
4 
5interface NavigatorWithConnection extends Navigator {
6  connection?: NetworkInformation
7}
8 
9interface NetworkInformation extends EventTarget {
10  downlink: number
11  downlinkMax?: number
12  effectiveType: 'slow-2g' | '2g' | '3g' | '4g'
13  rtt: number
14  saveData: boolean
15  type?: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown'
16  addEventListener: (type: 'change', listener: () => void) => void
17  removeEventListener: (type: 'change', listener: () => void) => void
18}
19 
20export interface NetworkState {
21  /**
22   * The effective bandwidth estimate in megabits per second
23   */
24  downlink: number
25  /**
26   * The maximum downlink speed in megabits per second (experimental)
27   */
28  downlinkMax: number | undefined
29  /**
30   * The effective connection type: 'slow-2g', '2g', '3g', or '4g'
31   */
32  effectiveType: 'slow-2g' | '2g' | '3g' | '4g'
33  /**
34   * The estimated round-trip time in milliseconds
35   */
36  rtt: number
37  /**
38   * Whether the user has enabled data saver mode
39   */
40  saveData: boolean
41  /**
42   * The connection type (experimental)
43   */
44  type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown' | undefined
45  /**
46   * Whether the Network Information API is supported
47   */
48  isSupported: boolean
49  /**
50   * Whether the connection is considered slow (slow-2g or 2g)
51   */
52  isConnectionSlow: boolean
53  /**
54   * Whether the user is currently online
55   */
56  online: boolean
57}
58 
59function getNetworkState(): NetworkState {
60  if (typeof window === 'undefined') {
61    return {
62      downlink: 0,
63      downlinkMax: undefined,
64      effectiveType: '4g',
65      rtt: 0,
66      saveData: false,
67      type: undefined,
68      isSupported: false,
69      isConnectionSlow: false,
70      online: true,
71    }
72  }
73 
74  const nav = navigator as NavigatorWithConnection
75  const connection = nav.connection
76 
77  if (!connection) {
78    return {
79      downlink: 0,
80      downlinkMax: undefined,
81      effectiveType: '4g',
82      rtt: 0,
83      saveData: false,
84      type: undefined,
85      isSupported: false,
86      isConnectionSlow: false,
87      online: window.navigator.onLine,
88    }
89  }
90 
91  const effectiveType = connection.effectiveType
92  const isConnectionSlow = effectiveType === 'slow-2g' || effectiveType === '2g'
93 
94  return {
95    downlink: connection.downlink,
96    downlinkMax: connection.downlinkMax,
97    effectiveType,
98    rtt: connection.rtt,
99    saveData: connection.saveData,
100// … truncated