feat: turn into a pwa

This commit is contained in:
Julien Calixte
2026-03-23 19:25:34 +01:00
parent 1afe86b79a
commit da1f3566c2
6 changed files with 99 additions and 0 deletions

View File

@@ -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>

After

Width:  |  Height:  |  Size: 662 B

10
app/static/icon.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 590 B

View File

@@ -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>

24
app/static/manifest.json Normal file
View File

@@ -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"
}
]
}

27
app/static/sw.js Normal file
View File

@@ -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))
);
});