Persistent Storage API: Building for the offline web

One of my favourite features of service workers is that they give you the ability to build web apps that work completely offline. Using service workers, you can write code that will cache any resources that a user might require, so that they can be retrieved at a later stage, even if the user has little or no network connection.

When storage space on a device is running low, the browser will automatically clear storage to make more space available. On the other hand, if a user decides to clear their browser cache, their cached Progressive Web App data will be cleared too. While this ensures that your users device will always run smoothly, it can make building a truly offline experience for the web a little tougher.

But what if you want to build a Progressive Web App that works offline and will stay offline regardless of whether the user clears their cache or not? This is where the Persistent Storage API comes in.

The Persistent Storage API ensures that your cached data won’t be cleared if the browser comes under pressure. If you’d like to make cache storage more persistent, you can ask for it explicitly using a bit of code in your web page. Let’s take a look at the example below.

By including the JavaScript code above in your web page, you can check if the current browser supports the Persistent Storage API. If it does, you can then request permission which will be granted under certain circumstances. The best thing about the code above is that if the browser doesn’t support the Persistent Storage API, it will simply fall back and your users will be none the wiser.

We’re almost there, but there are a few criteria that need to be met before you'll be granted permission.

• The site is bookmarked (and the user has 5 or less bookmarks)
• The site has high site engagement
• The site has been added to home screen
• The site has push notifications enabled

Your web app will need to meet at least one of the above criteria. The reason for this is to ensure that users can rely on their favorite web apps and not find they have suddenly been cleared unexpectedly.

I actually use this technique on a PWA I built called Progressive Beer. It's a PWA that allows users to easily search through different beer styles and learn about the many beers out there today. Because the details of the beers don't change that often, I can cache it on the users device knowing that it will be stored safely and that they can access it on the go and whenever they need the information.

But what about browser support? At the time of writing this article, the Persistent Storage API is currently only supported in Firefox, Chrome, Opera, but fingers crossed this will roll out to more browsers soon.

If you’d like to learn more about the Persistent Storage API, I recommend reading the following article on the Google Developers blog. If you prefer to see this API in action, I recommend heading over to Progressive Beer to experiment further!