From da1f3566c2182332437ff16bd1c3b01f86d30e1a Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 23 Mar 2026 19:25:34 +0100
Subject: [PATCH] feat: turn into a pwa

---
 app/main.py                  | 20 ++++++++++++++++++++
 app/static/icon-maskable.svg | 11 +++++++++++
 app/static/icon.svg          | 10 ++++++++++
 app/static/index.html        |  7 +++++++
 app/static/manifest.json     | 24 ++++++++++++++++++++++++
 app/static/sw.js             | 27 +++++++++++++++++++++++++++
 6 files changed, 99 insertions(+)
 create mode 100644 app/static/icon-maskable.svg
 create mode 100644 app/static/icon.svg
 create mode 100644 app/static/manifest.json
 create mode 100644 app/static/sw.js

diff --git a/app/main.py b/app/main.py
index ce78669..704373f 100644
--- a/app/main.py
+++ b/app/main.py
@@ -36,6 +36,26 @@ async def worker_js():
     return FileResponse(STATIC_DIR / "worker.js", media_type="application/javascript")
 
 
+@app.get("/sw.js")
+async def sw_js():
+    return FileResponse(STATIC_DIR / "sw.js", media_type="application/javascript")
+
+
+@app.get("/manifest.json")
+async def manifest():
+    return FileResponse(STATIC_DIR / "manifest.json", media_type="application/manifest+json")
+
+
+@app.get("/icon.svg")
+async def icon():
+    return FileResponse(STATIC_DIR / "icon.svg", media_type="image/svg+xml")
+
+
+@app.get("/icon-maskable.svg")
+async def icon_maskable():
+    return FileResponse(STATIC_DIR / "icon-maskable.svg", media_type="image/svg+xml")
+
+
 @app.post("/extract-audio")
 async def extract_audio(body: ExtractAudioRequest, background_tasks: BackgroundTasks):
     try:
diff --git a/app/static/icon-maskable.svg b/app/static/icon-maskable.svg
new file mode 100644
index 0000000..5a67ca3
--- /dev/null
+++ b/app/static/icon-maskable.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- Full bleed background for maskable -->
+  <rect width="512" height="512" fill="#0f0f13"/>
+  <!-- Microphone body (slightly smaller for safe zone) -->
+  <rect x="218" y="116" width="76" height="148" rx="38" fill="#7c6af7"/>
+  <!-- Microphone arc -->
+  <path d="M172 264 a84 84 0 0 0 168 0" fill="none" stroke="#7c6af7" stroke-width="22" stroke-linecap="round"/>
+  <!-- Stand -->
+  <line x1="256" y1="348" x2="256" y2="390" stroke="#7c6af7" stroke-width="22" stroke-linecap="round"/>
+  <line x1="206" y1="390" x2="306" y2="390" stroke="#7c6af7" stroke-width="22" stroke-linecap="round"/>
+</svg>
diff --git a/app/static/icon.svg b/app/static/icon.svg
new file mode 100644
index 0000000..0884731
--- /dev/null
+++ b/app/static/icon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="96" fill="#0f0f13"/>
+  <!-- Microphone body -->
+  <rect x="208" y="96" width="96" height="176" rx="48" fill="#7c6af7"/>
+  <!-- Microphone arc -->
+  <path d="M160 256 a96 96 0 0 0 192 0" fill="none" stroke="#7c6af7" stroke-width="24" stroke-linecap="round"/>
+  <!-- Stand -->
+  <line x1="256" y1="352" x2="256" y2="400" stroke="#7c6af7" stroke-width="24" stroke-linecap="round"/>
+  <line x1="200" y1="400" x2="312" y2="400" stroke="#7c6af7" stroke-width="24" stroke-linecap="round"/>
+</svg>
diff --git a/app/static/index.html b/app/static/index.html
index ffe50fc..365b141 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -4,6 +4,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Apoena Transcript</title>
+  <link rel="manifest" href="/manifest.json" />
+  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+  <meta name="theme-color" content="#7c6af7" />
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -606,6 +609,10 @@ function toSRTTime(seconds) {
 }
 
 function pad(n, len = 2) { return String(Math.floor(n)).padStart(len, '0'); }
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js');
+}
 </script>
 </body>
 </html>
diff --git a/app/static/manifest.json b/app/static/manifest.json
new file mode 100644
index 0000000..656f125
--- /dev/null
+++ b/app/static/manifest.json
@@ -0,0 +1,24 @@
+{
+  "name": "Apoena Transcript",
+  "short_name": "Apoena",
+  "description": "Privacy-first, in-browser speech-to-text transcription",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "theme_color": "#7c6af7",
+  "background_color": "#0f0f13",
+  "icons": [
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/app/static/sw.js b/app/static/sw.js
new file mode 100644
index 0000000..38532ab
--- /dev/null
+++ b/app/static/sw.js
@@ -0,0 +1,27 @@
+const CACHE = 'apoena-v1';
+const PRECACHE = ['/', '/worker.js', '/manifest.json', '/icon.svg', '/icon-maskable.svg'];
+
+self.addEventListener('install', e => {
+  e.waitUntil(caches.open(CACHE).then(c => c.addAll(PRECACHE)));
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', e => {
+  e.waitUntil(
+    caches.keys().then(keys =>
+      Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', e => {
+  const url = new URL(e.request.url);
+
+  // Pass through API calls
+  if (url.pathname === '/extract-audio') return;
+
+  e.respondWith(
+    caches.match(e.request).then(cached => cached || fetch(e.request))
+  );
+});