Last updated on 10 November, 2019

What is a Progressive Web App?

Definition and Main Concepts.

Progressive Web Apps are web applications that take advantage of modern technologies to deliver engaging user experiences on desktop and mobile devices.

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 for more information.

For insights and technical information on our approach to build eCommerce PWAs, read our case study about building an eCommerce PWA:

E-Commerce

Building an eCommerce PWA

How we built an eCommerce Progressive Web App (PWA) with Magento 2 and Contentful.

Building an eCommerce PWA

Featured Work

Dundas London

E-Commerce Progressive Web App

Magento 2ContentfulReact

Graze

E-Commerce Website

Magento 2 EELaunchDarklyAlgolia

Cult Beauty

Salesforce Integration

PHPSymfonySalesforce