Have you heard about Progressive Web Apps? They might change your app solution.

Joe Simunic
Aug 31, 2018 · 5 min read

Look at this image.

ordinary iPhone springboard screenshot

Do you see anything out of the ordinary? Nothing special right? It’s just an app on my iPhone. Let me open it and use it a little.

iPhone PWA Demo

Ok, just a normal iOS app. Of course, lots of my customers use computers too, so what if I wanted to make my app for Windows? After some more time and money, you get something like this:

Windows Desktop Icon

Ok we’ve made our Windows app too. Let’s open it.

Windows Desktop PWA Demo

Again, it looks and behaves like a normal Windows application. It’s responsive just like the mobile version, and transforms appropriately for the window size. But what if I wanted it to run on Android too?

Wallet stares sheepishly.

After some more time, I end up with the same app on a Nokia 8 running Android 8.1.

Icon appearance for the app on a Nokia 8
Appearance of the app in Android 8.1

Now you may think to ask me: “But Joe, why would you spend all this time making versions of your app for every sort of operating system and device? I understand you want to reach as many people as possible, but didn’t that cost you lots of time and money? Won’t that be an absolute pain to maintain?” Nope.

Wait, what?

What if I told you that these apps were the same. That’s right, the same. It’s because they are. These apps are running the same code, have the same user interface and are deployed and managed from the same centralised location.

These apps are called Progressive Web Apps or PWAs. They are, simply put, websites. Each of the photos of the apps shown above are simple web views. They are served from the same URL and share the same HTML, CSS, and JavaScript.

Enter the Progressive Web App

There isn’t anything inherently magical about PWAs. They’ve been out for years now. To put it simply, they’re websites designed to have offline capability. Google in particular sees the essence of what a PWA is as:

  • Reliable
  • Fast
  • Engaging

The spirit of Progressive Web Apps addresses user experience. PWAs are designed to remove all the problems and quirks of web browsing and app use. User experience is the first class citizen here. The following image shows how native apps and PWAs are indistinguishable on iOS.

Will the real app icon please stand up?

The Basic Gist

PWAs work by saving (caching) files offline. When they have internet connection, they save all the desired files offline and then render those when you need them (even if there’s no internet anymore). This provides a few benefits: speed, bandwidth savings, data savings and offline availability. These benefits make a PWA almost indistinguishable from a native application; say, an iOS app.

There are lots of ways to configure caching, including “on user interaction”, “on network response”, “cache only” and “cache then network” to name a few.

When the files or data is saved offline, and you refresh the page or open a link you’ve already saved, those resources are loaded from the cache instead of the network. Simple! This provides that reliability and speed, particularly in those patchy internet affected areas.

Why not Progressive Web Apps?

PWAs aren’t the silver bullet for making an app. At the end of the day, a PWA is a front-end, thin client (computing done primarily server-side), that talks to your back end. If you need native capability like NFC or SMS, those things aren’t available yet. You can see the limitations of the different capabilities here. But that list has been shrinking since day 1. I know browsers like Safari on iOS are also frustratingly lacking in some support, but it should be a matter of time.

Why Progressive Web Apps?

There are statistics out there about improved conversions and increased engagements because of PWAs, but that’s not what gets me excited about them. Where I think the magic happens is in the hardware and software agnosticism that can be leveraged.

You don’t need to open Xcode and start writing some Swift or C++. You don’t need .NET. What’s Zameran? You don’t need an app store, you don’t need to follow artificially imposed policies and you don’t need the latest, most expensive hardware to run your app. Accessibility is a non issue. Something gone wrong in production? Guess what, no update needed! Your application can transcend the walls of these systems and run anywhere a web browser can. That means most devices. All you need is some JavaScript and a can-do attitude.

The speed of development and deployment that this technology can grant is the beauty that I see. The time to create and deploy an app can now be the time it takes you to write a web page (i.e not long), and it can be accessed by the same people who can access the site: by anyone from anywhere. Even if you still want native applications, hacking together a proof of concept with a PWA could be done in a fraction of the time and cost. That means faster delivery of value and service to your customers.

So next time you want to preach to your programmer friend to see if they can make your new app idea, sit down and have think about Progressive Web Apps. The next time that your program lead suggests a native application that needs to be re-written 4 times for each operating system, at least calmly ask “Why? Have you heard about Progressive Web Apps?” before being shutdown.

Resources and further reading

There are some great resources to get started in converting your website to a PWA, or developing a PWA from scratch.

Google have comprehensive documentation and best practices for rolling out your solution.

The PWABuilder is a nice and easy way to PWAify your app.

Mozilla documentation is always nice too.

https://www.servian.com/digital/

Joe Simunic

Written by

Associate Consultant @ Servian. Programmer, web and tech enthusiast. “What a time to be alive.”

WeAreServian

The Cloud and Data Professionals

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade