loading...
Cover image for PWAs are our future

PWAs are our future

stefandorresteijn profile image Stefan Dorresteijn ・4 min read

Progressive Web Apps and how to build them (2 Part Series)

1) PWAs are our future 2) What's next for PWAs?

I am confident in predicting that we will see Progressive Web Applications (PWAs) take over from native applications in the next few years. In fact, I believe at least 80% of new non-gaming apps on mobile phones in the next 5 years will be created using web technologies.

PWAs have been around for 12 years

Steve Jobs was right in 2007. Not only was he right about what mobile phones would look like for at least the next 12 years, he was also right about what mobile apps should look like. He announced that the standard format for apps on iPhones would be what we now call HTML5. Apps would require no SDK, have easy access to native functionality, and thus be easily buildable by anyone with a web development background.

It didn't take long for Apple to decide this was no longer the direction they wanted to go. They introduced the iOS SDK and native development became a lot more complicated. Functionality that was intended to work in-browser became native-only, forcing developers to learn new languages and shift towards becoming native developers.

Since then, web development has grown a lot. Many web applications are now more feature-rich and impressive than their native counterparts. JavaScript has become a force to be reckoned with and with the introduction of PWA support in both Android and iOS, there's a real future where web developers can build native-ready applications without needing to learn an entirely new language.

PWAs are the best of us

A Progressive Web Application is not like any other web app. There are a few characteristics that these specific applications have, and a couple requirements that need to be met in order for an application to be considered a real PWA.

R E L I A B L E
A progressive web application needs to be accessible even when there is no internet connection available, and that doesn't just go for one "We are not currently available"-page. Every URL needs to be accessible, even if it's just to show the data that's been cached. On top of that, PWAs have to be served over HTTPS, need to be responsive on tablet & mobile devices and the entire site has to work cross-browser.

F A S T
A progressive web application needs to be quick. It needs to be quick enough to not drive a person insane when they try to load it on a 3G network for the first time. So get that async script loading up and running, remove some render blocking CSS and optimize the code that's still there!

E N G A G I N G
Last but not least, a PWA needs to be engaging. It needs to feel like a native experience, that's smooth and acts consistently. No janky scrolling, no waiting for navigation to happen and when there's an important update you need the user to know about, your PWA can even support push notifications. Maybe most important to the native experience is launching the app. These apps live on the user's home screen, meaning they need to have a manifest containing all the necessary icons and have functional splash screens while your app loads in the background.

Support is growing

While originally designed to feel native to mobile devices, PWAs are being supported more and more, including a recent update to Chrome (73) that made it possible for PWAs to be installed on Chrome OS, Linux, Mac and Windows PCs. Of course not all features are supported immediately, but as PWAs become more popular, so too will their features increase per platform. Currently, only Chrome on Android supports all major features you would want in a PWA, but Apple's Safari (on iOS) is quickly following suit. Soon, there will be no real difference between the capabilities of a native app vs those of a PWA.

It's so easy

Building a PWA is incredibly easy. If you have any experience working with VueJS and their CLI, you'll have probably made a PWA already, even if you don't know it yet. Yes, PWAs have strict requirements and need to work really well, but it's no longer difficult to make your pages feel quick and smooth.

PWAs are not some obscure technology anymore that you need to figure out by combining 12 different StackOverflow posts. There are plenty solid guides out there for writing these applications and optimizing them for every OS. Google has an incredible guide on how to create your first PWA without using a JS framework, and there are many guides like it for different frameworks and standards.

In future articles I'll write a guide on how to get started with PWAs in VueJS so if you're as in love with Vue as I am, then stick around!

In conclusion

PWAs are the future, as they are our past. Google might have coined the Progressive Web App term, but Steve Jobs envisioned them over 10 years ago. There's a future out there where you write your native-like applications using JavaScript, without having to go through difficult build steps and frustrating app stores. With nearly full access to a device's native functionality, PWAs are bound to take over from native applications and become our #1 way of creating incredible experiences on all devices.

Progressive Web Apps and how to build them (2 Part Series)

1) PWAs are our future 2) What's next for PWAs?

Posted on by:

stefandorresteijn profile

Stefan Dorresteijn

@stefandorresteijn

I'm a lightly bearded author, software architect, startup CTO and gamer. I run PodShare.io.

Discussion

markdown guide
 

To take a counter point.

The purpose of native apps is to supplement the slow progress & feature lacking options of web/pwa etc.

Access to the latest APIs & features, extra testing, robustness, security, performance come from being full native. For most basic data apps, PWA is good & cheaper from a dev standpoint but native is native (different OS handle different rendering/animation etc). The gap is smaller but still there.

In the end, they want thin client but I want thick. I will always buy thick so I think both will exist (my data, my device, my rules, my lockout vs their control). We are already seeing a shift back towards individual control.

 

Thanks for your comment!

I think this is true at the current time. PWAs are being supported, but features tend to come later to them. However, as more, larger companies start using them (as Uber, Spotify and AirBnB already are), they'll be prioritized when it comes to rolling out new features as well.

When it comes to individual control, I don't think there's an actual difference between running a PWA or running a native app. Both contain code you have no control over, both do things with your data you're unable to see and both have to ask for permission to use your native functionality. I believe a majority of app users won't even be able to spot the difference between a PWA and a native app, let alone decide not to use something because it's web-based.

 

This is it. If you are sending a bunch of listings & a couple of clicks, then PWA can do.

But if you want an AR with Facescan Siri video morph that has pencil support, PWAs always lag (browser/spec/companies etc). Unity/Unreal/3D worlds/sensor access are more reasons.

For me, it is the same as it as always been (built a lot of apps since store launch)... use the right tech for the job you need. Native, webview, hybrids, pwas, voice, framework whatever. I don't really care for trying to define it with words & just try to pick the right one. It's all just 0101010s.

PWAs have a big future. Native has extra/leading edge. Stadia & Arcade are coming for extra considerations.

Oh I completely agree that PWAs are not going to be competing with the significantly more advanced apps out there. Use the right tools for the job, but I think a lot of apps out there that are currently native could easily be PWAs and would actually improve if they were written as PWAs.

That is 100% true, with better resource allocation, speed, progress etc. Almost all listing apps can be PWA, many will be better faster. This applies to the web even more so. A million frameworks of thousands of lines to deliver 400 words, a couple of pics & btns.

Big tech politics plays various roles too.

Native is basically the default 'never wrong' right now (PWA & break your business vs "I did it the traditional way, it's not our fault") plays in too.

I like competition so I like all options. Be nice if there were more mobile operating systems, browsers, datasets, UIs, methods etc.

80% sounds about right, I'll make some of those. And some of the 20% too. 😃

 

I'll be a bit frank here, but I really looked around for dev.to android app, eve though its PWA = Android APP.
Call me Ol Fashioned but good old apps feel good. PWAs have this weird scroll, and dont feel as seamless.
Plus exposong every other api to web is a honeypot.
Right now when I give a certain permission I know, some app is using them but I've seen carriers injecting scripts into webpages, so a big no to PWAs from me. I would rather permit a shitty app to send a notifications to me than a PWA.

 

Thanks for the comment!

I'm not sure your argument against PWAs is entirely fair. Yes, when bad people want to do shady things, they can use PWAs to do those things. You still need to give the web app the permissions it needs to use the native functionality it's asking for so you have a decent amount of control over what the app is allowed to do.

When it comes to the quality of the PWA, that's where Google's standards come in and should be followed rigorously. Scrolling should feel completely natural and feel exactly as seamless as a native app. This is an achievable standard but it takes some attention from whomever is developing the app.

 

If we are going to turn PWAs into another walled garden(google standards etc), dont you think native apps already are there? Im sure we can have good things with Web assembly etc, but aren't we just coming to the same concept back to a kind of containered, "controlled" experience?
Somehow I think PWAs will end up just like how apps are like now, sandboxed, monitored and walled.
Unless an average Joe can Code. Companies will always want to protect their users's experience?
Somehow we end up going up and down the same lane/cycle.

The good part is that pwas don't need to be delivered through walled garden type of environment that is Google play or app store so you've got some freedom here

I think you misunderstood me here,
PWAs can be very easily injected with scripts, which can run unauthorized code onve permissions are granted, which will create a scenario where we will revert to a "verification process" and we are back to walled gardens

PWAs can be very easily injected with scripts

Try injecting scripts into a HTTPS connection, which PWAs must use.

hi mao,

here I created a detailed step by step article for creation in PWA. I guess this will help

 

With the way PWA are currently working, their performance will never be even close to what you can do by building a native application. This is especially true for games and generally anything that has complex UI and thus requires multiple threads in order to work properly.

Either web browsers or mobile operating systems need a fundamental change in the way they work for PWA vs Native to be comparable in terms of performance.

Soon, there will be no real difference between the capabilities of a native app vs those of a PWA.

I can always tell the difference. And many other people can tell the difference, although they aren't sure exactly how it's called and why some apps feel less smooth and look less polished than others.

I always know when an application I download from the store was built with something like Cordova. You can feel the laggy way the webview scrolls, where the whole application is rendered.

Also, this seems really weird:

your native-like applications using JavaScript, without having to go through difficult build steps

Are you saying that projects which end up being a PWA don't have a complex building step? You even mention Vue CLI: there's your difficult build step.

The tone of the whole post seems to somehow put JavaScript and web development “above” developing native applications. With no explanation and no good rationale you conclude that people prefer working in JavaScript instead of building native apps in different languages, and that PWA will somehow save us from... what exactly?

Native applications aren't going anywhere anytime soon. Improving your web app and making it as best as possible is obviously a good thing, but thinking that this somehow replaces a native application in every aspect is just plain delusional.

 

These are the arguments that have usually resulted in choosing native so far. Dev pain is ignored.

PWA can replace for other gains but pros can see (little details, ordering, performance, render etc).

The gap is closing for most infoapps.

 

The gap is closing for most infoapps.

Not for the viewpoint of the customer.

 

The only thing that concerns me about PWAs is
S E C U R I T Y

 

Could you expand on this concern? Would love to learn about your specific worries

 

As a developer point of view, PWA is so much awesome for me. I can see building myself for the web and making the application reach a lot more users.
However, When I am using a PWA application as a user, I have no idea what's in that PWAs code. There is nothing such as google play store or app store to check and verify the content of the app and how they might be using all the permissions and the device.

I don't think you can trust all apps in the store, anyway. You can't check what's the code in a native app but you could inspect the assets of a PWA.

Yes, I definitely can not trust all the apps in the store. However, It puts a sense of security in the users' mind that the app went through an approval process.

more or less the approval process is just a formality, in case fo play store at least.

 

Thanks for the article, Stefan!

I also agree PWA is the future. Since some features of PWA might be automated, for example, prefetching, offline first, smooth navigation, I started an opensource project for that automation github.com/sirko-io/engine. There are more things to do, but first steps were already made.

 

Turn off your wifi on your phone plus go to a dead zone. Now think about third world countries that don't have service everywhere in or in the woods? Then used the app. You will see why it's good to have entertainment or an app to keep you busy... Think your iPhone or Android can potentially go back to an iTouch then try to make use of your phone without service. #biggerpicture

 

Yep, this is exactly why I love the idea of PWAs so much. I often lose internet access in the train and then suddenly I'm unable to access the websites I was previously looking at? That doesn't make much sense to me. With PWAs you can do a decent amount of caching and give the user access to anything he's loaded before his network went down. Or, you can even prefetch a bunch of content for the user, so your entire app keeps working.

 

I do like native apps, both as a user and as a developer, but I think you have a point. Most apps could be replaced by their PWA version and we won't really feel the difference.
Almost all of the apps I build now are hybrid with a custom framework I made for my company, and I like that approach. The native framework handles offline usage and hardware access, but the presentation layer is mostly made by webviews, except for a few native controls we use for some customers.
The advantage is having a web developer work on the presentation layer and give him freedom to use CSS for any visual effect he needs, and you can share code with the website.

 

Nice article, nice discussion!

I agree to all the pros and cons regarding performance, native UX, security and so on.

My point of view comes mainly from working in a young Startup, and our system contains 2 web based frontends, one of which is stand-alone, and not fed by an online server. Thinking of adding 2 native apps to this architecture would kill us. So PWA's are just awesome, not to forget Web Assemblies when it's about higher workload.

Anyway, the part I most like in PWA's is the first word - progressive. To reach a full fledged native app, you need to invest much more than when you can start with a pure web app at first, closing the circle to the user early, adapt the design .. and let it grow step by step into a offline supporting app. That also sounds more natural to me, like a child learning to walk and grow up...

But thinking of the bigger picture. Native apps vs. PWAs is like C/C++ against C#. The latter will never replace the basic technologies, which let us stay closer to the hardware / native interfaces.

 

My point of view comes mainly from working in a young Startup, and our system contains 2 web based frontends, one of which is stand-alone, and not fed by an online server. Thinking of adding 2 native apps to this architecture would kill us. So PWA's are just awesome, not to forget Web Assemblies when it's about higher workload.

Yes I do share a similar view, being also in a young start up. PWA's cut down extra development time by a huge margin when the development commences on a web app basis. However, I do prefer native. The only reason PWA's are a go to for most young startups has to do with the workload and human resource available.

Anyway, the part I most like in PWA's is the first word - progressive. To reach a full fledged native app, you need to invest much more than when you can start with a pure web app at first, closing the circle to the user early, adapt the design .. and let it grow step by step into a offline supporting app.

Yes, that may be so, but so is any development life cycle progressive. Developing natively can take a progressive approach. Identifying and aligning the right requirements to start with can help make native feel as progressive as well. All apps have room to improve overtime.

 

Nice article and the comment sections is awesome!

But a month ago, I was decided to implement a PWA for my company and started some upgrade and stuff. But something told me, "take a time to see a little bit of Flutter" and was a right decision too.

But I'm back to the first step, PWA is awesome but Flutter gives me more productivity and direct to the business part, doing even less customization (CSS) and layout decisions.

I guess the navive x PWA anyone can search and study the differences, but has a new guy in town and his name is Flutter, and the page was turned (again).

Now we need to discuss another topic, Flutter vs PWA hahahaha

 

I am skeptical if this for the only reason that iOS hasnt followed suit and I guess it won't do it as well. They have a big engineering team and if they wanted to support PWAs, they would have done it by now (not having push notifications, native add to home screen and a few others)

I feel they want to exert a better control over the ecosystem and with PWAs working out of the box, their 30% commission would be in danger - also with the risk of ruining user experience and lack of security thereof.

PWAs are here to stay but to beat them on iOS would be tough.

 

Apple is actually behind on multiple fronts but finally catching up (which was showing during the last WWDC).

If you look at Jake Archibalds: Is ServiceWorker Ready you can see that it has been updated to YES, since iOS 11.3 (this all started with 11.1 and later), which quietly shipped full Service Worker support.

The next big update came with iOS 12.2 adding a PWA browser and other full-fledged support features. Yes, it was all in Beta but this shows the intent of Apple.

In short: iOS is following suit .

 

If that was the focus, it would have come up in iOS 13 - unfortunately, it did not. Until web push and background sync is done perfectly, none of it matters IMO

Those features we're not present in Chrome when PWAs landed; the whole point is that all these features are additive. They are progressively enhancing the applications.

PWAs are much more than those two, and it matters, even if it doesn't matter to you.

 

Writing tip: Don’t assume your readers know what an acronym means, even if it’s common in your domain of expertise. Particularly if it’s common in your domain of expertise. Don’t bury the definition 1/2 through your article.

 

Good point! I've edited the first line to include the definition. Thanks!

 

I didn't remember Steve Jobs talking about Web Apps. Heres the video: youtube.com/watch?v=ZlE7dzoD6GA
It really sounds like he's talking about PWAs 😄

 

My dream come true for the future of mobile app development would be something g along the lines of flutter, but that is based on webassembly. This would open the door to more languages being supported, and also the ability to write high performance games, of anything else you could imagine. I doubt it will happen, but it would be pretty cool imo

 

I'm actually working on a site that will have all this information (and more!) listed per browser. I know for iOS a user needs to turn on sensor information themselves, but I'm not entirely sure how much sensor information you get access to. I do have a project I need to use sensor data for though, so I'll find out and get back to you!

 

PWA's seems very promising the way its being nearing the gap towards Native apps.Saying PWA's will uproot(in next 5+ years) the native apps and the related ecosystem is entirely wrong and neither PWA's will be dusted away as well.For any organisation to come up with a mobile app ,tough choices has to be made like
Time to Market,Cost Effectiveness, Maintenance , Performance.

These factors play a pivotal role in choosing native over PWA's or vice-versa.If cost effectiveness is the priority over optimal-killer performance , PWA's is wining the battle already and its trending.More and more companies are leveraging their developers already known web technologies to build PWA/Hydrid Apps using React native/Phonegap/Ionic.

On the contrary, building data rich & enhanced user interaction apps with multi-threading rendering screen in micro seconds Native is clear winner.

Apart from these factors, companies like Apple and Google earns a major slice of revenue from app stores and google stores.They wont encourage axing their revenue slice by letting PWA's becoming a major threat.Both PWA's and Native are evolving and giving a tough competition, leaving behind choices to user to use their due diligence.

 

1) web games suffer from too much performance issue and apps like Unity blow it away. Never happen

2) Xamarin forms are so much faster to develop cross platform that many companies have drop web apps for it. I’ve been a few. Sorry web, on Spa’s at most

 

It's not true that building web apps is easy. Web is one of the more difficult platforms to build rich interactive UIs.

 

Isn’t Apple support for pwas still pretty bad? Like you can’t even do push notifications for pwas on iOS

 

iOS has some serious catching up to do, but it's coming. They've been making solid progress on their PWA support.

 

where do you follow iOS PWA updates?

Currently following WWDC19 very closely to see if they announce push notifications for iOS, but mostly I follow all the big dev blogs.

 

Amazing Article..!!! The loading time of PWA is approx. 2-3x faster compared to responsive designs. Google mobile-first indexing helps it to express the high speed of PWA.PWA is the future of mobile app development.

 

but Apple's Safari (on iOS) is quickly following suit

PWAs on iOS are not viable. Apple just announced major investments in the Swift ecosystems (SwiftUI) they won't cripple their own app store.

It just won't happen, they will always make sure that PWA can't be as good as native iOS apps.

On Android the picture is different, on desktop PWAs are great for perfs and to deliver a better UX.

I'm a front end with 6 years of experience and design too, next thing I'm learning is React Native or Swift.

 

Great article - we very much agree! What the PWA needs is a high quality platform for organizing and sharing of the many great PWAs. We solved it with weshareapps.com. 🙌

 

Can you please share some resources so that I can start learning about it since I'm a junior developer some resources or articles seem like alienated and doesn't explain the need of certain things

 

Native: access to latest tech. d/l before, built for device, optimized, more features. AR/VR etc. More API access.

Progressive web apps: easier dev, less features, better workflow, cheaper, getting better. Can do most Airbnb type stuff. "web, for apps".

 

But what about bleeging edge technologies like AR and VR? Can the possible leave native?

 

These types of technologies are one of the reasons why I see 20% of apps still going for Native. Web is super strong, and very useful for most apps, but there will still be use cases where you need that native boost.

 

What do developers consider best practices and productive tools for building PWAs? Has anyone written widely on engineering such solutions?

 

There are many articles on building PWAs and a few standards set by Google. I'm going to be writing my collection of best practices on Dev.to soon as well, including tools I use and results I'm looking for.

 

Much like the many have said here. It's not there yet, but like you've mentioned. In the near future I see no reason why PWAs won't be logical for many use cases

 

is there any plan to add PWA to smart TVs? writing an app for smart TVs is a pain in the ass.

 

Thanks for sharing detailed article :)

 

M I L D L Y I N F U R I A T I N G

 

The problem with these kinds of predictions is it's not a technical problem. "Apps" could be made with web tech for a long time, but there's still a lot of native. I didn't read this whole thing, TBH, but there's some irony in bringing up Steve Jobs. PWAs won't be a thing on the iPhone because Apple doesn't want them to be. Full stop. "but Apple's Safari (on iOS) is quickly following suit". It's not.

 

Yeah, keep waiting. Hopefully it will land before 2050, the new buzz word for the end of the world as we know it.