Introduction Progressive Web App (PWA)

 

About Me

Twitter: twitter.com/Symfomany

Github: github.com/Symfomany

 

 

 

 

Consultant Web & Mobile

CTO de l'agence Taiwa

Quand un mobinaute réussit à accéder plus facilement à l’information qu’il recherche, il y a moins de chances qu’il s'en lasse...

Le  Potentiel des PWA


 

Définition

  •  Application Web "Mobile-First " proposant les fonctionnalités habituelles

  • Utilissation la puissance d'un navigateur Web

  • Disponibilité en mode hors ligne 

  • Possibilité d'ajout parmi nos applications de notre device mobile.

Associe le meilleur des 2 Mondes

le meilleur du web avec le meilleur des applications natives

 

Le futur du M-Commerce?

PWA Stats

Un installation facilitée

 

3 Piliers des PWA

 

1. Service Workers

 

2. Web App Manifest 

 

3. Web Notifications

Google Plus hit their goal of never downloading more than 60k of HTML, 60k of JavaScript and 60k of CSS at any one time!

Inconvénients

  • Un site existant ne peut pas simplement se transformer en PWA (et ce serait trop beau...).

  • Une connexion au serveur sécurisée et vérifiée (HTTPS-SSL)

  • Disponible pour Android pour Chrome, Opéra et Firefox

  • Apple avec Safari iOS le nouveau Internet Explorer?

     

     

     

     

     

     

     

Web APIs is HERE!

One Language, One Framework

if (navigator.online)

or

navigator.addEventListener('online', …)

navigator.addEventListener('offline', …)

 

Javascript Love

Google Lighthouse

Manifest.json

{ name: "My Awesome Web App",

short_name: "Awesome App",

icons: [{ src: "images/touch/icon-96x96.png", sizes: "96x96", type: "image/png" }, { src: "images/touch/icon-128x128.png", sizes: "128x128", type: "image/png" }, { src: "images/touch/apple-touch-icon.png", sizes: "152x152", type: "image/png" }, { src: "images/touch/chrome-touch-icon-192x192.png", sizes: "192x192", type: "image/png" }], start_url: "/index.html?homescreen=1", display: "standalone", background_color: "#3E4EB8", theme_color: "#2F3BA2" }

The App Shell

IndexedDB

IndexedDB est une base de données orienté objet pour JavaScript.

IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une clef

Démo

Des images optimisées

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" sizes="(min-width:20em) and (max-width:50em) 20em, (min-width:50em) and (max-width:80em) 40em, (min-width:40em) 10em" alt="Test" />

Les Services Workers

Multi-Threading JS

Background Sync API

Javascript Stratégie

  1. Cache first, Network fallback

  2. Network first, Cache fallback

  3. Network only

  4. Cache only

References

Demonstration

To Summary

 

  1. Les PWA fonctionnent généralement plus rapidement qu’un site web.
  2. Elles sont accessibles hors ligne.
  3. Elles sont responsive et fonctionnent donc avec n’importe quel système d’exploitation et n’importe quel format d’appareil électronique.
  4. Les PWA fonctionnent comme une application native : l’icône apparaît sur le téléphone comme n’importe quelle application, des notifications push peuvent être envoyées et elles ont accès à certaines fonctionnalités du téléphone.
  5. Les PWA se trouvent dans les moteurs de recherche et l’algorithme de Google les mets en valeur.
  6. Elles captent l’attention de l’utilisateur car elles permettent d’envoyer des notifications.
  7. Il n’est pas nécessaire de l’installer via un app store. C’est un plus pour l’utilisateur et le propriétaire. Pour le premier, c’est avantageux parce qu’il n’a pas besoin de passer par le magasin d’application et le second n’a pas besoin de se soumettre aux règles des app stores.
  8. Elles occupent moins d’espace dans la mémoire de l’appareil car il n’est pas nécessaire de le télécharger.

pwa

By Julien Boyer

pwa

  • 1,709