Tap Counter

A simple Progressive Web App (PWA) with a blue background that responds to user taps by flashing green and incrementing a counter. Works offline after installation.

Features

• Installable PWA — Add to home screen on iOS and Android
• Offline Support — Works without internet connectivity after first load
• Tap Counter — Counts and displays the number of taps with green flash feedback
• Optimized for Mobile — iOS Safari toolbar matches the blue background theme
• Responsive Icons — Multiple icon sizes for different devices

Installation

On iOS

1. Open this website in Safari
2. Tap the Share button
3. Tap "Add to Home Screen"
4. Confirm the name and tap "Add"

On Android

1. Open this website in Chrome
2. Tap the menu button (⋮)
3. Tap "Install app"
4. Confirm installation

How to Use

1. Open the app (or visit the website)
2. Tap anywhere on the screen
3. The screen flashes green and the counter increments
4. Turn off internet connectivity to verify offline functionality

Project Structure

├── index.html           # Main HTML file with tap counter logic
├── service-worker.js    # Service worker for offline caching
├── manifest.json        # PWA manifest with app metadata
├── favicon.ico          # Favicon
└── images/              # Icon assets in various sizes
    ├── tap-icon-128.png
    ├── tap-icon-192.png
    ├── tap-icon-256.png
    └── tap-icon-512.png

Technical Details

• Service Worker — Caches all assets on first visit for offline support
• Web App Manifest — Defines app name, display mode, theme colors, and icons
• Meta Tags — iOS-specific configuration for home screen appearance
• Touch Events — Optimized touch handling for mobile browsers

Browser Support

• iOS Safari 11+
• Chrome/Android 39+
• Firefox 50+
• Edge 17+

Development

To modify or extend this project, edit the relevant files and test in your target browser. The service worker will need to be cleared for changes to take effect on already-installed apps.