For Jeremy Keith, one of the most important online experiences is actually the offline experience. In his recent book, Going Offline, he writes about using service workers to enable progressive web apps that create ideal offline experiences, no matter what a user’s connection is like.

On the latest episode of our podcast, Decoded, Keith explains why developers should create progressive web apps and the challenges holding back their adoption.

Understanding Progressive Web Apps

According to Keith, a progressive web app is a website that has three components:

  • It runs on HTTPS instead of HTTP;
  • It has a JSON web app manifest file;
  • And it has a service worker.

Thanks to the service worker script, progressive web apps can boost performance and increase reliability by pre-caching content. Keith explained:

“Once the user visits your site, the service worker script gets installed onto their device. The next time they visit your site or as they browse around on this visit, every time they make a request for something, before that request goes out to the server, it hits the service worker script first. Instead of going all the way to the server, the service worker script will tell the browser to look in the cache. You basically give it instructions on how to behave.”

A website designed as a progressive web app can use the service worker script in a number of ways. If the content is static text that rarely changes, like a book or an instruction manual, the service worker script might tell the browser to always look in the cache instead of pinging the server, even if there is an internet connection.

However, if the website requires fresh content, such as a news publication, the service worker script can cache things like CSS, images, and icons while directing the browser to go out to the network for the content.

Bringing the Internet Offline

For Keith, the primary benefit of a progressive web app is what it delivers in terms of the user experience.

“I like to talk about it in the sense of, if you're on a flaky network connection or if you're completely offline, this website will still work.”

Because this resiliency is seen as a nice-to-have feature, progressive web apps haven’t seen the level of adoption Keith believes they should. He said:

“In web development in general, I think we are biased towards what's visible. We're biased towards the pixels on the screen. We're biased towards the user interface. But we tend to be pretty bad at things that are invisible, and that can include some pretty important stuff like accessibility, security, and privacy. All of these things are invisible, and they don't get prioritized."
“But the truth is, most people do experience some very spotty internet connections in their everyday life. When you're sitting at work and you've got a nice wired connection, you're fine. But on the commute into work or going home, you might be on public transport and it goes through a tunnel or you find yourself without an internet connection. Those situations are exactly when things like progressive web apps would shine.”

Developers can take the opportunity to put themselves into the shoes of their users by intentionally introducing hardships into their own environment. This can help developers better understand the need for progressive web apps, along with how to most effectively utilize service workers to improve the user experience.

By considering exercises like throttling Wi-Fi, accessing the internet only using a phone for an entire day, switching browsers or even unplugging the mouse and navigating the internet by keyboard, it can help developers get out of their comfort zone and start thinking about the internet as something more than just what they access at work on a large screen with a good connection. This will help provide a winning user experience that goes far beyond UI.

Says Keith:

“A lot of the best user experience stuff isn't necessarily in the interface. It's in the service design, the end to end experience, how things tie together. That's all behind the scenes, behind the curtain stuff.”

Listen to Season 3, Episode 3 of the Decoded podcast to learn why progressive web apps are the un(der)tapped tool for smart web developers building for resilience.