Requesting a wake lock so that the screen is not dimmedwhileusing the app.

src/App.tsx

@@ -28,11 +28,39 @@ import Map from './components/map/map';
 
 setupIonicReact();
 
+// See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator
+const requestWakeLock = async () => {
+  const anyNav: any = navigator;
+  if ('wakeLock' in navigator) {
+    try {
+      const wakeLock = await anyNav['wakeLock'].request('screen');
+    } catch (err: any) {
+      // The wake lock request fails - usually system-related, such as low battery.
+      console.log(`Wake lock request failed: ${err.name}, ${err.message}`);
+    }
+  } else {
+    console.log('No wake lock support here...');
+  }
+};
+
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    console.log('Application hidden');
+  } else {
+    console.log('Application visible');
+    requestWakeLock();
+  }
+};
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+document.addEventListener('visibilitychange', handleVisibilityChange, false);
+requestWakeLock();
+
 const App: React.FC = () => {
   return (
     <IonApp>
       <Provider store={store}>
-        <PouchDB name='dyomedea' auto_compaction={true} revs_limit={10} >
+        <PouchDB name='dyomedea' auto_compaction={true} revs_limit={10}>
           <Suspense fallback='loading...'>
             <Map />
           </Suspense>