Progressive Web Application

What is a progressive web app (PWA)

A progressive web app (PWA) is the set of mobile web application development techniques that entails building apps that feel and look like native ones. Using a web stack (JS, HTML, and CSS), progressive web apps combine rich functionality and a smooth user experience associated with native apps. Simply put, PWA is the web app with the native-app flavor: After the installation, a user clicks on its icon on a device's home screen and gets straight to the website.

The main PWA features

PWAs have numerous key features that make them different from traditional web and native apps:

• Full responsiveness and browser compatibility. These apps are built according to progressive enhancement principles. Progressive enhancement is the web design strategy of providing the basic functionality and content to everyone regardless of browsers they use or connection quality while delivering more sophisticated page versions to users whose newer browsers can support them. So, PWAs work with all browsers and are compatible with any device, regardless of screen size and other specifications. Tablet and mobile users will have the same experience. You can even adjust the app to the desktop if needed.

• Connectivity independence. Progressive web applications can work both offline and on low-quality networks.

• App-like interface. These apps mimic the navigation and interactions of native apps.

• Push notifications. If used as a part of a good messaging strategy, push notifications can keep customers interested, motivating them to open and use an app more.

• Self-updates. Able to update themselves automatically, apps stay fresh.

• Safety. These apps are served through HTTPS, so unauthorized users can’t access their content.

• Discoverability and easy installation. While search engines classify PWAs as applications, they are not distributed via app stores. These apps can be shared through a URL instead so they’re easily found. The installation is simple and entails visiting a site and adding it to a device's home screen.

NA vs WA vs PWA

Technical components of PWAs

The Web App manifest

The Web App manifest — a JSON file — is the first component that gives the progressive its native app interface appearance. With the manifest, a developer can control the way the app is displayed to the user (i.e. full-screen mode without visible URL bar) and how it can be launched. The file allows a developer to find a centralized place for the web app’s metadata.

The manifest usually contains:

• starting URL

• an app’s full and short name

• links to icons and icons’ sizes

• type

• location

• splash screen

• theme color for the address bar

To apply these settings, a developer has to add a single link to the manifest in all website pages headers.

Service Worker

A service worker is another technical element that supports one of the main features of progressive web applications — the offline work mode, background syncs, and push notifications typical for native apps. The service worker is a JavaScript file running separately from the web page/app. It responds to user interactions with the app, including network requests made from pages it serves. Because the service worker runs only to process a specific event, its lifetime is short.

Service worker implements:

• Offline work mode. The service worker allows for caching an application shell (interface), so it loads instantly on repeat visits. The necessary dynamic content (i.e. message or payment history, shopping cart, avatars) is refreshed every time the connection is back. These mechanics allow for decent app performance and improved user experience. For example, a messenger user won’t see the difference between the online and offline modes regarding interface: It still works; a message history is available. However, messaging requires a connection.

• Push notifications. Push notifications are an efficient tool for user re-engagement through the content and prompt updates from websites they like. Progressive web apps can send push notifications even when the browser is closed, and the app isn’t active.

• Background synchronization. It delays actions until stable connectivity is back. For example, the message sent right before the connection fails will be marked as sent and then will be delivered as soon as service is restored. So, servers can send periodic updates to the app allowing it to update itself when the connection is restored.

The application shell architecture

Building and maintaining PWAs entails separating static content from dynamic content.

So, the use of the application shell architecture (that is the base of the UI) we mentioned above is the only approach to their development. The app shell consists of core design elements required to make the application run without the connection.

The app shell approach works especially well for JavaScript-heavy apps consisting of one page and apps with relatively stable navigation and changing content.

Transport Layer Security (TLS)

PWAs leverage the Transport Layer Security (TLS) protocol. TLS is the standard of secure and robust data exchange between two applications. The integrity of the data requires serving the website via HTTPS and installing an SSL certificate on a server.

Pros of PWAs

• Development savings - Specialists who follow the progressive web apps trend use a web stack for their development. This approach takes less effort and time, so it’s more cost-efficient. The reason is that developers don’t need to build the app for multiple platforms because a single progressive app can perform well on both Android and iOS and fit various devices.

• Reduced installation friction - Since PWAs aren’t installed on a device or shared via Play or Apple stores, their customers are several steps closer to launching them. They don’t have to visit an app store, click the “install” button, and accept various permissions. All they need to do is to visit the website, add the app to a home screen, come back to the home screen, and open the website. This advantage is especially meaningful considering that each additional step to download an app reduces the number of its potential users by 20 percent.

• Easy updates - PWA users free themselves from updating (or accepting the update offer) for the app each time a developer releases new versions. Users always have access to up-to-date solutions. This feature allows companies to avoid the problem referred to as software fragmentation when they have to maintain old versions of apps or risk the loss of users until they start the update.

• Higher User Engagement - Researchers from comScore also found out that 80 percent of mobile users intentionally move apps to the home screen. So, the ability to be added to the home screen makes PWAs more competitive with web apps. There have to be other reasons people decide to try the app, of course. The frequency of use (61 percent), the simplicity of access (54 percent), and speed of access (49 percent) are the top factors influencing their decision. The chances for better distribution are, therefore, higher for PWAs. Push notifications also fuel user interest in the app.

Cons of PWAs

• Limited functionality and increased battery use compared to native apps - Despite their progressiveness, these are still web apps. Without access to device hardware, PWAs can’t support such native-app typical features as fingerprint scanning, vicinity sensors, NFC, Bluetooth, geofencing, inter-app communications, and advanced camera controls. While app sharing via URL is convenient, it requires the connection, which drains a device battery faster than a native app.

• Search traffic losses due to no presence on app stores - We mentioned that presence on app stores eliminates several steps users take before running an app, which reduces installation friction. Mobile web traffic can be redirected to an app store to showcase the app to users, while not being in an app store leads to potential traffic losses. (Currently, there is the ability to add PWA to stores)

When to build progressive web apps

First and foremost, building PWAs are about user engagement. Users who don’t want to make extra clicks to download an app may be a significant part of your community. Stats from a recent comScore report prove this assumption is well-founded. More than 50 percent of US smartphone users don’t download even a single app a month. With a PWA, you can engage with this large user group even if you already have a native app. It also allows for saving a substantial amount of budget on native apps’ updates and maintenance.

As people mostly rely on wireless network and mobile connection, they are likely to prefer websites and apps using less data and remaining at least partly functional offline. And PWAs have it all.

However, it’s important to remember that functionality is PWAs’ weak spot. So, if native app-specific features (i.e. access to a camera or geolocation) aren’t essential, then stick with a PWA. No wonder leading media like the Financial Times or The Washington Post have realized the benefits of using PWAs for publishing articles.

To summarize all of the above, things you should consider when making a choice are performance and functionality, development time frames and costs, as well as user experience.