feat: add PWA support with offline caching

- Generate 192x192, 512x512 and Apple touch icons from favicon.svg - Add web app manifest (manifest.json) - Add service worker with network-first for HTML, cache-first for assets - Register SW in BaseLayout - Add theme-color meta and apple-touch-icon link
2026-05-10 21:06:19 +03:00
parent 56ab3f6952
commit 3750cd2cc6
6 changed files with 84 additions and 0 deletions
@@ -0,0 +1,24 @@
+{
+  "name": "Randify — Random Value Generators",
+  "short_name": "Randify",
+  "description": "Simple tools for raffles, games, and everything that needs randomness.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#09090b",
+  "theme_color": "#534AB7",
+  "orientation": "portrait-primary",
+  "scope": "/",
+  "lang": "en",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
@@ -0,0 +1,52 @@
+const CACHE_NAME = 'randify-v1';
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const isNavigate = request.mode === 'navigate';
+  const isSameOrigin = new URL(request.url).origin === self.location.origin;
+
+  if (!isSameOrigin) {
+    return;
+  }
+
+  if (isNavigate) {
+    // Network-first for HTML pages: fresh content when online,
+    // fallback to cache when offline.
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          if (response && response.status === 200) {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+          }
+          return response;
+        })
+        .catch(() => caches.match(request))
+    );
+  } else {
+    // Cache-first for static assets (JS, CSS, SVG, fonts, etc.)
+    event.respondWith(
+      caches.match(request).then((cached) => {
+        if (cached) {
+          return cached;
+        }
+        return fetch(request).then((response) => {
+          if (!response || response.status !== 200 || response.type !== 'basic') {
+            return response;
+          }
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+          return response;
+        });
+      })
+    );
+  }
+});
@@ -36,8 +36,16 @@ const ruUrl = `https://randify.pro${getRelativeLocaleUrl("ru", pathWithoutLocale
        <link rel="alternate" hreflang="en" href={enUrl} />
        <link rel="alternate" hreflang="ru" href={ruUrl} />
        <meta name="verification" content="er9ndnv9ih7agmh8" />
+        <meta name="theme-color" content="#534AB7" />
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <title>{title}</title>
        <Analytics />
+        <script>
+            if ("serviceWorker" in navigator) {
+                navigator.serviceWorker.register("/sw.js");
+            }
+        </script>
    </head>
    <body class="bg-zinc-950 text-zinc-100 min-h-screen font-sans antialiased">
        <LanguageSwitcher />