PWA Overview in 6 minutes (part 1)
Tags: pwa, javascript, webdev, beginners
Published: 2019-08-22 16:40:41


Here it is, a favorite technical topic of mine, **Progressive Web Apps**. The target is to write *a series of articles* related to PWAs, so let me know if you **struggled** to understand/implement any of the functionalities.

Maybe you heard about this *(becoming)* buzzword from Google events or some random articles on the internet. If you don’t, it’s ok, we will start from the **beginning**.

In the past months, I delivered **two presentations** on PWAs with an aggregated attendance of over **50 people**. The focus was on two directions, first *(tied to this article)*, to present **what** are PWAs and **why** they are useful and second, to implement live a PWA from scratch *(future articles)*.

You will discover:

-   **What** PWAs are :vibration_mode:
    
-   The **benefits** you can get from them :thumbsup:
    
-   Production PWAs examples with **statistics** :chart_with_upwards_trend:
    
-   PWA **characteristics** :pencil:

But first, **important** notice *(if never used a PWA)*! Go to [www.twitter.com](http://www.twitter.com) from Chrome and click on the menu **“Install Twitter”** or from your Android device and click **“Add to Home screen”** pop-up. If you are an Apple user tap **“Share”** and then **“Add to Homescreen”**.

The target is to really **see PWA in action** before the information from this article.

Let’s go!  

![enter image description here](https://lh3.googleusercontent.com/dU8xyqdwbOH9V3FR2Jm8FqwJp4zXY68HENj7k3PcEJw82fwtNGNmbnjiKqkxwaeR4Dd68k2etjDt "PWA Overview Banner")
## What are PWAs
Based on what Google says:

> “Progressive Web Apps are **websites** built using web technologies but
> **act and feel like an app**.”

The main idea from this definition is that you can develop a **web application** from scratch or even **upgrade** an existing one with some functionalities that make it **behave like a native app**. *(mobile or desktop)*

And now a more casual explanation:

> “Progressive Web Apps are just **websites** that took all the right
> vitamins.”

Therefore PWA can be seen as an upgrade of a web application in order to serve the **new needs of the users** worldwide. Over **50%** of the internet traffic it’s from mobile devices, so your web application should *do more than responsiveness* in order to adapt.

## PWA Checklist
![enter image description here](https://lh3.googleusercontent.com/-6yZclFn_Ht_z7okPMLsES3aarCiEyKdetTaRNMqoWzHH-SoAUAGr9YVyxAAHjD0YFN2cDjCstRO "PWA Checklist")

**HTTPS - Secure**

Any PWA should be served over **HTTPS**. If this requirement it’s not respected, your application will not be Progressive.

**Connectivity Independent**

Your web application should support weak networks and also offline support. Both functions can be achieved using service workers and caching.

**App-like**

The structure of the application should have the **aspect** of a native one. For that, we can load the **app shell** the first time, using service workers, and load it on the next visit.

**Discoverable**

Being a web application can be found by **searching engines**.

**Re-engageable**

The main functionality of the mobile application that engages users is **push notifications**. With service workers, you can implement those for your PWA and use them anywhere.

**Fresh**

The application can be **updated** with new functionalities using service workers *(background-sync)*.

**Responsive**

Of course, the application should be **responsive** and behave nicely on any type of screen.

**Installable**

Your application can be **installed** through the browser and behaves like a native one afterward.

## Case Studies

**1.  Twitter**

Let’s start with Twitter's situation:

> “With over **80%** of users on mobile, Twitter wanted their mobile web
> experience to be faster, more reliable, and more engaging. “

Twitter implemented a PWA version of their application and managed to make it **the most used client**. The application had a lot of success on desktop also.

Here are some **statistics** that they presented:

-   Increased the pages per session with **65%**
    
-   Increased the tweets sent by **75%**
    
-   Decreased by **20%** the bounce rate
    
This is a tremendous success for them, taking into consideration the **volume** of their users.

![Twitter UI](https://lh3.googleusercontent.com/DiL7ioN3ohYsR9FGQKOuMsBtsi4XaH3aLNdtkOVx_KuqAiN5hhXMgQXjKe3lr43tnyxM-kv_8KdM "Twitter UI")

**2.  Pinterest**

Pinterest observed a problem of their web application, as they declared:

> “Pinterest noticed its website experience was slow and converted only
> **1%** of all visitors into sign-ups or mobile app installs. This led them
> to develop a Progressive Web App.”

After their PWA implementation they also had some valid **statistics** to share:

-   Increased time spent on the mobile web by **40%**
-   Increased user-generated ads revenue by **44%**
-   Increased engagement with **60%**
    
The most important one from them, in my perspective, is the **revenue one**. That demonstrates that this technology can be applied successfully in a large organization and have a positive *impact on the business/revenue side*.
![Pinterest UI](https://lh3.googleusercontent.com/dBcTZnU68ggx461SDT9xyunDVEXveADTXzJgzBJWUcvBeTh38Ys85FUybrPrFmKLLlj0RKmt1aD9 "Pinterest UI")

## Characteristics

**1.  Fast loading**

Google says:

> “**53%** of users will abandon a site if it takes longer than 3 seconds to
> load!”

Having that information in mind, an important aspect of PWAs is to be fast and reliable. A particular method to achieve that speed is to **cache the app shell**, using the service workers.

![Service Worker example1](https://lh3.googleusercontent.com/QD_B390MSM0OTVQXX1hh6aeAOb2HTjWYJkUsocbg19X90tPgxR2-MA1bbsAzL2KFM53TcF3RS2sK "Service Worker example1")

Here are represented some simple **network requests**. When an user opens the application, the shell can be **served directly** from the service worker, who can intercept any network request sent from the browser.

The benefit is that the user gets **fast feedback** before all the resources were loaded.
![Service Worker example2](https://lh3.googleusercontent.com/3bsxtz3t2TAU9dm0LQ6HHh4eLcvcs64nYakaRVIUKr7Dxho2ZB3_BlcIVgGVhJDbh5M63716mCZv "Service Worker example2")

Another good strategy is to let the service worker do the business-related **data request** at the start and until the app shell is drawn by the browser, the content could be ready to be loaded. In this example case, the time is reduced to **almost half**, which represents a huge difference.

**2.  Installable**
 
> **“Add to Home Screen**, sometimes referred to as the web app install
> prompt, makes it easy for users to install your Progressive Web App on
> their mobile or desktop device.”

What it does, it adds a **shortcut** to your screen from where you can start the application in a **separate process**, not directly on the browser. It works both on mobile and desktop, but the main target is the mobile audience.

A PWA can be installed from Safari, but it will need **two additional touches**, going through the menu. A workaround for this can be a custom **implementation of a banner** similar to the one from Chrome, and implement the installation **manually** in the back.  
![Install PWA examples](https://lh3.googleusercontent.com/fxkYF3JWgqmWsYDk71fh0_H4ZCS9bKcQCA6-hZn2Uky-zO2kNAIGGidIofOUy9MDzsomkPIyeSYP "Install PWA examples")  

**3.  Multiple platforms**

PWAs can support multiple platforms *(browser, mobile, desktop)* and will behave particularly to each one of them. Because nothing is perfect, there are some **limitations** when we refer to **Safari**.

![Browser comparation](https://lh3.googleusercontent.com/N7u_AIlV83xXhXKdWUyt2N3EZrDchK9lcLzOjRNsJCI5w7jrIp5FeU62x7X1YVaXYuYhnnbPmxUf "Browser comparation")

Yes, I know what you are thinking. It seems that PWA can be implemented only on Chrome or other non-Apple browsers, but the truth is **somewhere in the middle**.

Even if important functionalities like **Push Notification** or **Install Banner** aren’t supported for Safari, PWAs can still bring value to the Apple fans through the other benefits and with **a couple of customizations**.

**4.  Works offline**
    
Works offline it’s a **bold** statement. It’s an objective for the PWAs, but you can implement just *some of the functions*.

For example, you can **cache the app shell** and, if you have a platform similar to dev.to, cache also the **visited articles** *(the data)*. In this case, if the network is flakey or there is no connection at all, the user can still read the loaded articles.

A more advanced feature could be to use **“background sync”** to commit the offline user actions when the connection returns.

**5.  Engaging** 

The engaging point is strongly attached to **push notifications**. It’s the main feature that keeps the user interested in the application dynamically.

![Push Notification schema](https://lh3.googleusercontent.com/jnK-xzVmfu-g4crRNCCWrfCzj12uOcl7_ldZcVbTtYKeyHzZjIjA1HZaz2lI3yTlwvuMytJnBanN "Push Notification schema")

In the above schema, it’s presented an example of an implementation for push notification into a PWA, using **Google Cloud Messaging** *(GCM)*.

First, you can ask the user if he **agrees to receive notifications**. If the answer is positive, request the GCM for a **token**, then store it into your server, tied to the device.

When you want to send a **notification** you can simply send a **request** to GCM, using the token and some additional information, like the message or icons and GCM will send the notification to your device. Thanks to service workers, your client can **understand** and **display** the notifications.

![Conclusion banner](https://lh3.googleusercontent.com/fxZ73S1VZMoS9w71i_pSm6XoyaoEOYnTsepbPI1n8IRiaOJKrAECGeUMG0k-Zy1cEMSPqpoLyLk0 "Conclusion Banner")

It was a **high-level** article, that presents the main aspects of PWA. To fully understand PWAs, you need to research further. Leave a comment if you want to *write more on some specific topics* related to PWAs.

PWAs represents a fast approach to develop an application that *(almost)* works on all platforms. If your use case can ignore the limitations, especially the ones related to iOS, it can be a great solution for your **mobile-web dilemma.**

Even if you don’t need a mobile application, adding the capability to **install** and **offline functions** into your web application can be a huge **upgrade**. Those functionalities are the easiest to implement and I will present them in a future article.

The main two problems with PWA are the **iOS limitations** and the fact the **users are not yet familiarized ** witg a web application, as a PWA.

It’s a technology in development, that has **great potential** to solve the changes from the **user's behavior** and I think it’s great to be aware of it. There may be cases where it’s the perfect fit.

Let me know in the comments if you have any **questions** or **suggestions**.

Happy coding!