• 🚀 Install it on any modern smartphone (Android, iOS via “Add to Home Screen,” even desktop browsers)
• 🕹️ Access device sensors (accelerometer, gyroscope) right from JavaScript
• 🎥 Stream your camera and record both video and audio for playback
• 🌐 Go offline instantly thanks to a simple Service Worker cache

Whether you’re debugging hardware integrations, prototyping a new sensor‑driven feature, or simply demoing media capabilities, Sensor Test gives you everything you need to test—in under 300 KB.

Why Sensor Test?

1. Zero Install Friction
   No App Store approvals or downloads. Users simply navigate to your GitHub Pages URL over HTTPS and tap the custom “Install App” button to invoke the browser’s install prompt.
2. Cross‑Platform Reach
   • Android (Chrome, Edge, Firefox): full support for the Generic Sensor API, MediaRecorder, and install prompts.
   • iOS (Safari): “Add to Home Screen” for a standalone experience; graceful fallbacks to devicemotion/deviceorientation.
   • Desktop: install as PWA, test camera/microphone scenarios, and offline behavior.
3. All‑In‑One Demo
   • Sensors: tap “Enable” to see live X/Y/Z accelerometer and gyro readings (or graceful fallbacks).
   • Media: start your camera with a click, record a short video, or capture audio—all handled via the Web Media APIs.
   • Offline: service worker caches your core assets, so you can reload even with no network.

Quickstart: Fork, Clone & Install

1. Fork the repo to your own GitHub account:
   https://github.dev/CptNope/sensor-test-pwa
   Click Fork (top‑right) and choose your account.
2. Clone your fork locally:

   git clone https://github.com/CptNope/sensor-test-pwa.git
   cd sensor-test-pwa

   Drop your own icons into icons/ (192×192 and 512×512 PNGs), and tweak manifest.json as desired.

3. Push and Deploy to GitHub Pages:

   git add .
   git commit -m "Customize Sensor Test PWA"
   git push origin main

   Then in your repo’s Settings → Pages, set Source to main at root. Your live URL will be:
   https://<YourUserName>.github.io/sensor-test-pwa/

   Here is an example linking to the Github page I  have setup for my repository:
   https://CptNope.github.io/sensor-test-pwa/

4. Install on Device:
   • Android: open Chrome, navigate to your Pages URL, then tap Install App or use the menu → “Install app.”
   • iOS: open Safari, tap Share → Add to Home Screen.

Real‑World Uses

• Hardware Prototyping
• QA & Device Labs
• Workshops & Demos
• Offline‑First Concepts

Peeling Back the Layers

• Sensor Logic: Uses the Generic Sensor API (Accelerometer, Gyroscope) with fallbacks to devicemotion/deviceorientation.
• MediaRecorder: Captures WebM video/audio via navigator.mediaDevices.getUserMedia() and MediaRecorder.
• PWA Install Prompt: Listens for beforeinstallprompt, then calls e.prompt() on the custom button click.

(See full code examples in the repo.)

Next Steps

1. Add more sensors—magnetometer, ambient light, geolocation.
2. Customize the UI with your favorite CSS framework.
3. Enhance caching with Workbox for dynamic content or background sync.
4. Integrate analytics to track installs and usage patterns.

References

• GitHub Repository
• Live Demo