feat(example): add watch support for geolocation

Author: cfpwastaken

examples/api/src-tauri/capabilities/mobile.json

@@ -16,6 +16,7 @@
     "geolocation:allow-request-permissions",
     "geolocation:allow-watch-position",
     "geolocation:allow-get-current-position",
+    "geolocation:allow-clear-watch",
     "haptics:allow-impact-feedback",
     "haptics:allow-notification-feedback",
     "haptics:allow-selection-feedback",

examples/api/src/views/Geolocation.svelte

@@ -2,11 +2,18 @@
   import {
     checkPermissions,
     requestPermissions,
-    getCurrentPosition
+    getCurrentPosition,
+
+    watchPosition,
+    clearWatch
+
   } from '@tauri-apps/plugin-geolocation'
 
   export let onMessage
 
+  let pos = null
+  let watchId = null
+
   async function getPosition() {
     let permissions = await checkPermissions()
     if (
@@ -17,13 +24,66 @@
     }
 
     if (permissions.location === 'granted') {
-      getCurrentPosition().then(onMessage).catch(onMessage)
+      getCurrentPosition().then((position) => {
+        pos = position
+        onMessage(position)
+      }).catch((err) => {
+        pos = null
+        onMessage(err)
+      })
+    } else {
+      onMessage('permission denied')
+    }
+  }
+
+  async function watchPos() {
+    let permissions = await checkPermissions()
+    if (
+      permissions.location === 'prompt' ||
+      permissions.location === 'prompt-with-rationale'
+    ) {
+      permissions = await requestPermissions(['location'])
+    }
+
+    if (permissions.location === 'granted') {
+      watchId = await watchPosition({
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0
+      }, (position) => {
+        pos = position
+        onMessage(position)
+      })
+      onMessage('watchId: ' + watchId)
     } else {
       onMessage('permission denied')
     }
   }
+
+  async function stopWatching() {
+    await clearWatch(watchId)
+    watchId = null
+    pos = null
+  }
+
 </script>
 
 <button class="btn" id="cli-matches" on:click={getPosition}>
   Get Position
 </button>
+
+<button class="btn" on:click={watchPos}>
+  Watch Position
+</button>
+
+<button class="btn" on:click={stopWatching}>
+  Stop Watching
+</button>
+
+{#if watchId}
+  <span>Watch ID: {watchId}</span>
+{/if}
+
+{#if pos}
+  <pre>{JSON.stringify(pos, null, 2)}</pre>
+{/if}