feat: add PWA support with service worker, manifest, and icons

This commit is contained in:
Jaime Idolpx 2026-04-14 14:04:23 -04:00
parent 939565ce5a
commit bb3dd5ee57
6 changed files with 51 additions and 0 deletions

View File

@ -5,6 +5,13 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meatloaf Config</title>
<meta name="theme-color" content="#4d4d4d" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="/icon-192.png" />
<style>html, body { height: 100%; margin: 0; } #root { height: 100%; }</style>
</head>

BIN
public/icon.192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/icon.512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -0,0 +1,21 @@
{
"name": "Meatloaf Config",
"short_name": "Meatloaf",
"start_url": ".",
"display": "standalone",
"background_color": "#4d4d4d",
"theme_color": "#4d4d4d",
"description": "Configuration app for Meatloaf device.",
"icons": [
{
"src": "/icon.192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon.512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

15
public/service-worker.js Normal file
View File

@ -0,0 +1,15 @@
self.addEventListener('install', event => {
self.skipWaiting();
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});

View File

@ -1,7 +1,15 @@
import { createRoot } from "react-dom/client";
import App from "./app/App.tsx";
import "./styles/index.css";
// Register service worker for PWA installability
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
createRoot(document.getElementById("root")!).render(<App />);