frontend: add persistent storage to keep browsers from clearing the cache

Author: ffreddow

frontend/src/index.tsx

@@ -32,7 +32,9 @@ import Tab from "react-bootstrap/Tab";
 import { ErrorAlert } from './components/Alert.js';
 import { isDebugMode, refresh_access_token } from './utils';
 import { AppState, loggedIn } from './utils.js';
-import { Col, Spinner } from 'react-bootstrap';
+import { Col, Form, Spinner } from 'react-bootstrap';
+import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button";
 import { Recovery } from './pages/Recovery.js';
 import { Trans, useTranslation } from "react-i18next";
 import Median from "median-js-bridge";
@@ -44,7 +46,7 @@ import { startVersionChecking } from './versionChecker';
 
 import "./styles/main.scss";
 import { docs } from "links";
-import { useEffect } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 if (isDebugMode.value) {
     addEventListener("unhandledrejection", (event) => {
@@ -79,6 +81,52 @@ const Frame = lazy(() => import('./pages/Frame.js').then(m => m.Frame));
 export function App() {
     const {t} = useTranslation("", {useSuspense: false});
 
+    const [modalConfig, setModalConfig] = useState({ show: false, rememberChoice: false });
+
+    console.log(window.navigator.userAgent);
+    if (window.navigator.userAgent.indexOf("Firefox") !== -1 && localStorage.getItem("persistedChoice") !== "true") {
+        useEffect(() => {
+            (async () => {
+                try {
+                    const persisted = await navigator.storage.persisted();
+                    console.log(`Storage persisted: ${persisted}`);
+                    if (!persisted) {
+                        setModalConfig({...modalConfig, show: true });
+                    }
+                } catch (e) {
+                    console.warn("Failed to check storage persistence", e);
+                }
+            })();
+        }, []);
+    } else {
+        useEffect(() => {
+            (async () => {
+                try {
+                    const granted = await navigator.storage.persist();
+                    console.log(`Storage persistence granted: ${granted}`);
+                    if (!granted) {
+                        console.warn("Storage persistence not granted. You may be logged out from time to time.");
+                    }
+                } catch (e) {
+                    console.warn("Failed to request storage persistence", e);
+                }
+            })();
+        }, []);
+    }
+
+    const requestPersistence = async () => {
+        try {
+            const granted = await navigator.storage.persist();
+            if (!granted) {
+                console.warn("Storage persistence not granted. You may be logged out from time to time.");
+            }
+        } catch (e) {
+            console.warn("Failed to request storage persistence", e);
+        } finally {
+            setModalConfig({...modalConfig, show: false });
+        }
+    };
+
     useEffect(() => {
         if (!connected.value) {
             document.title = t("app_name");
@@ -119,6 +167,39 @@ export function App() {
         }
     }, []);
 
+    // Prepare persistence explanation modal to render alongside any app state
+    const persistModal = (
+        <Modal show={modalConfig.show} onHide={() => setModalConfig({...modalConfig, show: false})} backdrop="static" keyboard={false} centered>
+            <Modal.Header closeButton>
+                <Modal.Title>{t("storage_persistence.title", { defaultValue: "Keep you signed in" })}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {t("storage_persistence.body")}
+                <div className="mt-3"
+                     onClick={() => setModalConfig({...modalConfig, rememberChoice: !modalConfig.rememberChoice})}>
+                    <Form.Check
+                        type="checkbox"
+                        label={t("storage_persistence.remember_choice")}
+                        checked={modalConfig.rememberChoice}
+                    />
+                </div>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={() => {
+                    setModalConfig({...modalConfig, show: false});
+                    if (modalConfig.rememberChoice) {
+                        localStorage.setItem("persistedChoice", "true");
+                    }
+                }}>
+                    {t("not_now")}
+                </Button>
+                <Button variant="primary" onClick={requestPersistence}>
+                    {t("allow")}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+
     if (!window.ServiceWorker) {
         return <Row fluid className="align-content-center justify-content-center vh-100">
             {t("no_service_worker")}
@@ -187,6 +268,7 @@ export function App() {
                         </LocationProvider>
                     </Col>
                     { Median.isNativeApp() ? <></> : <Footer /> }
+                    {persistModal}
                 </>
             );
         // we need an extra recovery state, otherwise we would show the login/register page.

frontend/src/locales/de.ts

@@ -6,6 +6,13 @@ export const de ={
     "alert_default_success": "Erfolg!",
     description,
     "no_service_worker": "Dein Browser benötigt Unterstützung für ServiceWorker um den Fernzugriff nutzen zu können.",
+    "not_now": "Jetzt nicht",
+    "allow": "Erlauben",
+    "storage_persistence": {
+        "title": "Angemeldet bleiben",
+        "body": "Wir verwenden den Speicher deines Browsers, um dich angemeldet zu halten. Einige Browser löschen diese Daten automatisch (z. B. bei wenig Speicherplatz oder nach einiger Zeit). Das Zulassen von dauerhaftem Speicher hilft unerwartete Abmeldungen zu vermeiden.",
+        "remember_choice": "Nicht mehr fragen"
+    },
     "user": {
         "account_actions": "Kontoaktionen",
         "profile_information": "Kontoinformationen",

frontend/src/locales/en.ts

@@ -6,6 +6,13 @@ export const en = {
     "alert_default_success": "Success!",
     description,
     "no_service_worker": "Your browser needs support for ServiceWorkers to be able to run the Remote Access.",
+    "not_now": "Not now",
+    "allow": "Allow",
+    "storage_persistence": {
+        "title": "Keep you signed in",
+        "body": "We use your browser's storage to keep you signed in. Some browsers clear this data automatically (e.g., on low storage or after some time). Allowing persistent storage helps prevent unexpected logouts.",
+        "remember_choice": "Don't ask again"
+    },
     "user": {
         "account_actions": "Account actions",
         "profile_information": "Account information",