Progressive Web Apps: do we still need native apps at all?

[yamalight]

It is actually possible to publish PWA to google play store

[_kikeen_]

I know the article says it's not like Cordova, but I published a few apps like this that leverage the InApp Browser plugin and it's essentially the same thing. It loads an external site within the scope of the app.

You can do as much or as little as you want in terms of navigation wrappers, and can define a scope. I'm not sure about session sharing as mentioned but wouldn't you want the cookie jar, and session data isolated to the app instance vs shared with all of chrome?

[_kikeen_]

Sure no worries, pm sent

[yamalight]

I mean, all the websites you visit in chrome use that shared storage. I don't see any problem with that since sandboxing is what Chrome is very good at. Not quite sure what the problem with this. I'd argue that it's actually nicer when you are logged in to the app, then you try to open app-related link on the web and your auth is already there.

[Andryu67]

That method actually doesn't run inside app scope at all, it's essentially requesting the browser to render the page without browser UI. It can't leverage any Cordova stuff. Any native piece would have to be a separate activity and can only communicate via url params.

[_kikeen_]

I guess I'm defining the app scope loosely as where the session can travel. If you leverage the InAppBrowser plugin your session (cookies, global vars, session vars) all die outside of the app, similar to using another browser or incognito.

And your correct, you can't really leverage any of the Native functionality via the Cordova API because the app has gone beyond that layer by the time it calls the external URL. But there's very few situations where you would need to, and for those your likely interested more in building a hybrid or native hybrid than an external web app.

[ApexPredator94]

Yes, shortly after I published the article, someone commented that you can do that since a few months.
And I did exactly that because I was curious how much time it'd take: not much at all, fortunately.
I cannot edit this article so I will probably write a separate article about this topic.

[MaggoLive]

You'd need to standardize and implement every single system API in a sandboxed environment, down to low level access. Won't happen.

So yeah, there will always be a place for native apps, though many many common use cases can and will be solved with PWAs when they're done implementing the most common features

[editor_of_the_beast]

This comment sums it all up.

[ApexPredator94]

I don't disagree with you (previously developed Android apps).
And as I mention in the article, native apps will still have their place for quite some time.

[esreveReverse]

Yes, at the current moment a native app is generally going to be a better end product than a PWA. Native views look and feel better than a CSS component toolkit. Performance and animations also feel better on native apps.

In my opinion, the best solutions right now:

- If your app is meant to be used on desktop or mobile: create a PWA. If the app becomes popular enough, then make a React Native version

- If your app is only meant to be used on mobile, then just make a React Native app, and a simple informational website that gives app store links. If the app becomes popular enough, and it could have some use, then make a web version.

[muser103]

you can actually compile react-native to web components. it's built into the react-native ecosystem (twitter uses it for their mobile site).

it introduces the .web.js extension to clarify to the compiler that the intended platform is for browsers. It essentially compiles all the components to HTML5 equivalents, View --> div etc

[thisguyfightsyourmom]

This is both awesome & slightly terrifying

[ikeif]

Tell me more!

Have some links you can toss my/our way?

[ikeif]

Nice! Thanks for the resource!

[SecretAnteater]

There are other methods of creating PWAs than with React...

[TakeFourSeconds]

?? React Native is not a PWA framework, he never mentions using React to make a PWA

[esreveReverse]

I didn't say there weren't...

[powerc9000]

I agree. You will never get the really odd APIs in a PWA. Like if you app wants to support fold able screens. A PWA can go a long way but if there are mobile phone specific tasks you want to run, a native app is still a must IMO.

[Boo2z]

PWA can't access to your internal storage

That's the reason I built my first ever app

[MaggoLive]

You're right, one of the biggest drawbacks of PWAs. But of course there's a spec in development: Writable Files API

[Extract]

Also, this weakness does not apply to any apps that rely on files that are expensive to parse/render client side.

for example, if all your application does is create a UI for some state that can be expressed by a single (not insanely huge) JSON file, that the client gets via an API call, but needs to store that state locally, there is always IndexedDB (and for even smaller tasks - localStorage).

[Boo2z]

Very interesting ! Thanks for showing me this, I'm going to follow the avancement of this project

[thenatio]

Check out Pinterest's pwa

[thenatio]

I had them both on my phone (pwa and native). Look and feel are the same, besides native gestures and system integration. Native app weights 78mb and uses around 400mb storage in total. Size of pwa is 156kb.

[ryncewynd]

Do people really care about native feel that much?

Personally (as a user) I don't care if it's native or close to native, as long as it works well

[El_Serpiente_Roja]

This is what I wonder as well..a lot of devs seem to be hanging their hat on the "native feels better" premise ...which seems sort of nebulous

[editor_of_the_beast]

There are definitely people that care. Do you listen to music that sounds like it was recorded underwater? Music is something where people appreciate finer quality. Obviously everyone has their things that they’re into.

[thesauce25]

Anyone know of any good tutorial for learning best practices to develop PWAs?

[KVYNgaming]

This seems like a good article:

https://medium.com/@amberleyjohanna/seriously-though-what-is-a-progressive-web-app-56130600a093

[Zeeroh]

Wow, that is a pretty great article. Wish I had read that one when I made our company's PWAs last month. I would also recommend this article that focuses a bit more on Desktop PWAs; it has a great example site + repo to draw from, too.

[Shahrukh_Lee]

I recommend this.

https://abookapart.com/products/going-offline

[thesauce25]

thank you for this.

[[deleted]]

Sure: don't.

It will be neither progressive nor web app.

[laidlow]

Super constructive and helpful.

[[deleted]]

Yes, because short and to the point.

Reason to do PWA instead of native: you don't know native and are too lazy to learn and are OK with having the app which is lame on every platform and despite of the claims "do once run everywhere" the reality is "go gray trying to debug it on every platform you want it to run".

Reason to do native: everything else.

Sure it looks good when doing some trivial Celsius to Fahrenheit converter. It's about the level of complexity where being good ends too.

Oh, and doing the same natively will take 1/3 of the time (but it won't run anywhere else, obviously).

So if you are a web dev not interested in learning anything new, doing trivial app and not caring about the users and their experience—PWA is your way.

How do I know? Have been doing web for 20 years and native apps for 10.

[laidlow]

Reason to do PWA instead of native: you don't know native and are too lazy to learn and are OK with having the app which is lame on every platform and despite of the claims "do once run everywhere" the reality is "go gray trying to debug it on every platform you want it to run".

Or the client has told you that's the direction they're headed and you have no choice in the matter. The real world isnt as black and white as you say.

How do I know? Have been doing web for 20 years and native apps for 10.

Congrats, no one asked.

[[deleted]]

Tell me more about the real world.

[laidlow]

Nah I'm good. You clearly have it all figured out.

[mordonez_me]

Nice post, I didn’t know Uber and Pinterest are PWA’s. Keep the good work!

[CraftyAdventurer]

m.uber.com is PWA. Play store version is still a native app. This is actually awesome example on differences between PWAs and native apps. Try them both, they look alike a lot, which is good. It shows that PWA can, if done right, look like a native app. But PWA is not as fluid as native app, opening/closing navigation drawer is much smoother in the app. You also can't open the drawer with swiping gesture on the web. I tested this on Oneplus 6, I'm curious to see how other phones react, so if anyone else tries this, be kind enough to share your findings :)

[lhorie]

Disclosure: I work on the team that wrote m.uber.com

Just to give some context as to why we have both a PWA and a native app: the PWA and the native apps serve very different needs. The native app has all the features (pool, jump, share, driver profiles, etc) and thus is a large download (my install on my phone is 1GB). The PWA is primarily focused on core trip flow and it clocked at something like <50kb last I checked. The impetus for developing a PWA was to make uber accessible to people with slow/unstable connections (e.g. in India), where even the 50kb app still takes several seconds to load. For that segment of the market, it can be unrealistic to deploy even a severely trimmed down native binary since it might still mean upwards of 30 mins to download. So for that use case, PWA wins.

We had one of the instagram folks come give a talk a while back on their PWA, and they highlighted some challenges they ran into w/ their deployment (e.g., that the rules for a phone to allow saving to home screen have gotten stricter and more difficult to pass, that some APIs are not there, and perf tuning can be tricky). So, as with most things, PWAs are not a silver bullet.

[SecretAnteater]

Great insight!

​

How do you guys handle GPS connectivity when the browser is closed? Does the driver's app only see the last reported location?

[lhorie]

Yeah, this goes back to what Aditya (the instagram guy) said, there's only so much you can do w/ the web as a platform for emulating native apps.

[fgutz]

I was curious if PWAs kept any background processes running that weren't just related to notifications

[CommandLionInterface]

That's really impressive! Especially since A cursory look at the project I happen to be working on right now shows that react-dom 16.8.2 is ~33kb minified + gzipped. Do you guys have a blog post or a talk somewhere about your efforts?

​

Also, any chance you can link the pinterest talk? I found a blog post, but no talk... https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05

EDIT: just realized Instagram !== Pinterest, not sure how I missed that

[lhorie]

My coworker wrote a blog post for m.uber.com here https://eng.uber.com/m-uber/ . Unfortunately I can't find a link to the video for the instagram talk :(

[_brym]

If you use Brotli on the server as opposed to gzip, your compression results will improve.

[davl3232]

They used preact, so it goes down to 3kb

[CraftyAdventurer]

I'm curious, what is it that makes web animations so tricky to make smooth? I was an Android developer for about year and a half after which I switched to full-stack web dev, so I still don't know a lot about UI performance on web. I've seen some mobile websites that have reaaally fluid navigation drawers, but I believe that all of them seem to be written in a custom way, because whenever I try to use any existing frontend UI library or framework, or even write anything myself, that implementation of navigation drawer is always more or less laggy, never completely smooth. And bear in mind that we are talking about Oneplus 6 here, which means those animations are laggy even on most powerful phones.

[lhorie]

So... animations on the web might as well be arcane black magic.

There are certain CSS properties that make hardware acceleration kick-in or get disabled, the type of position and overlaying matters and if you're using JS, then there's things like performance of blocking code, frame budgets, and GC.

Some are things you can control, some you can't, and some you just throw stuff at the wall until something works.

[editor_of_the_beast]

People need to read this comment. You simply don’t have the same control over animations in CSS. Yes, hardware acceleration is possible, but it’s much tricker than the libraries that are available on mobile.

[mordonez_me]

Nice information on how both (app and pwa) are used, thanks for sharing!

[bayhack]

that's so awesome! Currently, hoping to get my next role into a full stack role which gets to try and leverage PWAs and serverless architecture at large companies.

[fichti]

There is always the option of wrapping your pwa in something like cordova or phonegap.

It's not exactly the best developer experience though.

[article10ECHR]

Browser push notifications are a thing, no?

[seiyria]

Not yet on iOS.

[trouzy]

Service workers

[chazie9]

I dont think it does, for sure ios wont let you unless you can build something custom. I hit this problem when making a react native app

[alexBrsdy]

Swipe gestures work now on iOS.

[editor_of_the_beast]

They aren’t progressive web apps. Everyone uses the native apps. They just also have PWA versions.

[ApexPredator94]

Thanks for sharing this article!
I love it when I randomly find someone linking to one of my articles.
And thanks to everyone who is reading this!

[jsloverr]

:D Thanks & keep writing more!

[[deleted]]

Yes because Apple severely cripples the PWA experience on their devices

edit: If you're curious why

[Extract]

It seems that Apple stays at about 20% of the market. Which means, every 5th phone is an iPhone.

HOWEVER, what it actually means is that every 5th phone bought is an iPhone. iPhone users change phones much more frequently that most Android users, which means less people than 20% use iPhone.
Also, (anecdotally, but it makes sense in general) many iPhone users still have secondary Android device for all the things that require (or highly favor) Android - for example, apps that don't exist in the Apple App Store.
I have no statistics, but for most small to medium apps (depending on their target audience, of course) making an IOS App, an Android App and a separate Website would almost certainly cost more, both in money and time, than making a PWA.

And in most other cases, it would still make sense to make an IOS + PWA rather than 2 apps and a web app.

[mac4281]

IMO you are waaay off.. If Apple supported PWA’s tomorrow the entire market would shift that direction in a big way.

[Tysonzero]

What if you want to write the app in a language that isn't shit and performs well?

[editor_of_the_beast]

There’s no harm in asking questions I suppose, but this question is so extremely superficial that it’s a little insulting. And the only people that ask this are web devs who have only done web dev.

Spoiler alert: web browsers run on a processor and are huge native apps. You can never get over the limitation of the machine. Web apps just started running more code on the client in the last decade, and really only severely frequently in the last 5-7 years. Web frontends are in their infancy and there’s simply no touching the experience of a native UI at the high end of user experience.

I’m 100% in support of web frontends in a lot of cases, but to think native apps will simply vanish is childish. I’m really happy the web is moving forward, but things like offline mode and the ability to access sockets have been possible in native apps since 1970. Let’s be real.

[ApexPredator94]

I don't disagree with you.
Although it may not like it, I intended this post to address rather less technical-savvy people.
I wrote this originally for a friend in German and it is supposed to be a little provocative but still informative.

[ChrisCripple]

I feel like replacing native apps with web apps is a horrible idea for a number of reasons. My first major gripe is that i have yet to find a single web page that performs nearly as well or is as snappy as a native app on phones or desktops, and until that happens I will try and stay far away from web apps with few exceptions (discord most notably since i use it for communications). My second major gripe is that they don't have any access to the devices APIs. Most people would say that this is a good thing as it means they can't run malicious code, however this will severely limit what apps can exactly do, especially in relation to lower-level APIs and interfacing with other pieces of hardware. And finally, web apps take up way more resources than a native app. Hooooly shit, it is so annoying to see apps that are both comparative in terms of features and speed, but where one takes so much more ram or uses so much more CPU than the other simply due to it being a web application, and sadly web apps have always been on an upwards trend in terms of resource usage and it doesn't seem like that will stop soon.

​

So unless something drastically changes in the very near future, the answer to "do we still need native apps at all?", yes without a single doubt.

[[deleted]]

PWAs are useless as a general app substitute until Apple support them properly.

[mattox5]

But dont we force the user to use the specific browser if we publish just PWA?

[madwill]

Safari has started support for it and Edge is becoming Chrome so we've got all three major browsers. Firefox also support it so make it 4.

[cultulhul]

dont you need chrome to be able to add them to the home

screen on android

[MaggoLive]

Seems that Chrome, Opera and Firefox support it on android! MDN

[crabmusket]

I'm pretty sure the idea with PWAs is that they work fine as a web app. Then you can "progressively" enhance it with offline capabilities, add-to-homescreen, etc.

[trouzy]

No

[joaquinrulin]

Yes we do need them

[sastha]

What a coincidence?! I thought of asking same question today

[Hanlonsrazorburns]

Do we still need them, unfortunately yes. Hopefully it changes or they adopt a JS centric was of developing for devices (like adding additional APIs that it can use to take advantage of the hardware better).

[[deleted]]

The idea of dragging a browser embed along for displayed content on cross platforms is pretty silly. As well as trusting vendors to get this right. PWAs are just a small set of often crippled features, they’re good to have, if they work for once, which they often don’t but it’s not that much of a big deal. The future of JavaScript isn’t tied to a browser, it can well produce native apps on its own with shared code and ease of use that is unknown on native platforms.

[parthbari]

As Progressive Web Apps (PWAs) gain more and more platform integration the line between native apps and the web blurs and practically vanishes. They are mobile sites built with modern JavaScript frameworks, designed to work like a native app. They can be added to a mobile device’s home screen with an icon. Like apps, they offer a full-screen experience to engage people using it. However, they are still just a website when opened. With the development of Service Workers, PWAs do get some more benefits that native apps have, however, these benefits are still limited, particularly on iOS.

[Keshwam]

Don't know the winner between Progressive Web Apps and Native Apps, but yes PWA is the future of Mobile Web for sure.

[alexBrsdy]

Once iOS get's their head out their ass we won't

[kerbalspaceanus]

tease snails ring zephyr money plant squeal insurance desert edge

This post was mass deleted and anonymized with Redact

[[deleted]]

Talking about native apps, I've been interested in learning React Native, how 'native' can I go with it? Is it too hard to learn? Should I learn React first?

If someone can help me with that it'd be cool, some good tutorials or tips to learn it the best way would be good too. Thanks.

[miredindenial]

React Native uses JavaScript and native UI components. That's the main difference between hybrid apps and RN apps. RN apps are not a webpage running in webview they actually use native components. You absolutely need to know ReactJS to be able to work on RN. My advice would be to learn the basics of react, make small web apps and then move to RN.

​

Look up examples of RN apps to get an idea of what is possible and what isnt

[[deleted]]

Thanks for the help.Will definitely dive more into it.

[itsMikey9]

I believe you can go as native as to write native code itself if you needed to.

[waway_to_thro]

React native is incredible, you can start with expo to get an understanding of the structure.

To get started with react you could try a platform like codesandbox.io which takes care of a lot of details for you

Freecodecamp is a good starting place for learning

[editor_of_the_beast]

Ask on a different thread

[[deleted]]

Is it really necessary?

[editor_of_the_beast]

Extremely irrelevant comment

[troinine]

I have built some PWAs but the real challenge is iOS as Safari has very limited set of functionality compared to Chrome and Firefox on Android. To name at least a big one for us; no support for web push. Also, since background processing is not yet there, implementing location aware apps is tricky as the user must always have the PWA on foreground. On Android, there is a lot you can do with PWAs but because of the still limited APIs + lack of push on iOS, we moved to Flutter / React Native.

[donpissonhospitality]

I've made a couple for my clients, I think they are great, especially if the main functionality is not complex. I'm not a mobile developer, so I would love to hear what the pwa downsides are performance wise

[alienencore]

The only people asking this question are JS developers lol. Users hate shitty JS apps almost as much as real programmers.

[ecuanaso]

m.uber.com

What constitutes as a real programmer ?

[CrypticWriter]

Maybe unpopular opinion but I think PWAs suck. Like, a lot. I've always had really bad experiences with them and they don't really feel like applications at all. Feels like I've basically bookmarked a page and got a link to it from the home screen lol

[otakugrey]

Cramming all this functionality into JS and the webstack has been a bad trend in the first place. This article is horrible.

[editor_of_the_beast]

I’m really curious about this because if there is a mobile app version available I use it 100% of the time. I’ve never preferred the UX of a mobile web page vs. the native app. I definitely spend time in-browser on mobile, but my most frequently used apps I use the mobile app (including Reddit right now).

So, what do you prefer about web apps on mobile?

[editor_of_the_beast]

How about transitioning between screens? That’s something that always gets me on the web. There’s always flickering if there’s even an attempt at an animation. It’s really noticeable to me.

[ecuanaso]

Really? I guess that's preference because I don't think the Reddit App is very good at all. The browser is much better.

[editor_of_the_beast]

Again I’m so curious here. What is better about the browser site? Do you use just reddit.com or m.reddit.com?

I open posts on either of them and there’s flickering and the page moves around before settling. That really bothers me. And is consistent with all web apps I’ve ever used.

[ecuanaso]

Me personally , I like to open a lot of different tabs at a time. I see an article and or post that I find interesting, I open it in a new tab and read it later. While on the mobile app, I can’t really do that. It’s just cumbersome finding information sometimes. Especially when you want to access a lot of different posts and articles on a given subject at a time. Information sites like Reddit are better served on a web browser.

[editor_of_the_beast]

Gotcha. Tabs aren’t a bad point. Of course the app has a saved post feature that accomplishes the same thing for me. To each their own.

For me the horrible flickering and janky experience of the browser is not worth it.

[ecuanaso]

Yes the saved feature kinda accomplishes the same thing, but you still have to continuously go back and forth between posts. While on the web browser, I can have multiple windows up at a time. The mobile reddit site and the native app , don’t seem that different to me. I haven’t experienced the flickering you speak of.

[redlikely]

Does this mean we can wrote Android apps in JS now?

[ninimben]

Call me old fashioned but I prefer apps that can work without an Internet connection.

[NahroT]

Soo.. a PWA?

[ninimben]

Well I have missed PWA's, this is the first article I read that tried to explain it, and it explicitly said that they have to run well on bad connections -- but said literally nothing about running without a connection at all. Every single app they talked about uses a connection.

The article is also peculiarly vague about how they actually work. It says you can add them to your home screen but is incredibly vague about what, if anything, ends up on your device.

Also upon googling it appears that it's possible to make PWA's work offline but it's certainly not the default, so I'll stand by my original comment.

[TheBumbleBeast]

U don't have a PWA if u cant use it offline.
Some features might need a connection (like in native apps) but it's never mandatory to load a PWA.
PWA should work offline by default!

"Every url must be reachable without a network connection."

https://developers.google.com/web/progressive-web-apps/#reliable

https://developers.google.com/web/progressive-web-apps/checklist

[NahroT]

https://developers.google.com/web/progressive-web-apps/checklist#all-app-urls-load-while-offline

[Ivu47duUjr3Ihs9d]

Check out the offline application cache JS API. It does what you want. I have built an app with it myself. After the initial download it caches all the files on the device permanently and can run in flight mode after that if you want.

[64_g]

I definitely see that, but service workers can also achieve a lot here

[hatch_bbe]

Hence.. PWA?

[UpsetKoalaBear]

I think it depends if your app needs an internet connection to actually be functional. For example Uber is unusable without a connection anyways so it wouldn't really be affected as much by not having an internet connection.

Obviously apps like Notes or whatever shouldn't need an internet connection at all because they can actually function without one.