What's a PWA? A Brief Guide to Progressive Web Applications

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.

Here’s a cool showcase of what PWAs can are capable of. Grab your phone and go to this link in your browser: https://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?

Data-friendly

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.

Multi-platform

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.

So you’re probably thinking right now that PWAs are just web applications that act like native apps. That’s essentially right! It means that your web developers can easily create the native app-like experience for your users using technology they already know. We’re talking about HTML5, CSS, JavaScript, even JS frameworks. Vue, React and Angular have PWA support! There is no need to learn Java and Kotlin for Android, Objective-C, and Swift for iOS and even C# for Windows development. This solution is much easier than hiring additional staff for native app development. One app to rule them all!

User engagement

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.

Security

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?

React

When it comes to JavaScript frameworks, React seems to be the most popular choice. It is widely used among programmers for web development. There’s a popular tool used for PWA development called create-react-app which allows for creating React apps with no build configuration.

Preact

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.

Vue

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.

Use Cases

Let’s jump into some examples of PWAs you may be using today without even noticing!

Aliexpress

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.

Twitter Lite

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%.

Trivago

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.

OLX

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%).

Forbes

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.

Pinterest

Pinterest saw a massive improvement when it switched its mobile website to a PWA. Thanks to cashing CSS, JavaScript and static UI assets using Service Worker, the time needed for the app to be interactive was reduced from 23 seconds to only 6 seconds. On top of that, the mobile traffic and conversion were significantly increased.

Uber

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.

Tinder

As other mentioned above apps, Tinder Online was created to expand on new markets. The PWA took only 3 months to develop and it delivers the core Tinder experience with only 10th of the native app size! It takes only 5 seconds on 4G connection to get interactive. The development team has utilized JavaScript Route-based code-splitting to shrink down this time from initial 12 seconds to only 5 seconds. Tinder saw an increase in session time, messages and swiping compared to their native app.