DEV Community

Cover image for What the heck is a "Progressive Web App"? Seriously.
Ben Halpern
Ben Halpern Subscriber

Posted on • Updated on

What the heck is a "Progressive Web App"? Seriously.

This morning I went to write an article outlining a few tips about implementing a progressive web app (PWA). But when I went to introduce the topic, I again encountered what was the hardest part about the whole topic in the first place: I have a really hard time describing what a progressive web app actually is.

I'm not posing this question from a perspective of ignorance. We implemented a PWA for dev.to, if you go to this site on Android Chrome, you should see the a prompt to install our app.

So what is a PWA? Here's what Google's official introduction says:

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

Those all seem like qualities we already had before embarking on any of this, so what's a progressive web app? Google's continued use of the term "quality" in describing things leaves me with a ton of confusion. It really seems like they want PWA to be a general term that doesn't imply any particular implementation, and have it be focused around the user experience, but all I see over the web is confusion as to what they mean by these things. My website is already "engaging" and "immersive", does that mean it's a PWA? They mention these "App Install Banners", which seem like the point, but if that's what makes it so, why do they bury that info? Is PWA an abstract pattern, or is it about the installing part, is it both?

Perhaps PWA is meant to be inclusive of a lot of technical approaches, so they need to be vague. This might be okay if it were just the source docs that were this way, but I feel like alternative introductions and how-to's scattered across the web have latched on to this vague language and the confusion has proliferated.

It's socially hard to say "hold on, I don't understand any of that", because you don't know if everybody else just gets it and you're the stupid one. In the PWA space, I really do feel like there's a lot of people nodding along assuming everyone else understands what a PWA is and they must be missing something. You know, imposter syndrome.

Communication is difficult, naming things is the hardest thing, and the Chrome team is working hard. And I really like these folks, so I just want to express that I personally feel like some of their tech releases are really hard to grok. I don't think this is limited to PWA. AMP (Accelerated mobile pages) followed a similar trend of "wait, what are these for? what are you doing with these?"

Google plays a central role in this confusion because they are the organization most strongly attempting to blur the lines between the open web and their platform. Google blurs the line between this is a tool to interact with Google products and this is a direction or philosophy for web development. It can be hard to follow.

Again, I say this from the perspective of having already built a PWA, I think. I think we're doing it for all the right reasons. I think it's working because about a third of visitors who see the notice to install it do so. This is a high number.

But I'm still not sure about any of this. I will surely write that article I meant to write in the first place as soon as I wrap my head around all these things.

Top comments (52)

Collapse
 
ben profile image
Ben Halpern

If you are an Android user, you definitely install the dev.to PWA either way 😁

Collapse
 
kayis profile image
K

On Android I mostly use Chrome and switch through the sites I use via the browsing history. If installed them, I would have to open different apps.

Tried this with Twitter and dev.to, but the experience simply went downhill :/

Collapse
 
tunaxor profile image
Angel Daniel Munoz Gonzalez

What do you mean downhill?

Collapse
 
davidecarvalho profile image
Davi de Carvalho

Implement it on iOS too, it’s just as easy, just use Apple meta tags

Collapse
 
mangekalpesh profile image
Kalpesh Mange

I have also done for Android Chrome at work, but this PWA thing is cryptic when I see iOS. Any suggestions?

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

Why you think we didn't already?

Collapse
 
weswedding profile image
Weston Wedding • Edited

It's socially hard to say "hold on, I don't understand any of that", because you don't know if everybody else just gets it and you're the stupid one.

I hear that. That's me and React + Redux. It's extremely frustrating and embarrassing.

When it comes to PWA I think I'm definitely confused, too. I feel like I have a definition in my head that came from somewhere but oftentimes I don't find that definition seems to fit with an article I'm reading about PWA. It is, I think, just one of those terms that you need to define when you start a conversation about it because it has become really greasy and smudged by marketing. See also: DevOps, Full Stack Developer, 10x developer, etc.

Collapse
 
markerikson profile image
Mark Erikson

Hi, I'm a Redux maintainer, and I spend most of my time answering questions about React and Redux.

If you're feeling confused about what they are, how they work, how to use them, etc, please feel free to ask me questions! My React/Redux links list points to many tutorials and articles, and the Reactiflux chat channels are a great place to ask for help.

Collapse
 
weswedding profile image
Weston Wedding

I appreciate the effort to reach out; maybe I'll circle back to React and Redux some day and I'll be sure to check your resources out when I do.

Collapse
 
ben profile image
Ben Halpern

Sometimes things are overly complicated or obfuscated, maybe to sell a service and make it seem more valuable, maybe just because people want to sound smart, or maybe because nobody's sure they are experts enough to speak up about the issue. Like The Emperor's New Clothes

I used to be terrified to contribute to conversations at meetups and such. Now that I'm much more confident in this way, it's a matter of not forgetting that feeling. It's easy to forget how confused you once were, or how confused any non-power-user will remain.

Collapse
 
guitarkat profile image
Kat

Yeah, it's tough. I just try to remember that my experience and opinion is valid, but it doesn't mean that it's the end all and correct. We are allowed to be wrong and learn about something and through being wrong is a good way to learn.

If I lose social points for it, so be it. But I'll walk away with learning something new. I'm not afraid. It's kind of like asking questions in class. No one wants to be "that kid".

Collapse
 
courier10pt profile image
Bob van Hoove

I thought it referred to progressive enhancement / graceful degradation. Well apparently not :) Thanks for writing!

Collapse
 
weswedding profile image
Weston Wedding

Yeah, exactly. I thought PWA was just a way to say "My web app has progressive enhancement."

Collapse
 
pixeline profile image
Alexandre Plennevaux • Edited

I understood "progressive" as 'from a "browser feel" to a "native feel" thing.

Collapse
 
aarongustafson profile image
Aaron Gustafson

First off: I work for Microsoft on web standards & accessibility stuff and am focused a great deal on PWAS and interop currently.

I agree, there’s a lot of misinformation about this stuff. I’ve been writing and speaking quite a bit about it. Here are a few links to those materials:

Progressive Web Apps and the Windows Ecosystem
Video: channel9.msdn.com/Events/Build/201...
Post: aaron-gustafson.com/notebook/progr...

Your Siteβ€”Any Siteβ€”Should Be a PWA
aaron-gustafson.com/notebook/your-...

Yes, That Web Project Should Be a PWA
alistapart.com/article/yes-that-we...

Quite a few others have been doing great work on helping define what PWAs are. In no particular order, I’d recommend:

Betting on the Web
joreteg.com/blog/betting-on-the-web

A Progressive Roadmap for your Progressive WebΒ App
cloudfour.com/thinks/a-progressive...

How to turn your website into a PWA
mxb.at/blog/how-to-turn-your-websi...

Progressing the Web
adactio.com/journal/12461

Collapse
 
joanalauren profile image
joanalauren

Good question! And I found an article about "What Does It Take to Develop an Enterprise Web Application?" - romexsoft.com/blog/enterprise-appl... so maybe you will like to know about that too.

Collapse
 
rossta profile image
Ross Kaffenberger

Great thoughts, Ben. Somewhat on the topic of progressive web apps, communication, and naming things, I find the term "Service Worker" to be incredibly confusing as well.

Collapse
 
ben profile image
Ben Halpern

Yeah, it took me a while to wrap my head around some of these topics and once I did I looked back and was like "wait, that wasn't so hard, it must be a communication breakdown"

The #ExplainLikeImFive tag on dev.to was sort of born out of this thought.

P.S. dev.to runs on your Service Worker gem, thanks for building great stuff ❀️

Collapse
 
rossta profile image
Ross Kaffenberger

Great to hear! Glad it's working out for you. Let me know if you have any issues.

Collapse
 
endoffline profile image
endoffline

So I like the idea of having a website to behave as a native android app. But as I added the website to my homescreen, I have no longer any option to share this article.

In Chrome I would just take the URL from the address bar, but that's missing in here and a share button is nowhere to find.

Collapse
 
siddhantrimal profile image
Siddhant Rimal

As a user, I've come to intituitively think that Reactions and Share buttons go together. So, if you see right below the article body, you'll see some reactions and an option-icon(three vert dots). Click to find an option to share on twitter or paste the URL from right above.

Collapse
 
domysee profile image
Dominik Weber

THANK YOU!

It's socially hard to say "hold on, I don't understand any of that", because you don't know if everybody else just gets it and you're the stupid one. In the PWA space, I really do feel like there's a lot of people nodding along assuming everyone else understands what a PWA is and they must be missing something. You know, imposter syndrome.

That hits the nail on the head. I looked it up, but found nothing conclusive, no clear criteria saying "this is a PWA".

So I just went with "PWA is a term for some kind of web app".

What I'm trying to say is, I'm really glad you addressed this, and told everyone they are not alone with this confusion.

Collapse
 
ben profile image
Ben Halpern

Aww happy it resonated.

Collapse
 
christiankaindl profile image
Christian Kaindl • Edited

Firefox Nightly 58 for Android also has 1st class PWA "add to homescreen" supportπŸ”₯ (In the address bar)

PS: Using dev.to as a "native" app is totally awesome

Collapse
 
ben profile image
Ben Halpern

Thanks a lot! We try hard to provide a good UX and this should help a lot.

Collapse
 
letsbsocial1 profile image
Maria Campbell

I found an article which goes more into depth about what PWAs mean here: blog.ionic.io/what-is-a-progressiv... Basically, that web content in a mobile browser is limited to the features of the browser. That "Progressive Web Apps bring features we expect from native apps to the mobile browser experience...(they) describe a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web."

Collapse
 
oleksiirybin profile image
oleksii-rybin

Thanks for the article, that's exactly what I'm feeling. Kind of not getting what PWA is and how to deal with it, but kind of embarrassed to ask, cause it looks like everyone else is getting it :D
Waiting for the next article on this topic! :)

Collapse
 
ra_jeeves profile image
Rajeev R. Sharma

Had added dev.to to my android home screen just a couple of days back, and was meaning to ask how it has been developed. You get a proper splash screen before app launch, has integrated deep linking and such, almost indistinguishable from a native app. Well, now I know... :-)

Collapse
 
pildit profile image
pildit

I'm on Android but I don't see any notice to install the app?

Collapse
 
ben profile image
Ben Halpern

That's another possible issue that's not totally clear to me actually.

Chrome says this:

Chrome uses a set of criteria and visit frequency heuristics to determine when to show the banner.

This is pretty cryptic. Are you able to "manually" add to home screen through the browser's menu?

Collapse
 
pildit profile image
pildit • Edited

Yes I did..but it seems there are 2 problems in the app :

  1. I can't submit comments/replies
  2. The Notifications area shows only "Following" alerts..there's no trace of others' comments to my replies..strange.
Thread Thread
 
andy profile image
Andy Zhao (he/him)

Hmm strange... It shouldn't be too different than your Chrome Android browsing experience. I'm not getting those issues on my phone. We just updated the cache version so you might have to reload your app.

Collapse
 
webknjaz profile image
Sviatoslav Sydorenko πŸ‡ΊπŸ‡¦ • Edited

You can go to the Chrome's hamburger menu and hit "Add to Home screen" item.

Also AFAIR it's platform dependent and is supported since Android 5.

Collapse
 
floriankrft profile image
Florian

Thanks for this great article, i am already using a progressive web app for my small business in berlin. I did it with appyourself.net and i can recommend it to you guys. You are able to test it for free and its really worth it.

Collapse
 
imthedeveloper profile image
ImTheDeveloper

This just appeared on medium β€œLearn To Build Progressive Web Applications (PWA)” @BrandonMorelli codeburst.io/learn-to-build-progre...

"A Progressive Web App is an app that works for every user no matter what browser or mobile device they are using. They are responsive, safe, linkable, and they feel like an app when used on a mobile or tablet device.”