6 ms·

What the Heck Is a “Progressive Web App”? Seriously

55 points by bhalp1 9y ago

tabtab 9y ago
WARNING: If you question the hype, they take away your Hip Card, and toss you into the Fogie Bin.
alexkavon 9y ago
Essentially a rebranding of mobile friendly SPA to fit Google's vision is all I've ever been able to determine.
elsurudo 9y ago
I always thought it was a web app that functions reasonably even on older browsers with JS turned off (for example). Then the experience gets "progressively better" if you have a newer browser, and allow JS to execute. Or am I confusing terminology?
- jnbiche 9y ago
  You're confusing terminology: that's progressive enhancement. Applies to both CSS and JS. PWA is pretty much all though JS APIs, primarily the Service Worker API. Two different concepts.
  - deleted 9y ago
    [deleted]
- ericwood 9y ago
  "Progressive enhancement" is the term you're looking for. I also mix it up in my head a lot.
jnbiche 9y ago
I thought use of the Service Worker API was the primary feature defining a PWA. If it's a SPA and is able to be used offline, then it's a PWA. Also, lots of people then use Web App Install banners for PWAs.
- macns 9y ago
  SPA stands for Single Page Application: https://en.wikipedia.org/wiki/Single-page_application https://en.wikipedia.org/wiki/Single-page_application
  - deleted 9y ago
    [deleted]
- bhalp1 9y ago
  Google says "If you're building a Progressive Web App, consider using a service worker so that your app can work offline." What does "consider" mean here? And I'm pretty sure SPA is also not a criteria for PWAs, it's just a suggestion. And also, the install banner is not really yours, it's the browser's functionality. Per Google: > Chrome uses a set of criteria and visit frequency heuristics to determine when to show the banner.
  - bengotow 9y ago
    My favorite part of the whole PWA marketing push is that they encourage use of the Service Worker API for offline caching, but leave cache invalidation / cleanup as an exercise to the reader. "Do it the way it makes sense for your application" is a technically correct answer, but I assume translates to "never" for 99% of us with tight deadlines.
    - parthdesai 9y ago
      This[0] might help you. [0]: https://workboxjs.org https://workboxjs.org
  - holmberd 9y ago
    Having a registered Service Worker is a condition of the app being classified as a Progressive Web App by Chrome.
  - jnbiche 9y ago
    > And I'm pretty sure SPA is also not a criteria for PWAs, it's just a suggestion. Fair enough, you could certainly use Service Worker API for an app with multiple pages. What I was trying to capture with the term SPA is more "web app", although I suppose you could even use Service Worker API with a simple static site.
untog 9y ago
"Progressive Web App" is branding. I think, as a developer, you can feel free to ignore the term entirely and instead focus on the Service Worker API, Notifications API, Push, etc. etc. However, when you're talking to a product manager or some other higher-up that doesn't have the same level of technical insight, this bundle of technologies becomes very time-consuming to explain. That's when you break out "Progressive Web App" - a web site that progressively becomes more like an app the more people use it.
- matt4077 9y ago
  > a web site, that progressively becomes more like an app the more people use it. I like how you've given the best definition in this thread, and IMHO shown that it's a concept that goes beyond this or that API, right after giving us the its-marketing-for-nontechnical-idiots spiel.
  - untog 9y ago
    Heh, I just think "PWAs" are like the famous definition of obscenity - you know it when you see it. But that doesn't translate very well (or, at all) to actual technical requirements, so we talk about specific APIs at appropriate points. And I wouldn't say the non-technical folks are idiots! They know a lot of stuff I don't, you just need to nail the overlap in what we both know. And given how difficult it is to explain the Service Worker API to even a skilled developer, best to take a pass.
    - sillysaurus3 9y ago
      What are some examples of progressive web apps?
      - untog 9y ago
        mobile.twitter.com is one that comes to mind - it uses push notifications, lets you add to your home screen and caches at least some stuff offline, though I don't know how much.
buovjaga 9y ago
It's similar in concept to progressive rock, house or trance.
- hexane360 9y ago
  This has the potential to be an interesting analogy, but I think you need to do a little work in defining "progressive" in the context of music, or else you're just pushing the ambiguity back a step.
  - cat199 9y ago
    he's saying it's like the original thing, only not as good but more shiny sounding.
megamindbrian2 9y ago
If your site goes directly to a download the app page, it's not a PWA https://developers.google.com/web/fundamentals/codelabs/offline/ https://developers.google.com/web/fundamentals/codelabs/offl...
vanadium 9y ago
"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." Well, between PWA and AMP, and Google's recent hard pushes to both developers and corporate America to adopt them, I can see where that confusion would come in. In the last 6-8 months, I've been watching and fielding inquiries from clients whom Google's approached on AMP, seen Google holding and inviting corporate dev teams (and marketers) to PWA/AMP hackathons, etc. It's really a full-court press these days, and line where the web ends and Google's ecosystem begins is starting to become lost on plenty of people.
cat199 9y ago
well, one thing is for sure, it "never shows the downasour", and has 'silky smooth' animations and 'no janky scrolling' probably drinks obnoxiously obscure 'craft' beers and enjoys farm-to-table heirloom tomatoes too.
deleted 9y ago
[deleted]
aoent2309 9y ago
Can anyone explain to me what a "downasaur" is? I've not used Android, so I don't know this term. Also, I'm not sure progressive anything on the web is a better experience for users. I have a reasonably fast connection everywhere I use the web and I find it a much worse experience when I load a website and see a really low-res version of images that suddenly changes to high res. Likewise, seeing all the text laid out in one font only to have it suddenly jump seconds later when it's done "progressively" downloading the font that's barely different from the standard one. It seems like what would be more helpful is a way to understand the speed of the connection and choose what to send based on that, rather than assuming everyone has a bad connection. Or make it so your web site doesn't need a bunch of cruft like fonts that the user doesn't care about and just loads quickly regardless of connection speed.
- fibbery 9y ago
  when chrome can't connect to a site or it crashes, the page that shows up has a dinosaur on it.
- TFortunato 9y ago
  I'm guessing it refers to the fact that on Android Chrome, when there is a error connecting to a site, the error screen has a little pixel art dinosaur on it, (which also has a little game included as an easter egg). https://i.ytimg.com/vi/XhkHbI_l-0M/maxresdefault.jpg https://i.ytimg.com/vi/XhkHbI_l-0M/maxresdefault.jpg
cbsmith 9y ago
I thought it was a web app that supports equality, a woman's right to choose, and reasonable gun control regulations.
pwaai 9y ago
Used to work at a PWA shop (yeah they exist) selling PWA at enterprise level and this is how I explain it to people: SPA + Push Notificaton + Add to Home Screen Launches SPA in Full Screen = PWA There's nothing proprietary or unique about PWA, it's just another way that Google is telling developers to "organize" their effort around to easily allow people to install SPA. To the average user, at least on high end phones, it really is jank free (YMMV)....but if you don't have LTE and on 3g, it will be slow regardless where your user will be staring at the loading screen for many seconds. The progressive philosophy is to display a base level SPA written in some Javascript framework and enhance the experience depending if Service Worker is supported or not (you will need SW for Add-To-Home & Push Notifications). I agree with the article that Google's desire to push their platform with things like AMP are increasingly confusing. The big strategic hurdle from a competitive landscape is as Amazon is gobbling up e-commerce (I think 1/3 US purchase online is Amazon don't quote me) and they want to promote struggling retailers and e-commerce businesses that buys their ads by making it faster and more like an app that runs in the browser so it's more discoverable. The whole PWA language seems to be designed around architects and higher decision makers in e-commerce companies who ultimately decide what their farm of developers will get to play with and honestly I don't blame the confusion from folks on the receiving end of PWA marketing message, it's not at all aimed at answering concerns from engineering or finance (CAPEX AND OPEX for what?) Currently, Google's stance is that the whole web should be either AMP or PWA or PWAMP (https://twitter.com/hashtag/pwamp?lang=en https://twitter.com/hashtag/pwamp?lang=en) and it's not clear why the investment should be made and today. Apparently, the vague messaging from Chrome team is also felt around Google and the general feedback is that it's not seen as a "painkiller" but PWA is more of a "vitamin" from the perspective of retailer executives--sure you made it more engaging and faster to checkout but it doesn't solve our deeper demand issues that is further plagued by highly leveraged brick & mortar expansion decisions 10 years ago which we are now writing off, as we've learned the other thing the internet is for isn't just porn but mindless purchases made on Amazon who convinced the world its okay to pay extra for peace of mind and consistent delivery times.
geebee 9y ago
I understand wikipedia isn't an absolute source, it's a summary of opinions and research. And what follows is my own opinion, though I'm linking to wikipedia for background and context. https://en.wikipedia.org/wiki/Progressive_web_app https://en.wikipedia.org/wiki/Progressive_web_app I would draw attention to this particular line: "Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet." https://en.wikipedia.org/wiki/Progressive_enhancement https://en.wikipedia.org/wiki/Progressive_enhancement Here's why I like this - "progressive" isn't just a nice, modern sounding word, the way "rad" or "radical" doesn't actually mean "nifty" or "cool", even if it came to be used that way in slang. Progressive has a very specific meaning, which is that it was built through progressive enhancement. Progressive enhancement, to me[1], is a very different principle from the app that is built as a javascript heavy front end, even if that technology gracefully degrades to plain html ("graceful degradation"). Progressive enhancement is just one strategy for achieving graceful degradation (which might not be the primary motivation, it can be a by-product). You work from content, start with the most basic presentation, and add technologies progressively, CSS, JavaScript, and so forth. I think "progressive" is one of those great sounding words that has come to mean "an excellent and forward looking web experience". This is what happens when you use a great sounding word to describe a more narrow principle or technique (re, RIP, "Agile"). In this case, it was a reasonable use of the word - progressive can mean "in stages" rather than "forward thinking", but there is an ambiguity here, and I think this recent post is a result of that ambiguity. [1] I say "to me" here not because this is necessarily my own personal opinion, but because I'm not 100% this is the intended meaning. I may follow those reference links in the wikipedia article and see what was meant. I think this is the case (built in stages, progressively), but I have to qualify it here because I'm not sure.

55 points by bhalp1 9y ago

tabtab 9y ago

WARNING: If you question the hype, they take away your Hip Card, and toss you into the Fogie Bin.

alexkavon 9y ago

Essentially a rebranding of mobile friendly SPA to fit Google's vision is all I've ever been able to determine.

elsurudo 9y ago

I always thought it was a web app that functions reasonably even on older browsers with JS turned off (for example). Then the experience gets "progressively better" if you have a newer browser, and allow JS to execute. Or am I confusing terminology?

jnbiche 9y ago
You're confusing terminology: that's progressive enhancement. Applies to both CSS and JS. PWA is pretty much all though JS APIs, primarily the Service Worker API. Two different concepts.
- deleted 9y ago
  [deleted]
ericwood 9y ago
"Progressive enhancement" is the term you're looking for. I also mix it up in my head a lot.

jnbiche 9y ago

I thought use of the Service Worker API was the primary feature defining a PWA. If it's a SPA and is able to be used offline, then it's a PWA. Also, lots of people then use Web App Install banners for PWAs.

macns 9y ago
SPA stands for Single Page Application: https://en.wikipedia.org/wiki/Single-page_application https://en.wikipedia.org/wiki/Single-page_application
- deleted 9y ago
  [deleted]
bhalp1 9y ago
Google says "If you're building a Progressive Web App, consider using a service worker so that your app can work offline." What does "consider" mean here? And I'm pretty sure SPA is also not a criteria for PWAs, it's just a suggestion. And also, the install banner is not really yours, it's the browser's functionality. Per Google: > Chrome uses a set of criteria and visit frequency heuristics to determine when to show the banner.
- bengotow 9y ago
  My favorite part of the whole PWA marketing push is that they encourage use of the Service Worker API for offline caching, but leave cache invalidation / cleanup as an exercise to the reader. "Do it the way it makes sense for your application" is a technically correct answer, but I assume translates to "never" for 99% of us with tight deadlines.
  - parthdesai 9y ago
    This[0] might help you. [0]: https://workboxjs.org https://workboxjs.org
- holmberd 9y ago
  Having a registered Service Worker is a condition of the app being classified as a Progressive Web App by Chrome.
- jnbiche 9y ago
  > And I'm pretty sure SPA is also not a criteria for PWAs, it's just a suggestion. Fair enough, you could certainly use Service Worker API for an app with multiple pages. What I was trying to capture with the term SPA is more "web app", although I suppose you could even use Service Worker API with a simple static site.

untog 9y ago

"Progressive Web App" is branding. I think, as a developer, you can feel free to ignore the term entirely and instead focus on the Service Worker API, Notifications API, Push, etc. etc. However, when you're talking to a product manager or some other higher-up that doesn't have the same level of technical insight, this bundle of technologies becomes very time-consuming to explain. That's when you break out "Progressive Web App" - a web site that progressively becomes more like an app the more people use it.

matt4077 9y ago
> a web site, that progressively becomes more like an app the more people use it. I like how you've given the best definition in this thread, and IMHO shown that it's a concept that goes beyond this or that API, right after giving us the its-marketing-for-nontechnical-idiots spiel.
- untog 9y ago
  Heh, I just think "PWAs" are like the famous definition of obscenity - you know it when you see it. But that doesn't translate very well (or, at all) to actual technical requirements, so we talk about specific APIs at appropriate points. And I wouldn't say the non-technical folks are idiots! They know a lot of stuff I don't, you just need to nail the overlap in what we both know. And given how difficult it is to explain the Service Worker API to even a skilled developer, best to take a pass.
  - sillysaurus3 9y ago
    What are some examples of progressive web apps?
    - untog 9y ago
      mobile.twitter.com is one that comes to mind - it uses push notifications, lets you add to your home screen and caches at least some stuff offline, though I don't know how much.

buovjaga 9y ago

It's similar in concept to progressive rock, house or trance.

hexane360 9y ago
This has the potential to be an interesting analogy, but I think you need to do a little work in defining "progressive" in the context of music, or else you're just pushing the ambiguity back a step.
- cat199 9y ago
  he's saying it's like the original thing, only not as good but more shiny sounding.

megamindbrian2 9y ago

If your site goes directly to a download the app page, it's not a PWA https://developers.google.com/web/fundamentals/codelabs/offline/ https://developers.google.com/web/fundamentals/codelabs/offl...

vanadium 9y ago

"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." Well, between PWA and AMP, and Google's recent hard pushes to both developers and corporate America to adopt them, I can see where that confusion would come in. In the last 6-8 months, I've been watching and fielding inquiries from clients whom Google's approached on AMP, seen Google holding and inviting corporate dev teams (and marketers) to PWA/AMP hackathons, etc. It's really a full-court press these days, and line where the web ends and Google's ecosystem begins is starting to become lost on plenty of people.

cat199 9y ago

well, one thing is for sure, it "never shows the downasour", and has 'silky smooth' animations and 'no janky scrolling' probably drinks obnoxiously obscure 'craft' beers and enjoys farm-to-table heirloom tomatoes too.

deleted 9y ago

[deleted]

aoent2309 9y ago

Can anyone explain to me what a "downasaur" is? I've not used Android, so I don't know this term. Also, I'm not sure progressive anything on the web is a better experience for users. I have a reasonably fast connection everywhere I use the web and I find it a much worse experience when I load a website and see a really low-res version of images that suddenly changes to high res. Likewise, seeing all the text laid out in one font only to have it suddenly jump seconds later when it's done "progressively" downloading the font that's barely different from the standard one. It seems like what would be more helpful is a way to understand the speed of the connection and choose what to send based on that, rather than assuming everyone has a bad connection. Or make it so your web site doesn't need a bunch of cruft like fonts that the user doesn't care about and just loads quickly regardless of connection speed.

fibbery 9y ago
when chrome can't connect to a site or it crashes, the page that shows up has a dinosaur on it.
TFortunato 9y ago
I'm guessing it refers to the fact that on Android Chrome, when there is a error connecting to a site, the error screen has a little pixel art dinosaur on it, (which also has a little game included as an easter egg). https://i.ytimg.com/vi/XhkHbI_l-0M/maxresdefault.jpg https://i.ytimg.com/vi/XhkHbI_l-0M/maxresdefault.jpg

cbsmith 9y ago

I thought it was a web app that supports equality, a woman's right to choose, and reasonable gun control regulations.

pwaai 9y ago

Used to work at a PWA shop (yeah they exist) selling PWA at enterprise level and this is how I explain it to people: SPA + Push Notificaton + Add to Home Screen Launches SPA in Full Screen = PWA There's nothing proprietary or unique about PWA, it's just another way that Google is telling developers to "organize" their effort around to easily allow people to install SPA. To the average user, at least on high end phones, it really is jank free (YMMV)....but if you don't have LTE and on 3g, it will be slow regardless where your user will be staring at the loading screen for many seconds. The progressive philosophy is to display a base level SPA written in some Javascript framework and enhance the experience depending if Service Worker is supported or not (you will need SW for Add-To-Home & Push Notifications). I agree with the article that Google's desire to push their platform with things like AMP are increasingly confusing. The big strategic hurdle from a competitive landscape is as Amazon is gobbling up e-commerce (I think 1/3 US purchase online is Amazon don't quote me) and they want to promote struggling retailers and e-commerce businesses that buys their ads by making it faster and more like an app that runs in the browser so it's more discoverable. The whole PWA language seems to be designed around architects and higher decision makers in e-commerce companies who ultimately decide what their farm of developers will get to play with and honestly I don't blame the confusion from folks on the receiving end of PWA marketing message, it's not at all aimed at answering concerns from engineering or finance (CAPEX AND OPEX for what?) Currently, Google's stance is that the whole web should be either AMP or PWA or PWAMP (https://twitter.com/hashtag/pwamp?lang=en https://twitter.com/hashtag/pwamp?lang=en) and it's not clear why the investment should be made and today. Apparently, the vague messaging from Chrome team is also felt around Google and the general feedback is that it's not seen as a "painkiller" but PWA is more of a "vitamin" from the perspective of retailer executives--sure you made it more engaging and faster to checkout but it doesn't solve our deeper demand issues that is further plagued by highly leveraged brick & mortar expansion decisions 10 years ago which we are now writing off, as we've learned the other thing the internet is for isn't just porn but mindless purchases made on Amazon who convinced the world its okay to pay extra for peace of mind and consistent delivery times.

geebee 9y ago

I understand wikipedia isn't an absolute source, it's a summary of opinions and research. And what follows is my own opinion, though I'm linking to wikipedia for background and context. https://en.wikipedia.org/wiki/Progressive_web_app https://en.wikipedia.org/wiki/Progressive_web_app I would draw attention to this particular line: "Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet." https://en.wikipedia.org/wiki/Progressive_enhancement https://en.wikipedia.org/wiki/Progressive_enhancement Here's why I like this - "progressive" isn't just a nice, modern sounding word, the way "rad" or "radical" doesn't actually mean "nifty" or "cool", even if it came to be used that way in slang. Progressive has a very specific meaning, which is that it was built through progressive enhancement. Progressive enhancement, to me[1], is a very different principle from the app that is built as a javascript heavy front end, even if that technology gracefully degrades to plain html ("graceful degradation"). Progressive enhancement is just one strategy for achieving graceful degradation (which might not be the primary motivation, it can be a by-product). You work from content, start with the most basic presentation, and add technologies progressively, CSS, JavaScript, and so forth. I think "progressive" is one of those great sounding words that has come to mean "an excellent and forward looking web experience". This is what happens when you use a great sounding word to describe a more narrow principle or technique (re, RIP, "Agile"). In this case, it was a reasonable use of the word - progressive can mean "in stages" rather than "forward thinking", but there is an ambiguity here, and I think this recent post is a result of that ambiguity. [1] I say "to me" here not because this is necessarily my own personal opinion, but because I'm not 100% this is the intended meaning. I may follow those reference links in the wikipedia article and see what was meant. I think this is the case (built in stages, progressively), but I have to qualify it here because I'm not sure.