fix: replace getCurrentPosition with watchPosition for iOS Safari

iOS Safari re-prompts geolocation permission on every getCurrentPosition
call after a page reload. Replace the getCurrentPosition + setInterval
pattern with watchPosition which triggers only one permission prompt and
continuously delivers updates.

Also guard navigator.permissions.query() which is unsupported on iOS
Safari, and add error callbacks for permission denied, position
unavailable, and timeout scenarios.

Author: yepzdk

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- Fix iOS Safari geolocation re-prompting on every page reload (use `watchPosition`, guard `permissions.query`)
 - Security and dependency updates (8 vulnerabilities fixed, ESLint v9, React/Prettier updated)
 
 ## [1.0.8] - 2025-28-01

src/App.jsx

@@ -28,7 +28,6 @@ function App() {
   const [infoText, setInfoText] = useState("");
   const [lat, setLat] = useState(null);
   const [long, setLong] = useState(null);
-  const locationUpdateInterval = 30000;
 
   const contextLatLong = useMemo(
     () => ({
@@ -38,42 +37,52 @@ function App() {
     [lat, long],
   );
 
-  function handlePermissionInfoBanner() {
-    navigator.permissions.query({ name: "geolocation" }).then((result) => {
-      if (result.state !== "granted") {
-        setInfo(true);
-        setInfoText(
-          <span>
-            Du har ikke accepteret, at vi må få adgang til din lokation. For at denne applikation skal fungere, skal den
-            bruge din lokation. Hvis du vil vide mere om hvordan du giver denne angang, kan du besøge{" "}
-            <Link className="underline" to="/navigation-help">
-              Hjælp til navigation
-            </Link>
-          </span>,
-        );
-      }
-    });
-  }
+  const permissionDeniedBanner = (
+    <span>
+      Du har ikke accepteret, at vi må få adgang til din lokation. For at denne applikation skal fungere, skal den bruge
+      din lokation. Hvis du vil vide mere om hvordan du giver denne adgang, kan du besøge{" "}
+      <Link className="underline" to="/navigation-help">
+        Hjælp til navigation
+      </Link>
+    </span>
+  );
 
   useEffect(() => {
-    handlePermissionInfoBanner();
+    if (navigator.permissions && navigator.permissions.query) {
+      navigator.permissions
+        .query({ name: "geolocation" })
+        .then((result) => {
+          if (result.state === "denied") {
+            setInfo(true);
+            setInfoText(permissionDeniedBanner);
+          }
+        })
+        .catch(() => {});
+    }
   }, []);
 
-  function startLocationPrompter() {
-    setInterval(() => {
-      navigator.geolocation.getCurrentPosition((position) => {
+  useEffect(() => {
+    const watchId = navigator.geolocation.watchPosition(
+      (position) => {
         setLat(position.coords.latitude);
         setLong(position.coords.longitude);
-      });
-    }, locationUpdateInterval);
-  }
+      },
+      (err) => {
+        if (err.code === err.PERMISSION_DENIED) {
+          setInfo(true);
+          setInfoText(permissionDeniedBanner);
+        } else if (err.code === err.POSITION_UNAVAILABLE) {
+          setError(true);
+          setErrorText("Din lokation kunne ikke bestemmes.");
+        } else if (err.code === err.TIMEOUT) {
+          setError(true);
+          setErrorText("Forespørgslen om din lokation tog for lang tid.");
+        }
+      },
+      { enableHighAccuracy: true, timeout: 30000, maximumAge: 10000 },
+    );
 
-  useEffect(() => {
-    navigator.geolocation.getCurrentPosition((position) => {
-      setLat(position.coords.latitude);
-      setLong(position.coords.longitude);
-    });
-    startLocationPrompter();
+    return () => navigator.geolocation.clearWatch(watchId);
   }, []);
 
   useEffect(() => {