top of page

Clock App Lab
PWA development notes for
retro clocks, timers, and alarm apps.

PWA development notes for
retro clocks, timers, and alarm apps.
Clock App Lab















All Posts


#Product 01-09 Designing a Small Home Screen Icon for the Clock PWA
For Clock App Lab #001, the home screen icon is not just a small image. It is the first part of the app the user sees before launching it. A clock PWA needs an icon that is simple, readable, and recognizable at small sizes. In this note, I focus on designing a clean icon for Android and iPhone, using the retro clock shape, a simple Z mark, and the short app name “Clock Lab.” In this ninth note for Clock App Lab #001, I want to focus on the home screen icon. After working on t
May 256 min read


#Product 01-08 Adjusting the Mobile Layout — Portrait and Landscape Views
For Clock App Lab #001, I need to adjust the layout for real smartphone use as a PWA. Even if the clock looks good on a desktop browser, it may not fit well on a phone. The height can feel too tight, or the landscape view may not feel enough like a real desk clock. In this note, I focus on 100vh vs 100dvh, switching layouts between portrait and landscape, and keeping the clock UI visible without unnecessary scrolling. In this eighth note for Clock App Lab #001, I want to orga
May 255 min read


#Product 01-07 Testing the Retro Clock PWA on Android and iPhone
For Clock App Lab #001, the final step in this first round is testing the clock on real phones. A PWA can look good in a desktop browser, but the real question is whether it feels useful on Android and iPhone. This note focuses on portrait mode, landscape mode, home screen launch behavior, saved light/dark mode, and whether the clock feels like a small desk object rather than a normal web page.
May 256 min read


#Product 01-06 Adding the Clock PWA to the Home Screen on Android and iPhone
For Clock App Lab #001, the next step is testing how the retro desk clock behaves when it is added to a phone’s home screen. A clock PWA should not feel like a normal web page. It should launch quickly, open in a clean standalone view, remember the selected mode, and feel like a small tool that can stay on the desk. This note focuses on the home screen installation flow for Android and iPhone.
May 246 min read


#Product 01-05 Preparing the PWA File Structure: Manifest, Icons, and Service Worker
For Clock App Lab #001, the next step is moving from a visual clock prototype to a small installable PWA. This means preparing the basic file structure: index.html, manifest.json, app icons, and a service worker. The clock should not just look like an app in the browser. It should also be able to launch from the home screen, remember its mode, and work as a small standalone tool.
May 245 min read


#Product 01-04 Testing Ambient Light Detection for an Automatic Backlight Mode
For Clock App Lab #001, I wanted to test whether the clock could react to the brightness around the device. The idea is simple: when the room is bright, the clock stays in light mode; when the room becomes dark, the display changes into a warm backlight mode. This is only an experiment for now, but it helps explore how a small PWA clock could feel more like a real object on a desk. In this fourth note for Clock App Lab #001, I want to write about ambient light detection. Afte
May 245 min read


#Product 01-03 From Page Flip to Clock Flip: Making the Numbers Flip from Top to Bottom
For Clock App Lab #001, I wanted the time display to feel more like a real object, not just text changing on a screen. At first, I tried making each digit flip separately, but the result looked too mechanical and unnatural. In this version, I changed the display into two larger panels: one for the hour and one for the minutes. I also shortened the flip animation so the movement feels more like a quick physical motion.
May 185 min read


#Product 01-02 Switching Light Mode and Dark Mode with Two Small Dots
For Clock App Lab #001, I decided to switch between light mode and dark mode using two small dots placed under the time display, rather than using a large toggle switch. The left dot is for light mode, and the right dot is for dark mode. By removing labels and long explanations from the clock itself, the UI stays quiet, simple, and closer to the feeling of a real desk clock.
May 184 min read


#Product 01-01 Retro Desk Clock PWA — The First Clock App Lab Prototype
Clock App Lab’s first prototype is a small retro-style desk clock built as a PWA experiment.
The goal is simple: create a clock that feels warm, useful, and easy to keep on a desk or phone screen. This first version focuses on a two-panel flip-clock design, light and dark modes, a minimal two-dot toggle, and a layout that can later grow into a mobile-friendly installable web app.
May 184 min read
bottom of page