Overview

I’ve written about this before but I wanted to take a moment to draw particular attention to a technology that’s becoming more and more prevalent: PWAs.

In the tech sphere, we are beginning to see a large-scale shift by both startups and larger companies away from purely native applications, and towards progressive web applications.

Today, I’m gonna share with you three good reasons why PWAs will probably replace native applications, and what that could mean for you as a designer.

What is a PWA anyway?

In short, a progressive web application (PWA) is an application that is created using HTML, CSS, JavaScript, and some form of front-end library/framework like React, Vue, Angular, Svelte, etc.

The upshot of this is that it has now become possible (and has actually been possible for quite some time but is finally starting to gain some real traction) to “install” a web application on a phone, and have it run like a native app.

Now of course this is not without compromise, and there are some key differences which we’ll go over.

The main differences between Native and PWAs

Simply put the main difference between an native application and PWAs is:

• Native apps run using system architecture and system code, whereas
• PWAs run in what is essentially a browser container without the trim.

This entire experience is made possible by the inclusion of what’s known as a “web app manifest” file which tells the device’s browser how to render the web app to the screen after it’s been installed:

https://speakerdeck.com/grigs/why-you-should-build-a-progressive-web-app-now-1

As you can see, displayed correctly, a PWA becomes virtually indistinguisable from a native app with respect to presentation.

There are still some key differences, such as:

• With a native app, you normally have access to system-level UI components (UiKit for iOS, and Material-UI for Android).
• With a PWA, you’re starting from scratch with styles, components, pages, etc. BUT the cool thing with a PWA is that you can leverage 100’s of responsive style libraries that are available for the web, and you can customize each and every component to fit your exact specifications.

With all that said, let’s get to why PWAs will absolutely take over in the near future.

Three good reasons why PWAs are the future

#1. Traditional apps are massive compared to PWAs

Most native apps have a giant footprint and take up a ridiculously large amount of space on a user’s device. Not PWAs.

https://www.simicart.com/blog/progressive-web-apps-vs-native/

Imagine your users being able to install an app on their phones that takes up less space than most of their pictures and videos. That’s a game-changing advantage in and of itself!

#2. You can completely sidestep the app stores with PWAs

Even more interesting, when you’ve created a PWA, you don’t need to publish it to either app store in order for a user to install it.

They can install your app directly from your website. One and done. They open it, and the app runs just like any other app, simple as that.

https://www.howtogeek.com/fyi/how-to-install-progressive-web-apps-pwas-in-chrome/

#3. PWAs are completely customizable from the ground-up

Tired of the same old boring UI but don’t want to force your devs to create custom native components? You don’t have to.

With PWAs, you’re not coding apps with Swift, Dart, Kotlin, or anything like that. No, you’re using HTML and CSS for content and styles which means that you can do basically anything that you want.

• You want some 100% custom buttons? Done.
• Custom tab bar with custom functionality? You got it.
• WebGL content carousel? You bet.
• You want some dope SVG magic? You can do it.

Anything you can do on the web you can do within a PWA (just make sure it’s not too resource intensive or you can get frame-rate drop, just like on a website).

Though PWAs do have their drawbacks

However, just because PWAs will probably overtake native applications doesn’t mean that they’re the be-all, end-all.

There are a few things that PWAs can’t do, but it’s worth mentioning that at the time of writing this, most chromium-based PWAs can do virutally everything you’d need a native app to be able to do.

What this means for you as a designer

Moving forward, there is a HIGH and I do mean high likelihood that designing for specific platforms is going to give way to designing exclusively for the responsive web, which can be embedded on a device as a PWA.

This could be a MASSIVE game-changer because things that are normally very difficult for developers to do using native tooling just got a whole lot easier thanks to the absolute plethora of open-source style, component, and animation libraries available for the web.

And I’m not just talking about Bootstrap or Tailwind here, I’m talking about advanced libraries like D3.js for advanced charting, GSAP for insane animations, three.js for working with 3D assets, and a whole lot more.

Couple this with the ability to update your application on the fly and push it out to users en masse; you’ve got a powerful new approach on your side in the fight to get your product to marketplace better, faster, and cheaper than before.

Looking for more?

You can learn a whole lot more about PWAs here: