Melsoft

Progressive Web Apps? What Are Those?7 min read

Let me just surprise you today by saying you have probably used Progressive Web Apps before, you just didn’t know it YET, but wait all good stories start with a back story. A prologue to a book, a prelude to an album… You get the essence. Rewind a few years back to 2015, a time where Tesla rolled out its first semi-autonomous cars and Apple released its first-ever Apple Watch. I know it feels like a really long time ago right? Around the same time, in Google’s labs was the birthing of PWAs and the term itself. Little did they know that this would be a revolutionary way of rethinking websites. Before we start,

So, what is a PWA? – Practical Definition

Have you ever visited a website on your mobile phone and seen a usually annoying pop-up banner written “Add to home screen?” If you were daring enough to click yes to at least one of these offers, then congratulations! You have actually installed and used a PWA before. For those who haven’t, the “app” then installs and before you know it is sitting on your home screen without ever the need of visiting the app store. Pretty neat huh?

It sounds simple but like all things in tech there is a lot of technicality behind the scenes. What does it really mean for a web app to be progressive? Let us take an in-depth and technical look at what they are, why they are essential, their components and finally a few examples to close it all off.

What is a PWA? (again)

PWA stands in short for Progressive Web Apps. Despite them being introduced a while ago they are still fairly new kids on the block. PWAs link properties from websites whilst also morphing features from native mobile apps (The apps that you actually download from app stores.) This allows for the application to be detached from its operating system, functioning as a website and application at the same time.

In spite of my opening statement (I tend to be dramatic sometimes) It isn’t a completely new type of technology at all. It is just an array of the best possible executions that make a web application somewhat similar to a mobile or desktop application. The whole vision is to have the same user experience that is just as smooth as a native mobile app.

Why are PWAs important?

How annoying is it to visit a website that shows a white screen for the first ten seconds before random elements of the website start appearing? Chances are you don’t even wait that long. Slow loading websites is one of the biggest problems on the internet today.

Did you know that more than half of the world still uses 2G internet today? You can imagine how slow that internet should be right and how long it would take to load say an Instagram feed for example. This again is one of the biggest problems on the internet today

Then there’s the space problem. We all don’t want to install applications because they take space and just seem to make the device full. This again is one of the biggest problems on the internet… (I’m going to say this statement a lot today)

An average internet user spends 80% of their time on their top three native apps. However, the engagement of native apps is just a third of the engagement levels in mobile websites and apps. There is low engagement and this coins the last most pressing problem on the internet.

The reason I started off with problems is to show you how PWA’s combat ALL these problems and more. They literally are FIRE.

  1. Fast: PWAs are the undisputed champion when it comes to consistently fast responses. When the PWA is downloaded it is much smaller than native apps and data is cached which means the application can start without even contacting the internet. This cuts down the time a native app would take dramatically to open and start functioning by over 50%
  2. Integrated user experience: They perform exactly like the way a native app works. The experience they offer is again exactly the same in that:
  3. They send push notifications
  4. They appear on the home screen
  5. They have access to device functionalities (i.e. camera, microphone, location)

               This whole capability in itself is what makes it feel integrated.

  • Reliable: Even when networks fail, PWAs are still able to reliably put information on a screen which you would rather wait ten seconds for on a normal application. This is made possible by the assistance of service workers. (They can actually work offline)
  • Engaging: Thanks to the ability to receive notifications which allow constant communication between app and user, engagement levels on PWAs become seamless and unparalleled.
PWA ,Native app and Responsive website comparison of features

Does it sound too good to be true?

Like all things PWAs have a flip side, even though it may not be as convincing. It has its limitations first being that it doesn’t support smooth sailing when it comes to cross-platform capabilities. In layman’s terms something that may function in Google Chrome may not be supported by a different framework like Safari, it all depends solely on the browser’s capabilities.

These browsers unfortunately do not have as many permissions as native apps do – I mean web browsers only got the permission to scan fingerprints not so long ago but for native apps it has been there since around 2011. This shouldn’t however be such a big issue.

The last notable limitation is that offline support is not as good as it sounds. However, this goes with how it is with native apps so it isn’t such a big deal.

What are PWAs made of?

  1. A Word App Manifest

It might sound fancy but this is just a JSON file that meta information about the web app. This includes the basic general information like the background colour of the PWA among other things. It is possible to make a custom manifest file (or at least that’s what we do) or to use an online tool to do this.

  • A Service Worker

 A service worker is a type of web worker. It’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages. It generally makes the PWA offline first, improves the functioning of the PWA and acts as a base for advanced features.

  • Icon

Literally just the icon you see on the home screen. Even a jpeg image could function perfectly for this.

  • Serviced over HTTPS

A general requirement for PWAs is for them to be served over a secure network. This includes getting an SSL certificate, something I explained briefly in my last blog post. Being served over a secure network also ensures reliability and safety of the PWA.

Conclusion

The worldwide known e-commerce giant AliExpress also decided to experiment with progressive web app technology and this led to its conversion rate doubled. Pinterest did it and its user engagement shot up by 60% Feel free to check out these 9 Successful PWA Examples That May Inspire You for more examples.

So, in my own conclusion I feel as if PWAs are surely one to look out for in the future. They are too good not to. For now, native apps seem to have an edge, but if Melsoft continues working on developing PWAs the edge may shift sooner rather than later.

1 thought on “Progressive Web Apps? What Are Those?<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> min read</span>”

Leave a Comment

Your email address will not be published. Required fields are marked *