Progressive Web Apps (PWAs)

In this article, we’ll be talking about progressive web apps, its benefits and then finally finish with building a “Hello World” PWA.

What is a PWA?

A PWA is a web app that offers better performance, more capabilities and reliability compared to a traditional web app. We can think of it as the result of combining the features of web and native apps.

Web applications can reach anyone, anywhere, on any device with a single codebase. In the other hand, native apps (or platform specific apps) work regardless of network connection, they make it easier for us to conect with the hardware and the operating system to do things like taking a picture, use keybaord shortcuts and much more. PWAs offer all the above.

For users

PWAs help the user to benefit from a very good experience especially mobile users who are the most important nowadays since mobile traffic share is over 54%, surpassing desktop computers (42%) as the most used device to access the internet. Mobile users, since they often use smartphones on the run, with a poor network connection or an expensive data plan, are the most impatient ones, that’s why PWAs provide fast loading and offline working apps since it’s actually installable so it works directly on the system (loads images, viewed posts…).

For businesses

It turns out that it’s easier to get people to install a PWA directly from the browser rather than going through app stores and that independency frees them from paying any middleman for distribution and offers faster update process, which makes the cost of user acquisition (CAC) much lower. It is also enough for businesses to build one web version of their app and then distribute it to be used easily on any platform which reduces the cost of development and increases the marketing ROI.

PWAs Work

Since it got introduced years ago, PWAs are getting more and more adopted by companies like Twitter, Tinder and Alibaba.

Let’s take Twitter as an example: Nicolas Gallagher, the Engineering Lead for Twitter Lite (Twitter’s PWA) affirmed “Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android”. They also claim that Twitter Lite consumes less data by default, relying on cached data and optimized images as much as possible. It allows reducing data consumption by as much as 70% as users scroll through their timelines.

Let’s Build a Simple PWA

A “Hello World” app is the way to go always to learn a new thing, so let’s do that!

We’re going to need 4 files:

• logo.png
• index.html: it contains the HTML, CSS and JS of our app. We need to reference the manifest (manifest.json) and register our server worker (sw.js)

• manifest.json: as every manifest file, this will hold our app’s metadata. The icons array should contain the list of the icons generated from our logo by running npx pwa-asset-generator logo.png icons. The final content will look like so:

• sw.js: we will basically use this file to enable cashing for our app’s images. To make our lives easier, we will be using Workbox which is is a set of modules that simplify common service worker interactions such as routing and caching.

Now everything is ready, we can go ahead and launch our app by running npx serve. YaY!

Conclusion

The Progressive Web Apps are very promissing and it seems like it’s going to be much more adopted and why not the standard of building apps. What do you think?

That’s it for now, seeya soon 😄