add offline support

public/index.html

@@ -111,7 +111,38 @@
           <input class="progress-storage-toggle" type="checkbox" role="switch" aria-checked="false">
           <span class="switch-track" aria-hidden="true"></span>
         </label>
+        <div class="offline-option-row">
+          <label class="switch-row">
+            <span>
+              <strong>App offline speichern</strong>
+              <small>Speichert nur die Dateien zur Anzeige der App. Strecken werden separat ausgewählt und gespeichert.</small>
+            </span>
+            <input id="offline-cache-toggle" type="checkbox" role="switch" aria-checked="false" aria-describedby="offline-cache-status">
+            <span class="switch-track" aria-hidden="true"></span>
+          </label>
+          <button id="offline-cache-help-button" class="offline-help-button" type="button" aria-label="Hilfe zur Offline-Speicherung" title="Was wird offline gespeichert?" aria-expanded="false" aria-controls="offline-cache-help">?</button>
+        </div>
+        <section id="offline-cache-help" class="offline-help" aria-labelledby="offline-cache-help-title" hidden>
+          <h2 id="offline-cache-help-title">Was wird offline gespeichert?</h2>
+          <p>Dieser Schalter speichert nur die App-Dateien: Startseite, Darstellung, Programme, mitgelieferte Bibliotheken, Symbole und Wichtel-Grafiken. Strecken, GPX-Dateien und Streckenmedien werden dabei nicht gespeichert.</p>
+          <p>Öffne eine Strecke und wähle „Strecke offline speichern“, um genau diese Strecke mit GPX, Wegpunkten, Bildern und Audio für die App zu speichern. „GPX herunterladen“ legt eine normale GPX-Datei im Download-Ordner deines Geräts ab.</p>
+          <p>Die Offline-Kopien für die App liegen im geschützten Speicher dieses Browsers auf diesem Gerät. Dafür musst du keinen Ordner auswählen. Dieser Schalter speichert keine GPS-Aufzeichnung.</p>
+          <p>Warte vor dem Losgehen, bis die Downloads abgeschlossen sind. Aktualisieren braucht Internet. Beim Ausschalten dieses Schalters werden nur die App-Kopien entfernt; separat gespeicherte Strecken, lokale Entwürfe und Streckenfortschritt bleiben erhalten.</p>
+          <p>Die Speicheranzeige schätzt die Belegung dieser Website. Local Storage für Entwürfe hat zusätzlich eine eigene Grenze. Der Browser kann Offline-Dateien bei knappem Speicher entfernen; beim Löschen der Website-Daten gehen sie ebenfalls verloren. Externe Karten werden nicht automatisch gespeichert.</p>
+        </section>
+        <p id="offline-cache-status" role="status" aria-live="polite"></p>
+        <button id="offline-cache-refresh" type="button" hidden>App-Dateien aktualisieren</button>
       </div>
+        <section class="storage-usage" data-storage-usage aria-label="Lokaler Speicher">
+          <h3>Lokaler Speicher</h3>
+          <meter data-storage-site-meter min="0" max="1" value="0" aria-label="Belegung des Website-Speichers" hidden></meter>
+          <p data-storage-site-text>Speicherbelegung wird ermittelt …</p>
+          <meter data-storage-local-meter min="0" max="5242880" value="0" aria-label="Local Storage im Verhältnis zum Richtwert von 5 MiB"></meter>
+          <p data-storage-local-text></p>
+          <p>Website-Speicher: Browser-Schätzung für App-Dateien, Offline-Strecken und Medien. Local Storage: separater Speicher für Entwürfe und Einstellungen. Beide Anzeigen beziehen sich nur auf diese Website, nicht auf die gesamte Festplatte.</p>
+          <p data-storage-warning role="status" hidden></p>
+          <button data-storage-refresh type="button">Speicheranzeige aktualisieren</button>
+        </section>
       <p id="storage-cleanup-status" class="storage-cleanup-status" hidden></p>
 
       <progress id="bootstrap-progress" class="bootstrap-state-model" max="7" value="0" hidden></progress>
@@ -198,6 +229,13 @@
       </header>
       <div class="content">
         <p id="route-description"></p>
+        <section id="route-offline-controls" class="route-offline-controls" aria-label="Strecke auf dem Gerät speichern" hidden>
+          <button id="route-offline-save" type="button">Strecke offline speichern</button>
+          <button id="route-offline-remove" type="button" hidden>Offline-Strecke entfernen</button>
+          <a id="route-gpx-download" download hidden>GPX herunterladen</a>
+          <p id="route-offline-status" role="status" aria-live="polite"></p>
+          <p>Die Offline-Funktion speichert diese Strecke samt GPX, Bildern und Audio im Browser. Der GPX-Download speichert nur die GPX-Datei im Download-Ordner.</p>
+        </section>
         <dl>
           <div><dt>Länge</dt><dd id="route-distance">–</dd></div>
           <div><dt>Höhenmeter</dt><dd id="route-elevation">–</dd></div>
@@ -369,6 +407,7 @@
           </label>
           <h3>Local Storage</h3>
           <p>Der Browser kann auf Wunsch Streckenfortschritte lokal speichern. Verwendet werden die Schlüssel <code>wegwichtel.privacy.v1</code> für die gewählte Einstellung und <code>wegwichtel.route-progress.v1</code> für die freiwilligen Streckendaten. Die Streckendaten werden nach 24 Stunden bereinigt oder beim Ausschalten sofort entfernt.</p>
+          <p>Mit „App offline speichern“ werden ausschließlich App-Dateien auf diesem Gerät gespeichert, keine Strecken. „Strecke offline speichern“ lädt eine einzeln gewählte veröffentlichte Strecke mit GPX, Bildern und Audio in den geschützten Browser-Speicher (OPFS oder CacheStorage). Beide Speicherstände können unabhängig entfernt werden. „GPX herunterladen“ speichert eine GPX-Datei im Download-Ordner des Geräts. Lokale Entwürfe und der optionale Fortschritt werden separat verwaltet; ihre 24-Stunden-Bereinigung betrifft keine Offline-Dateien.</p>
           <p>Lokale Streckenentwürfe werden getrennt davon unter <code>wegwichtel.local-routes.v1.*</code> gespeichert. Pro Entwurf werden GPX- und JSON-Daten im Local Storage vorgehalten; Bilder und Audiodateien liegen getrennt davon im lokalen Browser-Medienspeicher (IndexedDB). Diese Entwürfe werden nicht nach 24 Stunden bereinigt und sind nicht vom Schalter für den Streckenfortschritt abhängig. Durch Mediendateien kann das Speicherlimit des Browsers vergleichsweise schnell erreicht werden. Eine Serverübertragung erfolgt ausschließlich nach ausdrücklicher Betätigung des Upload-Buttons im Editor.</p>
           <label class="switch-row compact-switch">
             <span>
@@ -415,6 +454,16 @@
             <span aria-hidden="true">+</span>
           </button>
         </div>
+        <section class="storage-usage" data-storage-usage aria-label="Lokaler Speicher">
+          <h3>Lokaler Speicher</h3>
+          <meter data-storage-site-meter min="0" max="1" value="0" aria-label="Belegung des Website-Speichers" hidden></meter>
+          <p data-storage-site-text>Speicherbelegung wird ermittelt …</p>
+          <meter data-storage-local-meter min="0" max="5242880" value="0" aria-label="Local Storage im Verhältnis zum Richtwert von 5 MiB"></meter>
+          <p data-storage-local-text></p>
+          <p>Website-Speicher: Browser-Schätzung für App-Dateien, Offline-Strecken und Medien. Local Storage: separater Speicher für Entwürfe und Einstellungen. Beide Anzeigen beziehen sich nur auf diese Website, nicht auf die gesamte Festplatte.</p>
+          <p data-storage-warning role="status" hidden></p>
+          <button data-storage-refresh type="button">Speicheranzeige aktualisieren</button>
+        </section>
         <p class="editor-muted">Veröffentlichte Serverstrecken und ausschließlich in diesem Browser gespeicherte Entwürfe werden getrennt dargestellt.</p>
         <ul id="editor-route-list" class="editor-route-list" aria-live="polite"></ul>
       </section>
@@ -505,6 +554,9 @@
   <script src="js/editor-ui.js?v=0.12.14"></script>
   <script src="js/privacy-storage.js?v=0.12.14"></script>
   <script src="js/legal-ui.js?v=0.12.14"></script>
+  <script src="js/offline-storage.js?v=0.12.14"></script>
+  <script src="js/storage-usage.js?v=0.12.14"></script>
+  <script src="js/offline-cache.js?v=0.12.14"></script>
   <script src="js/bootstrap-loader.js?v=0.12.14"></script>
 </body>
 </html>