Demo request
Skip to main content
Enonic Enonic
pwa-logo


 

WHAT IS A PROGRESSIVE WEB APPLICATION?

Progressive Web Apps is a broad topic that requires a lot of extensive reading to get into.

You can start by reading Introduction to the concept which covers the basics and is intentionally not super technical.

This article explains how the Web got better with introduction of PWA, and also has a great "All you need to know about PWA" video presentation which should answer all of the remaining questions, should you still have any left.

Understanding how Service Worker does its job is challenging, but this tutorial gives a pretty good explanation of the basic principles.

After your brain gets around the Service Worker, you can step into the more advanced area and read this fantastic article by Jake Archibald explaining in details all aspects of Service Worker’s caching, with code snippets and examples.

Building a PWA

When you feel like you are familiar with the concept it's time to make a deep breath and try to build your own Progressive Web Application. Don't worry, it's easier than you think!

The best first exercise for a PWA-rookie is to go through this step-by-step DIY-article from Google. It's relatively simple and well explained, and after you're done with it you can make the next step to building a more advanced application.

Before you continue, we suggest you read these series of blog articles describing a relatively advanced PWA built with Angular and GraphQL. It's a detailed description of a complete developer journey all the way from choosing the concept for the soon-to-be-built PWA and research of client-side framework that fits the concept all the way to explaining choice of GraphQL over classic REST for delivering data to the client.

Let's say you built a PWA. But how do you know it's good enough? Believe it or not, there's an audit service for Progressive Web Applications called Lighthouse, built-in directly into Chrome browser's Developer Tools but also available as a standalone plugin and CLI. It will verify your PWA directly in the browser and give you score as well as hints on how you can improve it.

Advantages of building a PWA

The more you delve into PWA, the more benefits you discover. Here are some reasons why you could benefit from creating a Progressive Web App.

Reduce Development time

Progressive Web Apps in most cases eliminate need for development of Android, iPhone and Windows native apps. Imagine the possibilities if you could focus all of this effort solely on your web app, and still deliver the same experience to all of your users around the world. Then, imagine the cost savings.

Increase user adoption 

Data from comScore revealed that 49% of smartphone users download zero native apps in a typical month.  The journey of installing an app is often too much for many users. With PWA its is as simple as visiting a web link. Everything happens in the background, and a simple prompt asking if the user would like to add the website to their home screen completes the "installation".

Better business results

Better user experiences results in higher conversion rates.  By removing friction, you make it easier for customers to convert.  Whether it’s ecommerce, subscriptions, bookings, engagement, dwell time, loyalty, retention, cross selling, upselling or clicks, PWA can help boost these metrics.

By developing a Progressive Web App...

  • Twitter experienced a 65% increase in pages per session, 75% increase in tweets sent, and a 20% decrease in bounce rate.
  • Lancôme saw a 17% increase in conversions, 53% increase in mobile sessions on iOS and an 8% increase in conversion rates on recovered carts via push notifications.
  • Alibaba saw 76% higher conversions across browsers, 14% more monthly active users on iOS (30% more on Android), and 4X higher interaction rate from Add to Homescreen.
  • Wego increased organic visits by 12%, bounce rates dropped by 20%, visits increased 26% and conversions increased 95%.

Better user experience results in improved engagement and conversion, which means more revenue, customer satisfaction and loyalty. PWA has set the stage for a major shift away from native app development, back to the web.  This potentially means huge cost savings for companies, and a happier, more loyal customer base.

Still not sure how to convince your manager to give you some time to check out Progressive Web Apps? Show him this page.

 

examples of progressive web applications

While you're on a task of building your own PWA, it's a good idea to play around with some existing apps, see how they work and maybe even look at the code. We have some great examples for you!

First of all, here's an entertaining selection of real-life Progressive Web Apps, ranging from simple currency converters to complex e-commerce shops and newspaper agencies. They even have an app from NASA, so you can get an impression on how important the PWA concept is perceived by the developers community.

Service Worker Recipes comes directly from Google and is an open-source collection of samples which showcase various PWA capabilities. 

If you're in a playful mood and especially if you have a table football in your office, then Office League is an app for you. It allows you to easily keep track of goals and score as the game progresses. You can register your own teams and leagues, get notified by games started in your league, and - since it's a proper PWA - it works fine offline and even lets you play a game in offline mode.

Finally, if you feel like building a PWA on Enonic XP platform then we suggest you try out this great open-source PWA Starter Toolkit. It uses WorkboxJS to dynamically build your app's Service Worker saving you lots of time and coding power. Remember to install Enonic XP first!