How PWA Offline Support Works: Service Workers, Cache API, and Files to Cache

Conclusion: PWA offline support works by saving required files in advance

To make a PWA work offline, you usually use a Service Worker.

In simple terms, the browser saves files such as HTML, CSS, JavaScript, and images in advance. Then, when there is no network connection, the app can display the page using those saved files.

So PWA offline support is not magic. It works because the files needed to run the app have already been cached.

What you need for offline support

When you add offline support to a PWA, there are three main things to think about.

• Service Worker
• Cache API
• A list of files to cache

A Service Worker works like a background layer between the page and the network.

When the page tries to load a file, the Service Worker can decide whether to fetch it from the network or return a saved version from the cache.

What does a Service Worker actually do?

A Service Worker is different from regular JavaScript.

It is not mainly used to move buttons or update UI elements on the page. It is used to manage network requests, caching, and offline behavior.

For example, if you cache the required files the first time a user opens the site, the page can still appear later even when the network is unstable.

This is one of the parts that makes a PWA feel more like an app.

What I noticed when building one

When I built OJ-Pass, offline support was one of the things I cared about most.

OJ-Pass is a tool that regenerates a password from a master key, service name, and creation month.

For this kind of tool, offline support makes a lot of sense.

Instead of sending something to a server every time, it feels much safer when everything runs inside the browser and can still work without a connection.

So I cached the required files, such as index.html, CSS, JavaScript, and icons, through a Service Worker.

If you cache the wrong files, offline mode will fail

A common mistake with offline support is forgetting to cache a file that the page actually needs.

If you only cache the HTML, the page may appear, but the design can break without CSS.

If the JavaScript file is not cached, buttons, calculations, or app logic may stop working.

If your page uses icons or images, those may also need to be included in the cache depending on how important they are.

In other words, offline support forces you to check every file required for the page to actually work.

You should not cache everything

That said, caching everything is not always the right answer.

If you strongly cache pages with frequently changing data, users may keep seeing old information.

News pages, stock information, logged-in user data, and pages that depend on fresh server responses need more careful cache handling.

On the other hand, calculators, simple tools, checklists, manuals, and fixed UI pages are usually a much better fit for offline support.

What kind of apps are good for PWA offline support?

• Calculators
• Password generation tools
• Memo-style tools
• Checklists
• Manuals and documentation
• Web apps with mostly fixed content

These types of apps can often keep working with the same files for a while after the first load.

That is why a tool like OJ-Pass, which does not save data, does not send data, and runs inside the browser, feels like a strong match for PWA offline support.

Offline support is not perfect

Even if you add offline support to a PWA, not every feature will work without a connection.

Login, payment, server requests, external APIs, and real-time data usually still need the network.

So before implementing offline support, it is important to decide how far offline mode should go.

Do you only want the top page to appear? Or do you want the tool itself to fully work offline? The answer changes the design.

Things to check

• Is the Service Worker registered?
• Are the required HTML, CSS, and JavaScript files cached?
• Are images and icons cached when needed?
• Can the app actually open after turning off the network?
• Does old cache remain too strongly after updates?

That last point is especially important.

When building a PWA, you may first feel happy that offline support works. Then the next problem appears: updates do not show up because the old cache is still being used.

This is where the convenience and difficulty of PWA development come as a pair.

Related articles

If you want to start from the basics, read What Is a PWA? A Simple Explanation of How Websites Become App-Like on Smartphones.

If you want to see the actual setup flow first, How to Build a PWA: manifest.json, Service Worker, and Home Screen Support is also useful.

If you want to understand caching more deeply, Understanding PWA Cache Strategies is closely related.

Summary

To make a PWA work offline, you need to use a Service Worker to cache the files required by the app.

The important part is separating what should be saved locally from what should still be fetched from the network.

When offline support is designed well, a web page can start to feel much closer to a native app.

Especially for lightweight tools that can work without communication, PWA offline support can become a very powerful feature.