Skip to main content
Track Better is a Progressive Web App (PWA) that works offline, installs to your home screen, and provides a native app-like experience.

​
Installing as a PWA

When you first visit Track Better in a supported browser, you’ll see a download icon in the top-right corner of the app. Install button

​
Installation Steps

1

Click the Download Icon

Tap the download button with the cyan highlight in the header
2

Confirm Installation

Your browser will show a native install prompt. Click “Install” or “Add to Home Screen”
3

Launch the App

Track Better will open as a standalone app without browser UI

​
Supported Browsers

Chrome

Full PWA support on Android, Windows, Mac, and Linux

Edge

Full PWA support on Windows and Mac

Safari

iOS/iPadOS: Manual “Add to Home Screen” required

Firefox

Limited PWA support on desktop
On iOS Safari, you need to manually add Track Better to your home screen using the Share menu → “Add to Home Screen”.

​
How PWA Installation Works

Track Better listens for the browser’s beforeinstallprompt event and shows a custom install button.

​
Install Prompt Handling

App.jsx:86-104
// PWA Install Prompt
useEffect(() => {
  // Register service worker
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js").catch((err) => console.error("SW registration failed:", err));
  }

  // Listen for install prompt
  const handleBeforeInstallPrompt = (e) => {
    e.preventDefault();
    setDeferredPrompt(e);
    setShowInstallButton(true);
  };

  window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);

  return () => {
    window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
  };
}, []);
This code:
  1. Registers the service worker (sw.js) for offline caching
  2. Captures the install prompt by preventing the default browser behavior
  3. Shows a custom install button when the app is installable

​
Install Button Click Handler

App.jsx:172-181
const handleInstall = async () => {
  if (!deferredPrompt) return;

  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  if (outcome === "accepted") {
    setDeferredPrompt(null);
    setShowInstallButton(false);
  }
};
When clicked, the install button:
  1. Shows the browser’s native install prompt
  2. Waits for the user’s decision
  3. Hides the button if installation is accepted

​
Install Button UI

App.jsx:224-236
{showInstallButton && (
  <Button
    type="button"
    size="icon"
    variant="outline"
    className="rounded-full border-cyan-200 bg-cyan-50/90 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300 dark:hover:bg-cyan-900/50"
    onClick={handleInstall}
    aria-label="Install app"
    title="Install app"
  >
    <Download className="h-4 w-4" />
  </Button>
)}
The button only appears when the app is installable and hasn’t been installed yet.

​
Service Worker & Offline Support

Track Better uses a service worker to enable offline functionality and fast loading.

​
Service Worker Registration

The service worker (sw.js) is registered on app load:
App.jsx:88-90
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js").catch((err) => console.error("SW registration failed:", err));
}

​
Cache Strategy

sw.js:1-53
const CACHE_NAME = "workout-dsa-pwa-v2";

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll([
        "/",
        "/index.html",
        "/manifest.webmanifest",
        "/pwa-192x192.png",
        "/pwa-512x512.png",
        "/apple-touch-icon.png",
        "/favicon-32x32.png",
        "/favicon-16x16.png",
      ]);
    })
  );
  self.skipWaiting();
});
The service worker:
  1. Pre-caches critical assets during installation
  2. Uses cache-first strategy for offline support
  3. Updates the cache with fresh content when online

​
Fetch Strategy

sw.js:30-53
self.addEventListener("fetch", (event) => {
  const { request } = event;

  if (request.method !== "GET") {
    return;
  }

  event.respondWith(
    caches.match(request).then((cachedResponse) => {
      const networkFetch = fetch(request)
        .then((networkResponse) => {
          if (networkResponse.status === 200 && request.url.startsWith(self.location.origin)) {
            const clonedResponse = networkResponse.clone();
            caches.open(CACHE_NAME).then((cache) => cache.put(request, clonedResponse));
          }

          return networkResponse;
        })
        .catch(() => cachedResponse);

      return cachedResponse || networkFetch;
    })
  );
});
This implements a cache-first, network-fallback strategy:
  • Returns cached content immediately if available
  • Fetches from network in the background and updates the cache
  • Falls back to cache if network fails (offline mode)
Track Better works completely offline after the first visit. All your workout data is stored locally in localStorage.

​
Offline Capabilities

When installed as a PWA, Track Better provides full offline functionality:
All workout logs, DSA problem tracking, and user preferences are stored in localStorage. No internet connection required.
Exercise demonstration videos require an internet connection. Download the app assets to cache them for offline viewing.
Track Better doesn’t have cloud sync. Use the Export Data feature in Settings to backup your progress and import it on other devices.
When online, the service worker automatically checks for app updates and downloads new versions in the background.

​
Browser Notifications

Track Better does not currently implement browser push notifications. All notification features would require server-side push notification support.
If you want to add reminder notifications in the future, you’ll need to:
  1. Request notification permissions
  2. Set up a push notification server
  3. Subscribe users to push notifications
  4. Send scheduled reminders from the server

​
PWA Manifest

Track Better’s PWA configuration is defined in manifest.webmanifest:
manifest.webmanifest
{
  "name": "Track Better - Workout & DSA Tracker",
  "short_name": "Track Better",
  "description": "Track your daily workouts and DSA problems",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0891b2",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Key properties:
  • display: standalone: Opens without browser UI
  • theme_color: Sets the app’s theme color
  • icons: Provides home screen and splash screen icons

​
Benefits of Installing

Offline Access

Use Track Better without an internet connection

Faster Loading

Instant loading from cached assets

Home Screen Icon

Launch directly from your home screen

Native Feel

Full-screen experience without browser UI

​
Troubleshooting

The install button only shows if:
  • You’re using a PWA-compatible browser (Chrome, Edge, Safari)
  • The app hasn’t been installed yet
  • The site is served over HTTPS (or localhost)
Try visiting the site in Chrome or Edge on desktop/Android.
Make sure the service worker is registered. Check the browser console for errors. Visit the site while online first to cache the assets.
  • Chrome/Edge: Right-click the app icon → “Uninstall” or go to browser settings → Apps
  • iOS: Long-press the home screen icon → “Remove App”
  • Android: Long-press the app icon → “Uninstall”

Data Export

Export your data for backup and sync

Theme Toggle

Customize your app appearance

Build docs developers (and LLMs) love

Get started for freeTalk to us