Your PWA can't wake the phone: alarms and notifications for plain HTML, without Android Studio

#pwa #webdev #javascript #android

Short answer: a PWA cannot ring an exact alarm on a phone. There is no Web API that lets a web page — installed or not — fire at 10:33 sharp with the screen off. Web push exists, but it needs a server pushing at the right moment; it can't schedule locally. If an AI chat wrote you a timer, tracker or reminder as an HTML file and you want it to actually ring, you have three real options: wrap it with Capacitor (needs Android Studio/Xcode), rebuild it native, or drop it into a runner app that already owns the native alarms. Here is the honest breakdown.

Why doesn't my PWA alarm work when the screen is off?

Because every mechanism a web page could use for timing dies with the page:

setTimeout / setInterval freeze when the tab is backgrounded or the screen locks. Mobile browsers throttle and then suspend them.
The Notifications API can show a notification — but only while the page or its service worker is awake. Nothing wakes it at a scheduled time.
The one spec designed exactly for this — the Notification Triggers API — was abandoned after an origin trial in Chrome. It never shipped.
Service workers are killed within minutes of going idle. They wake for a push from a server, not for a local schedule.
On iOS, web push requires the PWA to be added to the home screen (iOS 16.4+), and background delivery is best-effort, not exact.

So the classic tutorial alarm clock — an <input type="time">, a loop checking new Date(), an <audio> tag — works only while the tab is open and the screen is on. Tutorials rarely mention that part.

Doesn't web push solve notifications?

Only if you run a server. Real web push is: HTTPS site + service worker + VAPID keys + a push service + a backend that stores subscriptions and sends the push at the right moment. That's fine for a product. It's absurd for a 40-line HTML timer a chat wrote you in ten seconds. And even then it gives you push — a server-initiated message — not an exact local alarm.

What actually works for an HTML file

	Exact alarms	Works offline	Needs a server	Needs Android Studio / Xcode	Effort
PWA	❌	✅	for push, yes	❌	low
Capacitor wrap	✅ (plugin)	✅	❌	✅	medium
Native rewrite	✅	✅	❌	✅	high
HTML runner app (e.g. Kapsula)	✅	✅	❌	❌	~1 minute

Capacitor is the right tool if you're building a real product: it wraps your web code into a native project with full plugin access. The cost is the whole native toolchain — Android Studio, Gradle, signing, and per-app builds.

A runner app is the shortcut for personal tools. Full disclosure: I built one — Kapsula — a small (~3 MB) Android/iOS app, after my own AI-written workday timer silently failed to ring. You paste HTML (or add a file), it runs sandboxed and gets native powers through a tiny bridge:

// inside your plain HTML file, running in Kapsula
await kapsula.notify.schedule({
  id: 1,
  at: Date.now() + 45 * 60 * 1000,   // in 45 minutes
  title: "Stand up",
  body: "45 min done — switch position",
  sound: true
});

That schedules a real OS alarm (AlarmManager with exact timing on Android, local notifications on iOS) — it fires to the second with the app closed and the screen off. The bridge also gives local storage that survives restarts, sound, and vibration. No account, no cloud, no build step: the free tier runs your own project alongside the demo, which is enough for a timer or a reminder board. And the same file still works in a desktop browser — the bridge just no-ops there.

Honest limits, so you can pick correctly: Kapsula runs self-contained HTML (one file — inline CSS/JS, or a URL to such a file). It is not a website-to-app converter: pages that need their own backend, cookies or cross-origin fetches won't work in the sandbox. For that, use Capacitor.

How do I share it with a friend?

Send them the HTML file (or the link). They install the same runner, drop the file in, and have the same app with the same working alarms — no store publishing, no signing, no rebuild. Your code stays yours.

The takeaway

PWA: great for offline content and installable UIs. No exact alarms, and push means running a server.
Capacitor/native: full power, full toolchain.
Runner (Kapsula): the one-minute path for AI-generated personal tools that must actually ring.

If an assistant told you "just make it a PWA" and your alarm never fired — that's why. Docs for the bridge live at kapsula.app/docs, and the app is free on Google Play and the App Store.

DEV Community