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...
For further actions, you may consider blocking this person and/or reporting abuse
If you are an Android user, you definitely install the dev.to PWA either way 😁
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 :/
What do you mean downhill?
Implement it on iOS too, it’s just as easy, just use Apple meta tags
I have also done for Android Chrome at work, but this PWA thing is cryptic when I see iOS. Any suggestions?
Why you think we didn't already?
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.
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.
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.
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.
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".
I thought it referred to progressive enhancement / graceful degradation. Well apparently not :) Thanks for writing!
Yeah, exactly. I thought PWA was just a way to say "My web app has progressive enhancement."
I understood "progressive" as 'from a "browser feel" to a "native feel" thing.
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
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.
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.
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 ❤️
Great to hear! Glad it's working out for you. Let me know if you have any issues.
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.
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.
THANK YOU!
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.
Aww happy it resonated.
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
Thanks a lot! We try hard to provide a good UX and this should help a lot.
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."
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! :)
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... :-)
I'm on Android but I don't see any notice to install the app?
That's another possible issue that's not totally clear to me actually.
Chrome says this:
This is pretty cryptic. Are you able to "manually" add to home screen through the browser's menu?
Yes I did..but it seems there are 2 problems in the app :
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.
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.
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.
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.”
Thanks for sharing! For many software houses, creating a PWA is already a software engineering standard. Soon, the availability of a PWA will become a must-have for any serious business.
y-sbm.com/blog/pwa-increase-your-b...
Hi. I've just discovered dev.to thanks to your article appearing on FlipBoard.
That dev.to app installer on mobile, does it not count iPads as mobile devices? I cannot get it to appear. I was hoping it would be a nice visual proof to it all :)
Thanks
So you're right in both regards. Naming things is hard, and Google certainly hasn't helped the confusion as you mentioned. With that said, what I've gathered is that its both a design approach and an end goal. The end goal is portability. Whether you make it to the user's homescreen or they only view your page once, the idea is that they should be able to do everything that they want to with your site (provided their device is capable) and making the site aware of what the device is capable.
So for instance, if you have a share button that wants to use the Share API then you should check to see if the UA has the Share API and then only add it to the interface if the support is there. Etc, etc. This all leads up to Service Workers and making your web site/app work well offline and indistinguishable from a native app, if the user so pleases.
From what I've seen PWA is just the reversal of the single page and mobile app trend back towards monolithic app design like that of the desktop days. While giving one is still using to the same code base for their web application the changes are more desktop geared.
This can be seen in that most PWA to date are implementing the same code with electron or with extra meta data to make the long broken mobile 'add to home' feature to function.
I've done a primitive investigation on PWA topic several months ago. Here's the result: syndicode.co/2017/09/27/why-your-w...
From all the conclusions I've found I think that PWA is one of the most important trends for the next few years. But: "The ‘PWA’ is mostly the marketing term (no longer just a Google thing). You can take it as a website with a special power". So I take it mostly as the approach.
I personally think the term "PWA" may have probably began as more of a marketing coinage to collective refer to a bunch of web tech, rather than something really well defined, and it eventually got traction elsewhere in the community. Its definitely a vague, umbrella term. But maybe its fine being a "living definition"? :P As a community, we're still trying to make sense of it - add to it, modify what it means... At this point, IMO it's more of a paradigm or concept than any tech, but you could argue that the concepts are nothing new; rather articulated in a new (and hopefully better?) way to suit the current state of the ever evolving web :)
Great article, it's very interesting and useful.
Last week I deployed pwa on my own domain. Behind of app it's preact and service-workers.
You can check: shavidzet.com
So, I was expecting an example...
Still no idea what a PWA is....
Great post!
I think Google gives standardization of user experience and if you follow their “philosophy” - you’ll be able to reach more users in an intuitive way.
I am more confused now.
This Progressive Web App sounds a lot like "Cross Mobile App Development".
I read this post in the pwa of yours and I find the user experience it amazing, as good as a native app
Thanks for the interesting materials. I found great information here: mlsdev.com/blog/161-web-and-mobile...
I always thought PWA just meant a web app that feels like a native app?
App sounds fancay! Website sounds like you made something on Geocities.
If you want to pwa at pwa you might like pwa.tips /me and my friend started it.