webAPI/nwinfo.html at master · robbmue/webAPI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html lang="en">

<head>
    <!-- basic.html -->
    <title>Network information API</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Network information API</h1>

    <p></p>

    <p>Network type that browser uses: <code id=type></code>
    <p>Effective bandwidth estimate: <code id=downlink></code>
    <p>Effective round-trip time estimate: <code id=rtt></code>
    <p>Upper bound on the downlink speed of the first network hop: <code id=downlinkMax></code>
    <p>Effective connection type determined using a combination of recently observed rtt and downlink values: <code id=effectiveType></code>
    <p>True if the user has requested a reduced data usage mode from the user agent: <code id=saveData></code></p>

    <script>
        navigator.connection.addEventListener('change', logNetworkInfo);
        const type = document.querySelector("#type");
        const downlink = document.querySelector("#downlink");
        const rtt = document.querySelector("#rtt");
        const downlinkMax = document.querySelector("#downlinkMax");
        const effectiveType = document.querySelector("#effectiveType");
        const saveData = document.querySelector("#saveData");


        function log(info) {
            console.log(info);
        }

        function logNetworkInfo() {
            // Network type that browser uses
            log('         type: ' + navigator.connection.type);
            type.textContent = ('         type: ' + navigator.connection.type);

            // Effective bandwidth estimate
            log('     downlink: ' + navigator.connection.downlink + 'Mb/s');
            downlink.textContent = ('     downlink: ' + navigator.connection.downlink + 'Mb/s');

            // Effective round-trip time estimate
            log('          rtt: ' + navigator.connection.rtt + 'ms');
            rtt.textContent = ('          rtt: ' + navigator.connection.rtt + 'ms');

            // Upper bound on the downlink speed of the first network hop
            log('  downlinkMax: ' + navigator.connection.downlinkMax + 'Mb/s');
            downlinkMax.textContent = ('  downlinkMax: ' + navigator.connection.downlinkMax + 'Mb/s');

            // Effective connection type determined using a combination of recently
            // observed rtt and downlink values: ' +
            log('effectiveType: ' + navigator.connection.effectiveType);
            effectiveType.textContent = ('effectiveType: ' + navigator.connection.effectiveType);

            // True if the user has requested a reduced data usage mode from the user
            // agent.
            log('     saveData: ' + navigator.connection.saveData);
            saveData.textContent = ('     saveData: ' + navigator.connection.saveData);

        }

        logNetworkInfo();
    </script>
    <a href="index.html"> back </a>
</body>