How to develop and test Progressive Web Apps

 

Around the world, digital transformation is constantly growing within companies. The tools, resources, and methods that impel this progress grow in tandem. Progressive Web Apps, aka PWAs, are one of the numerous tools technology-driven businesses can utilize. PWA apps can deliver better value and drive user experiences online. Essentially, PWA apps make your digital assets accessible to the end users in the most effective and profitable way possible. Having said that, the term “Progressive Web Apps” does not come without a need for explanation. In fact, for many of us, it remains all the more obscure. That is until we dig a little deeper into what makes this concept workable. So let’s try to get a sense of what PWA apps are, how to build them, and why they are so important.

 

What are PWAs?

 

Progressive Web Apps combine the advantages of web apps and native apps. They use a number of standard patterns and specific technologies. This allows PWA apps to function across platforms, load faster, and provide an app-like experience to users.

 

For example, unlike native apps which you have to install on your device from an application store, Progressive Web Apps allow you to visit a site, install it on your device, and enjoy the same app-like experience. Although we may argue that native apps work offline and provide a more seamless experience. This is because they are usually better integrated with the operating system. It is comforting to know that the design of Progressive Web Apps provides the same benefits but without eliminating any of the existing features that make the web great.

 

By now you might wonder what makes an app a PWA on the web? Well, no one can tell at first glance whether or not a web app is a PWA. But looking at the existing literature and experts’ analyses in this area (including those provided by Alex, Jeremy, and Amberley), it’s clear that to earn the status of a Progressive Web App, a web app needs to implement a set of given features or meet certain criteria, such as working offline, being discoverable and installable, having the ability to send push notifications, etc.

 

To be more specific we must look at the specific and general nature of the term “Progressive Web Apps”. To be a Progressive Web App, a site must meet three baseline criteria which are driven by user-experience concerns:

 

1. Runs under HTTPS
2. Includes a Web App Manifest
3. Implements a service worker

 

In addition, there are other good-to-have features a site can capitalize on to take full advantage of the benefits of progressive web apps. These include:

 

1. Responsive
2. Connectivity independent
3. App-like-interactions
4. Fresh
5. Safe
6. Discoverable
7. Re-engageable
8. Installable
9. Linkable

 

Once you have configured your application against the above criteria, it’s imperative to run a Progressive Web App Testing to measure its completeness. Fortunately, there are open-source, automated tools available (such as Lighthouse) that eliminate the need for manual testing of PWAs.

 

Why are Progressive Web Apps trending?

 

We need to understand why progressive web apps are trending. It is helpful to know the challenges we are currently facing with web and native apps.

 

Internet speed: Some apps require high-speed internet to function optimally. These are not well-suited as 60% of the world’s population that still depends on 2G networks for internet service.

 

Slow loading: If a page loads too slowly 53% of internet users will abandon it after only three seconds. For sites and web apps, the is not uncommon nowadays.

 

High friction: Native apps are losing popularity and people are not installing them as frequently as they used to. Today, the number of new apps an average user installs per month has sunk to zero!

 

User engagement: Although mobile reach accounts for three times that of native apps, most users still prefer to spend their majority time in native apps. With 83% of users’ time going into native apps against 13% of mobile apps, the distribution appears highly skewed. Strangely, however, we can attribute 80% of the total time users spend on apps to their top three native apps only.

 

 

Progressive Web Apps help address these problems by providing an amalgam of capabilities that ensure users enjoy the best of both worlds. Also, while the amount of effort required to implement core PWA features is relatively small, the gains are huge. Here are some of the main benefits:

 

Fast and consistent user experience: From the moment a user installs an app to the moment they interact with it, everything happens extremely fast. Thanks to a cache-first service worker strategy, the app works offline, decreases load time, and saves precious bandwidth.

 

Integrated user experience: PWAs provide app-like experience. Sitting in the home screen of a device, they are able to access a device’s functionalities and can send push notifications just like native apps. All in all, the experience feels smooth, integrated, and no different from native apps.

 

Reliable experience: PWAs are network independent, meaning that they can still show users what they need to see even if the network is not on.

 

Engaging: Push notifications notify users every time an update gets rolled out or something worth notifying comes about. This helps drive engagement.

 

These benefits are not just on paper, there are many companies testifying them in their success stories after trying the PWA route. We may look at some of these case studies on PWA Stats, a site that provides a community-driven list of stats and news related to Progressive Web Apps. The trend will grow as more globally recognized brands consider PWAs as a way to improve their digital experiences. Some of these names are AliExpress, Forbes, Uber, Trivago, Flipkart, Google Maps, Twitter, Starbucks, Instagram, Lancôme, and many more.

 

PWA architecture

 

Now that we know what progressive web applications are and why they are important, let’s look at how they are structured. To help us get a better sense of how PWAs should be built, there is a checklist provided by Google which breaks down all the things necessary to help developers take a PWA from a baseline to exemplary experience. Here, we will quickly go over the four key building blocks that, when put together, form a Progressive Web Application.

 

App Shell

 

App shell consists of the basic components that result in an app-like experience. The app shell is concerned with caching information as soon as the user interface (UI) loads and then making it available for subsequent visits offline. This means that the UI loads information from the server only once and retrieves it from the cache immediately each time someone visits the app from the same device. However, if new content is not available in the cache already, the app shell manages to request it from the server. This structure allows sites to load faster and be accessible even if the network connections are not available.

 

Manifest file

 

The manifest file provides meta information about the web app. We can learn about the branding elements such as the app’s icon, its color scheme, its name, and short name, etc. through the manifest file. There are tools available to generate the manifest file (such as Web App Manifest Generator) or you can also write it manually.

 

Service Workers

 

Service workers are event-driven workers that sit between the browser, web applications, and the network. Running in the background of an application, service workers perform numerous functions, including intercepting network requests to take appropriate action based on the availability of the network, updating data on the server, creating effective offline experiences, and allowing access to background push notifications.

 

Security Layer

 

The HTTPS protocol is a necessary requirement for progressive web applications to work in a safe web environment. Adding a security layer to your site (in the form of SSL certificate) is not only a best practice, but it also helps earn your users’ trust and create a positive image of your application in their minds.

 

Summary

 

In short, Progressive Web Apps are sites that use modern web standards to allow for installation on a user’s device and provide an app-like experience to those users. They are not only effective in delivering better experiences for users but also in driving engagements and improving conversions for companies willing to utilize them. PWAs are our way forward and are well worth trying. Fortunately, the requirements to employ them aren’t so complex. All you need to do is fulfill the baseline requirements and your web application can qualify for a Baseline PWA. From there, you can gradually work your way up to an Exemplary PWA.

 

If you are interested in discovering more about Progressive Web Apps check out our webinar video on the subject.

 

Tom Ben Simhon – Head of Seetest.io Business Unit