What is a Progressive Web App?

Definition and Main Concepts.

Progressive Web Apps are web applications that take advantage of the latest technologies to combine the best of web and mobile apps.

User Experience

From a User Experience point of view, and as defined by Google, a progressive web app (or PWA) is a website that is:

  • Reliable - loads instantly

  • Fast - responds quickly to user interactions

  • Engaging - feels like a natural app on the device

Benefits of PWA

PWAs offer a better user experience, they work reliably and perform better.

This presents many benefits, including:

  • Better ranking in Search Engines

  • Work reliably

  • Increased engagement

  • Improved conversions

Technical Requirements

Main technical requirements for a website to be qualified as a Progressive Web App:

  • Runs under HTTPS

  • Includes a Web App Manifest

  • Service Worker

HTTPS

HTTPS (Hypertext transfer protocol secure) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer.

E-commerce websites run under HTTPS because the security provided by it is a requirement to process transactions. In the world of PWAs, even content websites should run under HTTPS.

Manifest

The web app manifest is a simple JSON file that provides information to the browser about:

  • The Application

  • How it should behaved when "installed" on the user’s device

Manifest file example

{ "short_name": "hello", "name": "Hello World", "icons": [ { "src": "/images/icons-192.png", }, "type": "image/png", "sizes": "192x192" { "src": "/images/icons-512.png", ], } "type": "image/png", "sizes": "512x512" "start_url": "/hello-world/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/hello-world/", "theme_color": “#3367D6" }

Service Worker

A service worker is a type of web worker with the following characteristics:

  • Runs separately from the main browser thread

  • Intercepts network requests, cache and retrieve resources from cache

  • Delivers push messages

How to validate a PWA?

Google Lighthouse plugin for Google Chrome and Google Page Speed allow us to validate that a website is a valid Progressive Web App.

Google Lighthouse

google-lighthouse-pwa

E-Commerce and PWA

A few frameworks are available to build E-Commerce PWA websites such as Vue Storefront and PWA Studio. Read our article about the main PWA E-Commerce frameworks fore more information.

We build E-Commerce Progressive Web Apps. Read our Case Study: Building an E-Commerce PWA to get insights on our approach.