Many say that PWAs will be the new standard in the future world of mobile apps, and they’re probably right! With tech giants behind it, Progressive Web Applications became an amazing technology that will soon make native applications obsolete.
What is a PWA?
The Progressive Web Application is a relatively new concept in the mobile and Internet world. PWAs are developed using certain technologies and approaches to create apps that take advantage of both native and web application features. Essentially, it is a mixture of mobile and web applications.
Thanks to the concept of Progressive Enhancement they work no matter what browser you use. PWAs give users a great experience on every modern smart device - phone, tablet, PC, you name it. Even though they are ‘just’ web applications, PWAs act like a regular native app (with some limitations of course).
The cool thing about Progressive Web Apps is that they are not like other regular web apps you’d find on the Internet. They have access to internals of your device, so for example, they can utilize sensors such GPS to find your location, accelerators or camera (even with advanced controls!) and many more [for more info check out What Web Can Do Today?].
PWA concept as a whole allows for easier user engagement with your content. Since the semi-native app can be saved to your app drawer and send notifications to your device, more people can come back to it. It’s much more convenient to just tap on an icon instead of typing the whole URL.
As we’ve mentioned in one of our previous posts, during the Google I/O 2017 presentation dedicated to PWA, it was mentioned that even though web applications on mobile have almost 3 times more unique users compared to native apps, the native apps are 20 times more engaging than web apps. It clearly shows that PWA is a perfect technology that will merge these two worlds for your and users’ benefit.
|Read: How to use PWA plugin in Vue CLI 3.0|
Here’s a cool showcase of what PWAs can are capable of. Grab your phone and go to this link in your browser: http://paperplanes.world/.
To have the best experience I recommend you to open it on your PC or laptop as well. As you will see, even though you’re just in a browser, the web application behaves just like a native app. It gets an access to your location, accelerometers, and goes fullscreen giving you a native app-like experience. How cool is that?!
Why PWAs are the next big thing?
Most of the Progressive Web App’s data is saved within the device’s storage with the first launch. The next time a user wants to use it, the app downloads just a little bit of data. It’s a remarkably useful feature for people with poor connection, especially in emerging markets such as India. Uber and Twitter developers have reported that their PWAs work great with a regular 2G connection.
Since PWAs work within a browser, they can work on multiple platforms. This is a great feature that allows businesses to approach a broader audience, no matter the device they’re using. Your users will have the same great experience on every device they’re using. On top of that, once development of the app is over, you don’t have to create other ones for each platform. It significantly reduces required time-to-market, improves the productivity of your team, and more importantly cuts development costs.
PWA can help you improve conversions for new users! The app is more reliable than just a website and it allows you to send push notifications to your users even after the app is closed. Once it is stored on a device, it takes much less time to be reactive than a regular website that needs to fetch and load everything all over again.
Your dev team can update the app whenever they want since there is no App Store in between you and your users; the updates are instant.
Lastly, with Progressive Web Apps you don’t have to worry about the security of your app - they are served via HTTPS. This encryption ensures that your application is safe and sound, no one unauthorized can tinker with it.
How are PWAs adjusted for poor connection?
As you can see, a lot of companies aim to develop lightweight apps that will work with slow, 2G connection. Since they want to expand their services on emerging markets, it’s one of their main goals. But how are they managing to do that?
First of all, developing a PWA is a step in the right direction by itself. As many programmers have pointed out, PWA counterpart of their native application takes much less space. In some cases, they are up to 90% lighter.
Designers utilize the power of SVGs as opposed to PNGs or JPEGs. It is essentially a vector graphic in a text format. Uber development team have reported that their logo in SVG format is 15 times lighter than a PNG.
Unfortunately, when it comes to PWAs, many of the features from the native equivalent may be stripped down. It’s likely to do with saving data or even PWA support limitations.
What technologies do PWA developers use?
As we’ve mentioned before, PWAs are essentially web apps that, with some help, behave like a native application. What does that mean? The development process for a PWA is quite similar as for a regular web application.
Of course, there are some requirements that have to be met but, fear not, the Internet is full of online tools that will guide you, and make the PWA development simple. Judah Gabriel Himango in his blog post has briefly explained the whole process of converting and publishing a web application as a PWA on 3 major platforms - iOS, Android and Windows. He mentioned a very interesting tool called PWABuilder which can convert a web application into a PWA, give developers some tips on what’s missing in their app and even return ready to publish packages for major platforms.
So… what do developers use?
create-react-app which allows for creating React apps with no build configuration.
Speaking of React, there’s a really exciting alternative to this popular framework called Preact. It is a highly-performant framework with the same API that weighs only 3 kB.
With the recent release of Vue CLI 3, easy PWA implementation was introduced to the world of Vue. Developers can use plugins at any point of the development to implement a Progressive Web Application in their project.
|Read: Vue CLI 3: New Era in Frontend Development|
Let’s jump into some examples of PWAs you may be using today without even noticing!
Aliexpress pays close attention to mobile commerce. Unfortunately, they’ve noticed that the mobile Aliexpress website is not as fast and responsive as the native counterpart. The solution was creating a cross-browser Progressive Web Application to reach a broader audience. Aliexpress noted a 104% increase (!!!) in conversion rate across all browsers and 74% increase in time spent per session.
You can think of Twitter Lite as one of the flagship Progressive Web Applications. It works almost as smooth as the native counterpart. Twitter was aiming to expand their service in emerging markets. This is why Lite version was specifically designed to work great with a poor connection. Twitter Lite takes only 5 seconds to get interactive over 3G! They saw a 75% increase in Tweets sent and 65% increase in pages per session. Average load times were reduced by over 30%.
More people are accessing Trivago on mobile rather than on computers or laptops. That was a clear sign for Trivago to continue expanding their mobile services in order to stay ahead of the competition. The development of PWA resulted in an increased by 150% user engagement as well as significant improvements in conversion. Offline access allowed users to use the app even when the connection was poor. It saved them lots of frustration and by that, it helped Trivago keep loyal users.
Over 90% of OLX visitors are mobile users. The company found that at that time, their mobile website experience was too slow. This is why OLX opted for a PWA as they wanted to give users native app-like fast and immersive experience. OLX visitors’ engagement has increased by 250%! Over a period of 7 months, over 600,000 users have signed up thanks to the push notifications OLX app can send. Now, the OLX PWA takes 23% less time to be interactive and it displays ads much faster, what leads to higher CTR (146%).
The user experience of Forbes’ mobile website was poor, to say the least. Even their careers applications were split into multiple websites. Forbes opted for a PWA what led to amazing results. The render time was reduced from 6.5 seconds to only 2.5 seconds (alternative source reports 12 seconds to 3 seconds). The app’s weight was cut down from 2 MB to only 300 kB! Now, Forbes development team can make adjustments on the fly and regularly update the app, even few times a day.
Uber wanted to implement native experience in a lightweight web application to expand their services on new markets and platforms. The release of Uber PWA was a great success. The m.uber app loads quickly even with a poor, 2G connection. They’ve used several tricks to make the app as lightweight as possible, and it worked! Core m.uber app comes in at just 50 kB.