Ten years ago not many of us had been fortunate to own a smartphone. Nowadays that number has drastically improved, and it is increasing every single day. The number of daily registered Android and iOS devices is crazy. Take a moment to think about it. Is there a person you know that doesn’t use a smartphone? If so, how do they get connected with the outer world? What is their source of news? How do they talk to their friends? You get the point – everyone around you is using a smartphone (even more than they should). It doesn’t even matter what smartphone they use. Nearly every smartphone is capable of the basics needs of an average person.
As developers, we usually tend to overthink and make a connection between application complexity and user satisfaction. But in the real world, average smartphone user doesn’t care which technology you have used on the backed nor whether it uses the latest GraphQL API to fetch the data. All the user wants is the ability to control the device in their hand and not let it control the user itself. Sounds so simple but it is the hardest thing from the developer’s standpoint. It’s 2018, and we can build mobile experiences in different technologies. The most common debate so far is the usage of PWAs over the traditionally written native applications.
What is the PWA? A new sauce for the best user experience?
PWA stands for Progressive Web App. You’ve heard it right – there’s a word web inside that name. If you’re thinking in your head right now that we will cover native mobile experiences that contain web pages in web view you’re wrong. That alone doesn’t make any sense to me. Instead, we will see how can you make your web application run natively on any mobile platform with the least effort available.
But first, let’s look at why would you consider that. Remember our rule? User experience first and application’s complexity as second. Imagine a rather common scenario. You’ve just landed in a foreign country, and after a long flight, all you want to do is go to your hotel room. The first step is to find a bus that will take you to the city – the airport advertises their mobile application for foreigners so guess what? You’re a tech geek, and you’ll want to try it. For the first time in several months, you open that App store again and search for the advertised app.
That process alone takes ages since public wifi is usually very slow and unreliable. You’ve finally found that application on App store and the nightmare begins. It’s “only” 40mb, and therefore it takes a long time to download under mentioned circumstances. You’re tired, but still, you don’t want to admit that you and your tech habits are wasting your time and energy. Finally, the application gets installed after a solid 15 minutes of waiting, and now you have to sign up for it. New password – no short phrases, must include a capital letter, number, a serial number of your phone, symbol and so on. Now you have to confirm your email address – the internet is still slow. It takes half an hour if not more to get information on how to get to the hotel.
What could be done better there? It’s just the slow internet that ruined your experience, right? No. The 40 megabytes you’re downloading are not necessary for that one future you will use for the next 10 minutes. The whole user experience got ruined. The time you waited cannot justify the outcome you’re getting especially when that same thing could be achieved in one-tenth of a time. Imagine being able to scan a QR code or enter a URL in your favorite browser (that is already on your home screen) and get the same experience as you would with native application once installed (but in one-tenth of a time)? Pretty cool right?
The average native application has 40 megabytes, and it takes time to install as well. On the other hand, websites take about 3 megabytes on average and require no installation. There’s a huge difference in time. Oh and I forgot to mention the hassle of developers maintaining applications for both iOS and Android platforms is just not worth it anymore. Maybe with React Native but that story is for another time.
But… Web applications don’t have a place on a user’s home screen as native ones do. They require a steady internet connection. They cannot take full potential of the phone. They do not have native-like notifications. They underperform in many scenarios. That alone will make the user feel insecure when choosing one over the other. Well, all of the mentioned things are false, and we’re about to see how.
Progressive web applications exist to close the gap between native and web applications, and they are achieving that with a bit of help from the modern browser. The first thing you need to know about PWAs is that they’re just regular web applications that are optimized in a certain way so they can take full potential of the mobile device and behave like native applications.
Installation Process
The first thing that comes to everyone’s mind is how do you install them? Native applications are present on the App Store on iOS devices and the Play Store on Android ones. Since PWAs are just enhanced websites, they require no time to download and install or better said they are downloaded on the fly as regular sites do. By being able to do so, the first screen the user sees is shown way before the one on the native application.
The whole process of search, wait to download, wait to install is simplified to just search. Once on the website users can opt-in to save the application on their home screen. If they forgot to do so, and the browser sees that they visit that URL often, the browser will suggest that they install it on their home screen and get the native-like experience. Being able to download stuff on the fly is very nice as it saves a lot of user’s time and data. Developers can make use of module bundlers, server-side rendering, and lazy loading to maximize the performance of their web applications.
Offline Capabilities
You heard the word web and native a lot of times by now. And it’s obvious that regular applications work offline – at least one portion of them. PWAs do as well – in the same way. Because PWAs use service workers in the background, they’re able to download all the necessary files on time. By doing so, they can work offline and load way faster when connected to the internet. Service workers use smart caching and therefore make the whole experience seamless to the user.
The only way the user will know he or she is not connected to the internet is by being unable to fetch the new data, but at the end of the day that is the same experience, they would see in the native application. As the developer, this is important to you as well, because you can now ship new features and bug fixes without bothering users with updates.
Performance
Another big selling point of native applications is performance. Writing native code is sure faster and more secure than writing JavaScript on the web. The V8 engine behind JavaScript is written in C++, and it is blazingly fast. By using best JavaScript practices you can for sure minimize that gap. Recently WebAssemly was released to close that gap completely by providing the ability to execute assembly-like code nearly as quickly as native machine code. You don’t have to learn it because Webpack plugins can already convert your JavaScript into WebAssemly and make your applications way quicker.
This is probably the first time I mention JavaScript in this article as well. JavaScript is the most common language to write web applications and therefore by knowing JavaScript you’re able to seamlessly reach your audience on both Android and iOS. As a developer, you have the freedom to chose whatever framework you want since PWAs don’t rely on them. We’re getting into a cross-platform development here again, and I would like to let you know that building layouts for your mobile application never got more comfortable. Since PWAs are just regular websites, you can use plain HTML and CSS to define and style your mobile application.
Is the web the new native?
So far we’ve covered the installation process, offline capability, and performance. I hope I was able to make you rethink the way we build mobile experiences. The only thing left to discuss is whether this movement of PWAs will become a standard in the future and completely replace the native world of applications. The short answer is no or at least not yet. Even though 20% of companies abandoned their native applications in favor of PWAs I don’t think that this trend will become mainstream. Sooner or later more companies will shift towards PWAs for many reasons including ease of use, size, convenience, and development costs, but banking apps, games and VR/AR experiences will wait a bit until modern browsers get ready for the new era of progressive web applications.
19-year-old JavaScript brainiac.
Founder of 30 seconds.
GitHub’s Trending Developer.
Product Hunt’s Top Maker.
