Progressive Web Apps

The Benefits of Offline First Approach for Web Apps

This article is based on Offline Web Applications course by Udacity which is delivered through the special program sponsored by Google Scholarship.

My primary goal with this blog post is to learn and deeply understand concepts explained in the course. And for me the best way to do it is by teaching others through these blog posts. So, if you want to learn more about building offline first web apps keep on reading.

Imagine the scenario like this:

You have a weak Wi-Fi or phone signal but still trying your luck to access the web. Instead of seeing a failed connection in your browser you’re left hanging. Waiting for it to load…

So when you got a poor Wi-Fi connection, or as Jake Archibald calls it – Lie-Fi, all you see is an empty white screen. Which is worse than no connection at all.

Because the worst thing we can do is to leave a user with nothing, waiting forever and wondering if this is the moment when content will appear on the screen and the wait will be finally over.

There are plenty of reasons for connection to go wrong. Like a weak signal, a fault in the mobile network, busy network, a server being DDoSed, etc.

With so many variables to go wrong, we can’t rely on a perfect connection for our web apps to work as we want.

Online first, regular apps work well with good connectivity or then offline using a cached version, but fail with a poor connection.

Whereas, offline first apps work well in all three instances. Actually, offline first is faster even if a user has good connectivity.

Let me explain.

Online first web apps first look to establish a connection, and if it entirely fails, then a user is served a cached version.

In contrast, the offline first app delivers cached content first and then looks to fetch updated content from the network. And of course cached content will always load faster.

For your web app to be qualified as progressive, it has to meet certain conditions and being offline first is one of them. You can easily test any website by opening Chrome Developer tools and going to Audits tab.

Chrome Developer tools Audits tab

There are some additional benefits from Google if your app is deemed as progressive.

For example, when visiting a progressive web app, a browser will ask if a user would like to install a site as an app. “Installing” just means placing an app icon on the device’s home screen.

Another handy feature – sending notifications to the user. Maybe with an announcement or when a new article is published. It’s likely over time more app-like features will become available to progressive web apps as well.

In the end offline first delivers a much better user experience and that’s why it should be the standard for building web apps.

Leave a Reply

Your email address will not be published. Required fields are marked *