#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.

In this fifth note for Clock App Lab #001, I want to move from the visual prototype toward the basic PWA structure.

So far, the project has mainly focused on the clock itself. I designed the retro desk clock shape, tested light mode and dark mode, changed the display into a two-panel structure, added a short top-to-bottom flip animation, and experimented with ambient light detection.

Those details are important because they define how the clock feels. But if this project is going to become a small PWA, the next step is not only visual design. It needs the basic files that allow the browser to treat it more like an app.

For this first version, the PWA structure should stay simple.

The minimum structure is:

index.htmlmanifest. jsonservice-worker.jsapp icons

That is enough for a small clock app.

The index.html file is the main screen. It contains the clock UI, the style, and the script that controls the time display, mode switching, and small interactions. In the early prototype, everything can stay inside one file. That is easier for testing. But for a PWA version, it becomes cleaner to separate the app into files.

The manifest.json file gives the browser information about the app. It includes the app name, short name, start URL, display mode, theme color, background color, and icons. This is the file that helps the app look more like something that can be added to the home screen.

The service worker is used to cache files. For this clock, the goal is simple: open quickly and keep working even if the network is not available. Since a clock does not need a large server connection, it is a good fit for a small offline-first experiment.

Before adding the full PWA structure to the final clock, I want to test a very small reference implementation. The goal is not to build a complicated system. The goal is to check the basic flow: register a service worker, load a manifest file, and prepare the files needed for installation.

This is an important step because a web page and a PWA feel different.

A web page is something the user visits.A PWA is something the user can keep.

That difference matters for a clock.

If a user opens the clock only as a web page, it feels temporary. It is just another tab. But if the user adds it to the home screen, it starts to feel more like a small tool. The icon is visible. The app can be launched directly. It can open without the browser address bar. It becomes closer to a real clock app.

That is why the file structure matters.

The visual design alone is not enough. A good PWA needs to feel stable when it launches. It should not look like a random page. It should open quickly, keep the same mode if the user selected dark mode, and avoid unnecessary loading.

For Clock App Lab #001, I want the PWA to behave like a small desk object. The user should be able to open it, place the phone on a desk, and leave it there. The app does not need many buttons. It does not need account login. It does not need navigation. It only needs to show the time clearly and remember small preferences.

This is why the first PWA file structure should be minimal.

I do not want to add too many files too early. A small clock app can become messy if the structure becomes larger than the product itself. At this stage, the file structure should support the clock, not distract from it.

The first version could use this simple structure:

index.html for the app screenmanifest.json for install informationservice-worker.js for offline cacheicons/icon-192.pngicons/icon-512.png

Later, if the project grows, the CSS and JavaScript can be separated into their own files. But for the first PWA test, keeping the structure small makes it easier to understand.

The manifest file is especially important for the home screen experience. The app name should be short enough to look clean under the icon. The icon should be readable even at a small size. Since this is a clock app, the icon should probably use the red retro clock body or a simple clock face.

I also want the theme color to match the app. If the clock uses a warm cream and red body, the PWA theme color should not feel unrelated. Small details like this make the app feel more complete.

The service worker should also be simple. For this clock, it only needs to cache the main files. There is no need for a complicated update system at the beginning. The main purpose is to make sure the clock can load again even when the device is offline.

This is also a good topic for a development blog because many PWA tutorials quickly become too large. They explain many options at once. But for a small project like this, I want to show only what is needed to make a basic installable app.

That makes the article more practical.

The idea is not to explain every possible PWA feature. The idea is to show how a small clock prototype starts becoming an actual app.

There is another reason this step is useful: it forces the project to become more concrete.

A visual prototype can stay loose. It can be adjusted freely. But once the app has a manifest, icons, and a service worker, it starts to feel more like something that can be tested on a phone. That means the next questions become more realistic.

Does the icon look good on the home screen? Does the app open in the right size? Does the layout work in portrait mode? Does it feel useful in landscape mode? Does dark mode remain after reopening? Does the app still load without a network connection?

These questions are different from normal design questions. They are closer to product testing.

That is why this step matters.

Clock App Lab #001 started as a simple retro clock idea, but the PWA structure changes the direction. It is no longer only about what the clock looks like in a browser. It becomes about how the clock behaves as a small app that someone might actually keep on their phone.

The goal is still modest. This is not a large application. It is only a clock. But that is exactly why it is a good PWA test. A clock is small enough to build, but it still needs real app behavior: launch, display, remember settings, and work reliably.

For now, the PWA file structure is the bridge between the visual prototype and the real mobile test.

After this, the next step will be testing how the clock behaves when added to the home screen on Android and iPhone. That will probably reveal new problems: screen size, safe areas, address bar behavior, orientation, and whether the app really feels like a standalone tool.

But before that, the project needs a clean base.

index.htmlmanifest.jsonservice-worker.jsicons

That is the foundation for turning Clock App Lab #001 from a web page into a small installable clock app.