Installation Guide

Track Better is a Progressive Web App (PWA) that can be installed on your device for a native app-like experience. Once installed, it works offline, loads instantly, and appears on your home screen or application menu.

Browser Requirements

Track Better works best in modern browsers with PWA support:

Desktop

Browser	Support	Installation Method
Chrome	Full support	Install button in address bar
Edge	Full support	Install button in address bar
Brave	Full support	Install button in address bar
Firefox	Limited	Manual bookmark (no offline support)
Safari	Not supported	Use bookmark

Mobile

Platform	Browser	Support	Installation Method
iOS	Safari	Full support	Add to Home Screen
Android	Chrome	Full support	Install banner or menu option
Android	Firefox	Limited	Add to Home Screen

For the best experience with offline support and native app features, use Chrome on Android or Safari on iOS.

Installation Methods

Option 1: In-App Install Button

The easiest way to install Track Better is using the built-in install button:

Visit the App

Open Track Better in your browser (Chrome, Edge, or Brave on desktop)

Look for the Install Button

In the top-right corner of the header, you’ll see a download icon button with a cyan/blue accent color

Click Install

Tap the download button to trigger the installation prompt

Confirm Installation

Click “Install” in the browser’s native dialog

Launch the App

Track Better will open in a standalone window and appear in your applications

The install button only appears in browsers that support PWA installation. If you don’t see it, use one of the manual methods below.

Code Reference: The install button is implemented at src/App.jsx:224:

{showInstallButton && (
  <Button
    type="button"
    size="icon"
    variant="outline"
    className="rounded-full border-cyan-200 bg-cyan-50/90 text-cyan-700"
    onClick={handleInstall}
    aria-label="Install app"
  >
    <Download className="h-4 w-4" />
  </Button>
)}

Option 2: Chrome Desktop (Manual)

If the install button doesn’t appear:

Open the Menu

Click the three-dot menu icon in the top-right corner of Chrome

Select Save and Share

Hover over “Save and share” in the dropdown menu

Choose Install Track Better

Click “Install Track Better…” or “Create shortcut…”

Confirm

Check “Open as window” (if available) and click Install

Option 3: Chrome Address Bar (Desktop)

Look for the install icon in the address bar:

When you visit Track Better, Chrome may show a small install icon (⊕) in the address bar
Click the icon
Click “Install” in the popup dialog

Option 4: iOS Safari

For iPhone and iPad users:

Open Safari

Navigate to Track Better in Safari (not Chrome or other browsers)

Tap the Share Button

Tap the share icon at the bottom of the screen (box with arrow pointing up)

Scroll Down

Scroll down in the share sheet until you see “Add to Home Screen”

Add to Home Screen

Tap “Add to Home Screen”

Customize Name (Optional)

Edit the name if desired (default: “Track Better”)

Tap Add

Tap “Add” in the top-right corner

Track Better will now appear on your home screen with the app icon.

iOS uses the apple-touch-icon.png file for the home screen icon. This is a high-resolution 180x180 pixel image stored at /public/apple-touch-icon.png.

Option 5: Android Chrome

For Android devices:

Visit Track Better in Chrome
Chrome may automatically show an “Add to Home Screen” banner at the bottom
Tap “Add to Home Screen”
Confirm by tapping “Add”

Open Chrome Menu

Tap the three-dot menu icon in the top-right corner

Tap Add to Home Screen

Select “Add to Home screen” from the menu

Customize Name

Edit the name if desired (default: “Track Better”)

Tap Add

Tap “Add” to confirm

Method C: Install App Option

Some Android devices show an “Install app” option:

Tap the three-dot menu
Select “Install app” if available
Tap “Install” in the dialog

Android uses the PWA icons defined in manifest.webmanifest including 192x192 and 512x512 PNG files.

Verifying Installation

Desktop

After installation on desktop, Track Better should:

Open in a standalone window (no browser UI)
Appear in your applications menu (Windows: Start Menu, macOS: Applications folder)
Show the Track Better icon in the taskbar/dock
Display the correct theme color in the title bar

Mobile

After installation on mobile, Track Better should:

Appear as an app icon on your home screen
Open in fullscreen mode (no browser chrome)
Show the splash screen when launching
Work in the app switcher like native apps
Support the status bar theme color

Testing Offline Mode

Install the App

Complete installation using any method above

Use the App

Open Track Better and log some workout sets to ensure data saves

Enable Airplane Mode

Turn on airplane mode or disconnect from WiFi

Launch Track Better

Open the app from your home screen or application menu

Verify Functionality

Confirm the app loads instantly and all features work including videos and data

Track Better uses a Service Worker (defined in /public/sw.js) to cache all assets and enable offline functionality. After the first visit, everything runs locally.

Manifest Configuration

Track Better’s PWA configuration is defined in manifest.webmanifest:

{
  "name": "Track Better - Workout Tracker",
  "short_name": "Track Better",
  "description": "Track your daily workouts and build your fitness journey.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f8fafc",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/icon-light.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/icon-dark.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    }
  ]
}

Key Properties:

Property	Value	Purpose
`display`	`"standalone"`	Opens app in full window without browser UI
`theme_color`	`"#0f172a"`	Dark slate color for status bar and title bar
`background_color`	`"#f8fafc"`	Light background shown during loading
`start_url`	`"/"`	URL to open when launching the app

The theme color dynamically updates based on dark/light mode preference. Dark mode uses #020617 while light mode uses #0f172a.

App Icons

Track Better includes multiple icon formats for different platforms:

Icon Files

/public/
├── icon-light.svg          # SVG icon for light theme
├── icon-dark.svg           # SVG icon for dark theme
├── apple-touch-icon.png    # iOS home screen icon (180x180)
├── pwa-192x192.png         # Android small icon
├── pwa-512x512.png         # Android large icon
├── favicon-16x16.png       # Browser favicon (small)
└── favicon-32x32.png       # Browser favicon (large)

Icon Usage

Desktop browsers: Use favicon files for tabs and bookmarks
iOS devices: Use apple-touch-icon.png for home screen
Android devices: Use pwa-192x192.png and pwa-512x512.png
Dynamic favicon: Changes based on theme preference

Uninstalling Track Better

Desktop (Chrome/Edge/Brave)

Open Track Better

Launch the installed app

Open App Menu

Click the three-dot menu icon in the top-right corner of the app window

Uninstall

Select “Uninstall Track Better…” from the menu

Confirm

Click “Remove” or “Uninstall” in the confirmation dialog

Uninstalling the app will remove it from your system but may not delete your workout data from localStorage. Use the “Hard Reset” feature in Settings before uninstalling if you want to clear all data.

iOS (Safari)

Find the Track Better icon on your home screen
Long-press the icon until it jiggles
Tap the X or “Remove App” button
Select “Delete App” (not “Remove from Home Screen”)
Confirm deletion

Android (Chrome)

Find Track Better on your home screen or app drawer
Long-press the icon
Select “App info” or drag to the info icon
Tap “Uninstall”
Confirm removal

Troubleshooting

Install Button Doesn’t Appear

Possible causes:

Browser doesn’t support PWAs
App is already installed
Site is not served over HTTPS (required for PWAs)

Solutions:

Try a different browser (Chrome or Edge recommended)
Use manual installation method for your platform
Ensure you’re visiting the app via HTTPS

App Doesn’t Work Offline

Check these items:

Ensure Service Worker registered successfully
Open browser DevTools > Application > Service Workers
Verify worker status is “activated and running”
Check Cache Storage for cached assets

Force refresh:

Open Track Better in browser
Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Wait for Service Worker to update
Test offline functionality again

Data Not Persisting

Causes:

localStorage disabled in browser settings
Private/Incognito mode (data clears on close)
Browser clearing site data automatically

Solutions:

Enable localStorage in browser settings
Don’t use private browsing for Track Better
Export data regularly as backup

Dark Mode Not Working

Click the sun/moon icon in the top-right header
Check localStorage contains theme key
Verify document.documentElement.classList includes dark class
Clear browser cache and reload

Next Steps

Now that Track Better is installed:

Explore Features

Learn about all the features Track Better offers

Start Tracking

Begin your fitness journey today

Set up a daily reminder on your phone to open Track Better and log your workouts. Consistency is key to building a lasting habit!

Introduction

Quick Start

Installation Guide

Installation Guide

Browser Requirements

Desktop

Mobile

Installation Methods

Option 1: In-App Install Button

Option 2: Chrome Desktop (Manual)

Option 3: Chrome Address Bar (Desktop)

Option 4: iOS Safari

Option 5: Android Chrome

Method A: Install Banner

Method B: Chrome Menu

Method C: Install App Option

Verifying Installation

Desktop

Mobile

Testing Offline Mode

Manifest Configuration

App Icons

Icon Files

Icon Usage

Uninstalling Track Better

Desktop (Chrome/Edge/Brave)

iOS (Safari)

Android (Chrome)

Troubleshooting

Install Button Doesn’t Appear

App Doesn’t Work Offline

Data Not Persisting

Dark Mode Not Working

Next Steps

Explore Features

Start Tracking

Build docs developers (and LLMs) love

Introduction

Quick Start

​Installation Guide

​Browser Requirements

​Desktop

​Mobile

​Installation Methods

​Option 1: In-App Install Button

​Option 2: Chrome Desktop (Manual)

​Option 3: Chrome Address Bar (Desktop)

​Option 4: iOS Safari

​Option 5: Android Chrome

​Method A: Install Banner

​Method B: Chrome Menu

​Method C: Install App Option

​Verifying Installation

​Desktop

​Mobile

​Testing Offline Mode

​Manifest Configuration

​App Icons

​Icon Files

​Icon Usage

​Uninstalling Track Better

​Desktop (Chrome/Edge/Brave)

​iOS (Safari)

​Android (Chrome)

​Troubleshooting

​Install Button Doesn’t Appear

​App Doesn’t Work Offline

​Data Not Persisting

​Dark Mode Not Working

​Next Steps

Explore Features

Start Tracking

Build docs developers (and LLMs) love

Installation Guide

Browser Requirements

Desktop

Mobile

Installation Methods

Option 1: In-App Install Button

Option 2: Chrome Desktop (Manual)

Option 3: Chrome Address Bar (Desktop)

Option 4: iOS Safari

Option 5: Android Chrome

Method A: Install Banner

Method B: Chrome Menu

Method C: Install App Option

Verifying Installation

Desktop

Mobile

Testing Offline Mode

Manifest Configuration

App Icons

Icon Files

Icon Usage

Uninstalling Track Better

Desktop (Chrome/Edge/Brave)

iOS (Safari)

Android (Chrome)

Troubleshooting

Install Button Doesn’t Appear

App Doesn’t Work Offline

Data Not Persisting

Dark Mode Not Working

Next Steps