Built a Simple Box Breathing PWA to Help You Relax

#pwa #cloudflarechallenge #webdev

In today's fast-paced world, taking a moment to just breathe can make a huge difference. I wanted a simple, frictionless way to practice breathing exercises without downloading heavy apps or dealing with ads. So, I built one!

Meet Box Breathing, a lightweight Progressive Web App (PWA) designed to help you focus and de-stress.

👉 Live Demo: Box breathing

✨ What Problem Does It Solve?

Sometimes you just need 2 minutes to reset. Native apps often come with sign-ups, paywalls, or slow load times. This web app is instant, works offline, and gets straight to the point.

It guides you through a rhythmic breathing cycle:

Inhale: The circle contracts.
Exhale: The circle expands.

🛠️ Key Features

I kept the feature set focused on the core experience:

Customizable Duration: Choose presets like 8s, 10s, 12s, or set your own custom loop (4s-60s).
Visual & Audio Cues: A smooth visual animation accompanied by a gentle beep (Web Audio API) to keep you on rhythm without looking at the screen.
Haptic Feedback: Uses the Vibration API (on supported Android devices) for a tactile experience.
Always On: Implements the Screen Wake Lock API so your phone doesn't sleep in the middle of a session.
PWA Support: Installable on your home screen and fully functional offline via Service Workers.

💻 Tech Stack: Back to Basics

I decided to skip the heavy frameworks (no React, no Vue) to keep the bundle size tiny and the performance buttery smooth.

Core: Semantic HTML5 & Vanilla JavaScript.
Styling: Pure CSS3 for the layout and the 60fps animations.
PWA: A hand-written service-worker.js for caching strategy.

Snippet: The Wake Lock

One of the coolest web APIs I used was the Screen Wake Lock API to prevent the display from turning off.

let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};