PWA Fundamentals: Why Do We Need Progressive Web Apps?

Published in

Hygger.io

6 min readNov 12, 2019

A Progressive Web App is the landmark of the future for all humanity. Have you heard at least once such a statement?

Progressive Web Applications (PWAs) are designed to accelerate tech abilities, bring balance to the business force, empower companies and save the world after all. Why not?

These applications will definitely push the mobile web forward and help mobile developers to attract more users beyond the confines of the app stores. PWA solutions combine progressive technologies with the best practices for creating trusted and engaging experiences.

Will they kill native apps in the future? In this quick post, we share some interesting facts about Progressive Web Apps in web technology. You’ll also find some useful sources and links to deepen the PWA concept.

What are Progressive Web Applications?

A Progressive Web App is a website that looks like a native mobile app; it is run in a browser, so there is no need to download the app from the stores.

PWAs are designed to eliminate essential issues from slow networks to a complete lack of connectivity. Such websites use the latest web technologies to provide a fast, reliable, and engaging user experience.

If compared to native applications, Progressive Web Apps combines the much larger web ecosystem, plugins, and community and the relative ease of deploying and maintaining a website.

Google described PWA in 2015. Pete LePage, the developer advocate noticed that the “progressive” part of the term can be explained as when users progressively build a relationship with the app, it becomes more powerful over time.

Do you still think that you do not know any PWA? What about Twitter? Just log into your Twitter account via your smartphone’s browser and you will use a PWA.

Do you want any more examples? Here we go.

PWA References and Examples

Here’re some bright PWA examples, described on the PWA Stats website:

According to Google, progressive web apps install banners convert 5–6x more often than native install banners.
The PWA introduces by Pinterest helped to rebuild the website of the popular visual social network and increase engagement by 60%.
Thanks to the new PWA, Tinder cut load times from 11,91 sec to 4,69.
Uber implemented a PWA, which should be fast even on 2G. The main app is only 50k zipped and takes less than 3 seconds to load on 2G networks.
The new progressive web application in the Raphael Hotels increased website conversions by 20% and page views by 66%.
The mobile experience of Forbes was also redesigned and the PWA resulted in 43% increase in sessions per user and 100% more engagement.

Key Progressive Web Applications Characteristics

PWAs are:

Reliable

This kind of web application should provide users with meaningful content regardless of network conditions. Some apps can function completely offline, while others display special placeholder data, informing users that they are offline.

Responsive

PWAs should adapt to various screen sizes and orientations.

A high-quality responsive design will help to ensure that the application will continue to work with new devices in the future.

Engaging

Usually, native apps are considered to be more engaging than web apps. An icon on the screen makes it easy to get into the application and push notifications can help alert users of important info for them. Progressive Web Applications allow users to get the same benefits with web solutions.

Secure

The PWA is secure by default. The technology that powers PWA requires applications to be served over HTTPS to work.

PWA Tech Components

Progressive Web Apps have some l technical components, which energize the regular web apps. These components are:

Service Worker - not a human worker but the technology behind a Progressive Web App that supports its offline capability, resource-caching and push notifications. Service Workers provide a programmatic way to cache application resources.
Web App Manifest that describes the resources required for the app ( icons, displayed name, background color or theme).
HTTPS. The PWA requires secure protocol HTTPS, as Service Workers are able to intercept the network requests and modify responses and they realize all actions on the customer side.

What are the Core Progressive Web Apps Limitations?

PWAs do not have support for any hardware that is not supported by HTML5.
They have no web push notification support for iOS.
No way to offer users “Add to Home Screen” in iOS.
Some browsers (Chrome or Opera) support PWA, while Edge, Safari or IE do not yet.
Limited legitimacy.
Native apps can interact with other applications and authenticate logins (Google, Twitter or Facebook). PWA, as a web page, can not communicate with other apps installed.

More PWA examples

Handy Tutorials about Progressive Web Apps

In order to dash a dry theory, here we offer a set of cool tutorials in which authors consider how to build PWA and share codes. Here are some great examples:

Best Books about PWA

Progressive Web Apps with Angular: Create Responsive, Fast and Reliable PWAs Using Angular by Majid Hajian (2019)

Progressive Web Application Development by Example: Develop fast, reliable, and engaging user experiences for the web by Chris Love (2018)

Beginning Progressive Web App Development: Creating a Native App Experience on the Web by Dennis Sheppard (2017)

Building Progressive Web Apps: Bringing the Power of Native to the Browser 1st Edition by Tal Ater (2017)

Progressive Web Apps with React: Create lightning fast web apps with native power using React and Firebase by Scott Domes (2017)

PWA Online Courses

All you need to build Progressive Web Apps from scratch or upgrade your existing web apps to PWAs.

More Useful Sources on PWA

Instructor-led PWA training
Google’s Progressive Web Apps homepage
Step-by-step code lab
Favicon Generator
PWA feature detector — the tool that assists to recognize what PWA features your browser supports.
PWA builder — to generate a Manifest.json file and icons for your PWA

Conclusion

The web is the future of apps, as it works everywhere and powers a rapidly increasing number of apps. Nowadays, people use web technologies everywhere, but so far, the mobile web has been a stripped-down experience. PWA is aimed to change that.