Skip to content

Commit 16f16bb

Browse files
flaming-codesflaming-codes
authored
Update code examples
1 parent 3c5fd58 commit 16f16bb

File tree

6 files changed

+142
-19
lines changed

6 files changed

+142
-19
lines changed

‎README.md‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,54 @@
1-
# svelte-network-information
2-
Svelte store for the (experimental) Network Information API
1+
# Svelte Network Information API
2+
3+
This library provides a readable Svelte store to use a PWA's access to the [`Network Information API`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation), available on the navigator. It allows you to subscribe to network changes and read the provided values.
4+
5+
> Note:
6+
> 'Network Information API' is currently experimental and only supported in a very limited set of browsers.
7+
8+
## Install
9+
10+
```text
11+
npm i -D svelte-network-information
12+
```
13+
14+
## Usage
15+
16+
### Basic
17+
18+
This library provides a simple readable store that automatically subscribes to events of a connection instance of `NetworkInformation`, an API of the `navigator` to access detailed metrics regarding network states.
19+
20+
```svelte
21+
<script lang="ts">
22+
import { networkInformationStore as store } from 'svelte-network-information';
23+
</script>
24+
25+
<ul>
26+
<li>State: {$store.state}</li>
27+
<li>connectivity: {$store.connectivity}</li>
28+
<li>downlink: {$store.downlink}</li>
29+
<li>downlinkMax: {$store.downlinkMax}</li>
30+
<li>effectiveType: {$store.effectiveType}</li>
31+
<li>rtt: {$store.rtt}</li>
32+
<li>saveData: {$store.saveData}</li>
33+
<li>type: {$store.type}</li>
34+
</ul>
35+
```
36+
37+
### Derived
38+
39+
To subscribe to changes for only a specific selection of values, simply create a `derived` store.
40+
41+
```svelte
42+
<script lang="ts">
43+
import { networkInformationStore } from 'svelte-network-information';
44+
import { derived } from 'svelte/store';
45+
46+
const rtt = derived(networkInformationStore, ($store) => $store.rtt);
47+
</script>
48+
49+
rtt: {$rtt}
50+
```
51+
52+
## API
53+
54+
See [types](https://github.com/flaming-codes/svelte-network-information/blob/main/pkg/src/lib/types.ts) for a detailed type definition.

‎demo/src/routes/derived.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import { networkInformationStore } from 'svelte-network-information';
3+
import { derived } from 'svelte/store';
4+
5+
const rtt = derived(networkInformationStore, ($store) => $store.rtt);
6+
</script>
7+
8+
<h1>Svelte Battery PWA API</h1>
9+
10+
<h2>This demo shows a dervied store usage, which only reads the <strong>rtt</strong></h2>
11+
<ul>
12+
<li>rtt: {$rtt}</li>
13+
</ul>

‎demo/src/routes/index.svelte‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<script lang="ts">
2-
import {networkInformationStore} from "svelte-network-information";
2+
import { networkInformationStore as store } from 'svelte-network-information';
33
</script>
44

55
<ul>
6-
<li>State: {$networkInformationStore.state}</li>
7-
<li>connectivity: {$networkInformationStore.connectivity}</li>
8-
<li>downlink: {$networkInformationStore.downlink}</li>
9-
<li>downlinkMax: {$networkInformationStore.downlinkMax}</li>
10-
<li>effectiveType: {$networkInformationStore.effectiveType}</li>
11-
<li>rtt: {$networkInformationStore.rtt}</li>
12-
<li>saveData: {$networkInformationStore.saveData}</li>
13-
<li>type: {$networkInformationStore.type}</li>
6+
<li>State: {$store.state}</li>
7+
<li>connectivity: {$store.connectivity}</li>
8+
<li>downlink: {$store.downlink}</li>
9+
<li>downlinkMax: {$store.downlinkMax}</li>
10+
<li>effectiveType: {$store.effectiveType}</li>
11+
<li>rtt: {$store.rtt}</li>
12+
<li>saveData: {$store.saveData}</li>
13+
<li>type: {$store.type}</li>
1414
</ul>
15+
16+
<a href="/derived" aria-label="Link to derived store demo">Derived store</a>

‎pkg/README.md‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,54 @@
1-
# svelte-network-information
2-
Svelte store for the (experimental) Network Information API
1+
# Svelte Network Information API
2+
3+
This library provides a readable Svelte store to use a PWA's access to the [`Network Information API`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation), available on the navigator. It allows you to subscribe to network changes and read the provided values.
4+
5+
> Note:
6+
> 'Network Information API' is currently experimental and only supported in a very limited set of browsers.
7+
8+
## Install
9+
10+
```text
11+
npm i -D svelte-network-information
12+
```
13+
14+
## Usage
15+
16+
### Basic
17+
18+
This library provides a simple readable store that automatically subscribes to events of a connection instance of `NetworkInformation`, an API of the `navigator` to access detailed metrics regarding network states.
19+
20+
```svelte
21+
<script lang="ts">
22+
import { networkInformationStore as store } from 'svelte-network-information';
23+
</script>
24+
25+
<ul>
26+
<li>State: {$store.state}</li>
27+
<li>connectivity: {$store.connectivity}</li>
28+
<li>downlink: {$store.downlink}</li>
29+
<li>downlinkMax: {$store.downlinkMax}</li>
30+
<li>effectiveType: {$store.effectiveType}</li>
31+
<li>rtt: {$store.rtt}</li>
32+
<li>saveData: {$store.saveData}</li>
33+
<li>type: {$store.type}</li>
34+
</ul>
35+
```
36+
37+
### Derived
38+
39+
To subscribe to changes for only a specific selection of values, simply create a `derived` store.
40+
41+
```svelte
42+
<script lang="ts">
43+
import { networkInformationStore } from 'svelte-network-information';
44+
import { derived } from 'svelte/store';
45+
46+
const rtt = derived(networkInformationStore, ($store) => $store.rtt);
47+
</script>
48+
49+
rtt: {$rtt}
50+
```
51+
52+
## API
53+
54+
See [types](https://github.com/flaming-codes/svelte-network-information/blob/main/pkg/src/lib/types.ts) for a detailed type definition.

‎pkg/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"version": "1.0.0",
33
"name": "svelte-network-information",
4-
"description": "A store implementation for Svelte to use the Network Information API for PWAs",
4+
"description": "A store implementation for Svelte to use the Network Information API in PWAs",
55
"svelte": "index.js",
66
"keywords": [
77
"svelte network information api",
@@ -49,5 +49,8 @@
4949
"svelte2tsx": "^0.5.5",
5050
"tslib": "^2.3.1",
5151
"typescript": "~4.5.4"
52+
},
53+
"bugs": {
54+
"url": "https://github.com/flaming-codes/svelte-network-information/issues"
5255
}
5356
}

‎pkg/src/lib/model.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ export function getInitialNetorkInformationStore(): NetworkInformationStore {
1515
export function subscribeToNetworkInformation(setter: Subscriber<NetworkInformationStore>) {
1616
// Noop on SSR.
1717
if (!browser) {
18-
console.log("-- no browser");
19-
20-
// return;
18+
return;
2119
}
2220

2321
try {
@@ -26,7 +24,8 @@ export function subscribeToNetworkInformation(setter: Subscriber<NetworkInformat
2624
navigator?.connection || navigator?.mozConnection || navigator?.webkitConnection;
2725

2826
if (!connection) {
29-
setter({ state: "not-supported" })
27+
setter({ state: "not-supported" });
28+
return;
3029
}
3130

3231
const updateState = () => {
@@ -42,6 +41,9 @@ export function subscribeToNetworkInformation(setter: Subscriber<NetworkInformat
4241
});
4342
}
4443

44+
// Inital state set. No change might happen at all.
45+
updateState();
46+
4547
connection.addEventListener("change", updateState);
4648
window.addEventListener('online', updateState);
4749
window.addEventListener('offline', updateState);
@@ -52,7 +54,6 @@ export function subscribeToNetworkInformation(setter: Subscriber<NetworkInformat
5254
window.removeEventListener('offline', updateState);
5355
};
5456
} catch (error) {
55-
console.error(error);
5657
setter({ state: "error" })
5758
}
5859
}

0 commit comments

Comments
 (0)