Progressive Web Apps (PWA)

Publié le 15 June 2020 par Adrien Saint

What is a Progressive Web App (PWA)?

Progressive web apps are apps relying 100% on web APIs. They -almost- look like your normal app, but feature the browser and a visible URL, and even these can progressively disappear within the PWA to look like a native app.

Where do PWA belong?

Here is a point of vocabulary. Hopefully this will make it easier to see where PWA stand in the linguo of apps and mobile websites:

The Mobile website is a second site that relays the same information in a more mobile friendly way when the user is on a tablet or a smartphone.

A Responsive website is a website built with Responsive design, meaning that the design is automatically adapted according to the device used.

A Web App is a site developped specifically for tablets and mobiles.

Native mobile apps are a software, a mobile app developped for a specific operating system (iOS, Android…). They are downloaded from the stores of the OS, App Store or Playstore for example.

The Hybrid App is a mix of a web app and a native app. It is ran from a store and adapts specifically to the OS it is downloaded on.

Progressive Web Apps (PWA) are apps that are similar to the above solutions in different ways. They use the best tech of the web, html5 combined with functionalities of apps to provide a great user experience. They are particularly close to native apps in the way people use them, except that they are made available from the browser and not from a store. They are also in between web apps and mobile apps

How does a PWA work?

PWAs are actually websites developped for mobile use. They use an architecture featuring a Shell enabling it to be used offline.

PWA shell

Then they rely on Service Workers, and scripts working in parallel of the web pages. Service workers make the offline mode possible, including notifications or background updates.

They use a file called .manifest (json) enabling it to look more native to the OS (full screen display with no visible URL, horizontal mode etc).

 

What are the advantages of a PWA?

A greatly improved User Experience

– Loading times are considerably reduced
– Offline mode
– They are Responsive, compatibles with PCs, tablets and mobiles
– No install is required
– PWA are available from a simple URL or from an app icon right from the home screen
– They do not take storage space
– They are secure (HTTPS protocol)
– They can provide a full screen experience just like a native app

Here are some good reasons to develop a PWA :

1. It is less expensive (no store publication, no versions like for native apps)
2. It is SEO-friendly (it is available from browsers)
3. It is secure (great for e-commerce)
4. It is reliable and always up to date
5. It is engaging (notifications are available)

 

Finally, here are some of our favourite web apps:

  • Twitter Mobile (https://mobile.twitter.com/)
  • L’Equipe (https://m.lequipe.fr)
  • Flipkart (https://www.flipkart.com/)
  • Pokedex.org (https://www.pokedex.org/)

 

 

sources:

https://www.eurelis.com/blog/introduction-progressive-web-app
http://blog.ippon.fr/2017/11/05/progressive-web-app/

SUR LE MÊME
THèME

restez
informés

Abonnez-vous à notre newsletter pour être certain d’avoir un autre regard sur le numérique, vu dans haut, en panoramique !