Many of your have probably noticed all the buzz about offline first
Web-apps. The Web is full of articles about the AppCache
about Service Workers
and such and now you ask yourself, how do I can get my apps work offline, like the cool kids
. Or you simply asked, how come that data I already have on my device isn't shown to me anymore?!

Well, there are a bunch of technologies to help you with this, but this seems a rather fast paced topic these days. So first things first.

If you write a single page application, you often have different types of request your app sends. Some get images, some get styles, some code and some actual user data
.

Caching User Data

For the last point, the user data
, you will basically store the whole stuff somewhere on the client. Since this depends mostly on your business logic, it is advisable to write at least part of that logic yourself.

You can use localStorage
for this if a key-value-store is enough or, indexed DB
if you need a more sophisticated datastore. There are even libraries that help with the usage of these low-level Web-APIs. Like PouchDB
and LocalForage
.

Caching Assets

But this post is about your assets. Your HTML, CSS, JS and Images.

If you bundle your assets with Webpack, there is a really easy way: The offline-plugin
.

After building with this plugin, you can call a function, that will make all Webpack generated assets available offline.

But you don't have to activate the caching automatically on application start. This can lead to unexpected behaviour if you're not used to offline modes.

For example, you could upload another version of a file and give it the same name, so it won't change on the client.

Or you have an API call in externals
and now only the cached results are shown.

This can greatly help with debugging.

Conclusion

The offline-plugin
is a really easy way to show already downloaded data to your users, even if they aren't online. These days, where more and more people are online via mobile devices, this offline scenario becomes less and less of an exeption.