From 3c35dcbf8e4ed974c57991b3b09419a18d45b55a Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Fri, 19 Jul 2024 14:35:28 +0200
Subject: [PATCH] feat(island): :sparkles: add listener on
 `navigator.connection` is available for `IsOnline`

---
 islands/IsOnline.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/islands/IsOnline.tsx b/islands/IsOnline.tsx
index 712d31f..29cd6b9 100644
--- a/islands/IsOnline.tsx
+++ b/islands/IsOnline.tsx
@@ -2,6 +2,13 @@ import { type Signal, useComputed, useSignal } from '@preact/signals'
 import { useEffect } from 'preact/hooks'
 import { IS_BROWSER } from '$fresh/runtime.ts'
 
+type NetworkConnection = {
+	addEventListener: (
+		type: 'change',
+		listener: (event: Event) => void | Promise<void>,
+	) => void
+}
+
 export default function IsOnline(
 	{ online, offline }: { online?: string; offline: string },
 ) {
@@ -19,7 +26,17 @@ export default function IsOnline(
 		}
 		return <span class={'island__is_online'}>{offline}</span>
 	})
-	useEffect(() => openSocket(status, { id: undefined }), [])
+	const connection = 'connection' in navigator
+		? navigator.connection as NetworkConnection
+		: null
+	useEffect(() => {
+		openSocket(status, { id: undefined })
+		connection?.addEventListener('change', () => {
+			fetch('/api/serviceworker/is-online')
+				.then(() => status.value = true)
+				.catch(() => status.value = false)
+		})
+	}, [])
 
 	return <>{displayed}</>
 }