Bowling Tracker PWA - Setup Guide

This is a Progressive Web App (PWA) for tracking bowling scores across multiple leagues.

Files You Need

1. index.html - Main app file
2. manifest.json - PWA configuration
3. service-worker.js - Offline functionality
4. icon-192.png - App icon (192x192 pixels)
5. icon-512.png - App icon (512x512 pixels)

Creating the Icons

You need to create two icon images. Here are your options:

Option 1: Use an Online Icon Generator

1. Go to https://favicon.io/favicon-generator/
2. Create a simple bowling icon (use the 🎳 emoji or text)
3. Download and extract the files
4. Rename two files to icon-192.png (192x192) and icon-512.png (512x512)

Option 2: Use a Simple Image Editor

1. Create a 512x512 pixel image with a bowling ball or pin design
2. Save it as icon-512.png
3. Resize it to 192x192 pixels and save as icon-192.png
4. Use a solid color background (blue #2563eb matches the app)

Option 3: Quick Emoji Icon

1. Go to https://www.websiteplanet.com/webtools/favicon-generator/
2. Upload a screenshot of the 🎳 emoji from your phone
3. Generate and download the icons

Deployment Instructions

Method 1: Netlify Drop (Easiest - 2 minutes)

1. Create your icon files (see above)
2. Put all 5 files in a folder on your computer
3. Go to https://app.netlify.com/drop
4. Drag and drop your folder onto the page
5. Done! You'll get a URL like https://your-app-name.netlify.app

Method 2: GitHub Pages (Free hosting)

1. Create a GitHub account at https://github.com
2. Create a new repository called bowling-tracker
3. Upload all 5 files to the repository
4. Go to Settings → Pages
5. Select "main" branch and click Save
6. Your app will be at https://yourusername.github.io/bowling-tracker

Method 3: Vercel (Alternative free hosting)

1. Create a Vercel account at https://vercel.com
2. Click "Add New Project"
3. Upload your folder or connect to GitHub
4. Deploy! You'll get a URL instantly

Sharing Your App

Once deployed, share the URL with others. They can:

On iPhone (iOS):

1. Open the URL in Safari
2. Tap the Share button
3. Scroll down and tap "Add to Home Screen"
4. Tap "Add"
5. The app icon will appear on their home screen!

On Android:

1. Open the URL in Chrome
2. Tap the three dots menu
3. Tap "Install app" or "Add to Home Screen"
4. Tap "Install"
5. The app will be installed like a native app!

Features

✅ Track multiple bowling leagues separately
✅ Record three-game series with automatic calculations
✅ View season statistics and averages (properly truncated)
✅ Backup and restore your data
✅ Bell sound when saving sessions
✅ Works offline after first visit
✅ Installable as a mobile app

Testing Locally

If you want to test before deploying:

1. Install Python (if not already installed)
2. Put all files in a folder
3. Open terminal/command prompt in that folder
4. Run: python -m http.server 8000
5. Open browser: http://localhost:8000

Troubleshooting

Install prompt doesn't show?

• Wait 3 seconds after loading the page
• Make sure you're using HTTPS (required for PWA)
• Try in Chrome or Safari (best PWA support)

App doesn't work offline?

• Make sure the service worker is registered (check browser console)
• Visit the app while online first to cache assets
• Check that all file paths are correct

Icons don't show?

• Make sure icon files are named exactly icon-192.png and icon-512.png
• Verify icons are in the same folder as index.html
• Clear your browser cache and reload

Data Storage

• All data is stored locally in the browser
• Use the Backup button regularly to save your data
• Keep backup files in a safe place (email, cloud storage)
• If you clear browser data, your scores will be lost (unless backed up)

Need Help?

Common issues:

• Blank page: Check browser console for errors
• Won't install: Must be served over HTTPS
• Data lost: Restore from your backup JSON file
• Icons missing: Verify icon file names and sizes

Next Steps

After deploying, you can:

1. Share the URL with your bowling league
2. Customize the colors in index.html (search for #2563eb)
3. Add more features as needed
4. Create a custom domain name

Enjoy tracking your bowling scores! 🎳