Transformer un site web en application grâce à la technologie PWA (Progressive Web Apps)
Publié le 11 février 2024
Sommaire
Parallèlement à la création d'un site web, il peut être intéressant de publier une application sur les plateformes spécialisées : AppStore (Apple), Google Play (Android), Microsoft Store, Huawei Gallery, Galaxy Store (Samsung) ... L'application est un bon moyen de fidéliser ses visiteurs puisqu'elle intègre directement le bureau d'un ordinateur ou la page d'accueil d'un smartphone sous forme d'icône. Visible au quotidien, l'application aura plus de chance d'être consultée qu'un simple lien favori crée à partir du navigateur.
Les applications natives
Le développement d'une application reste cependant complexe et coûteux ; on parle ici de logiciel natif dans le sens où son fonctionnement dépend directement de l'OS sur lequel il est installé. En effet, une application doit être codée dans différents langages pour s'adapter aux exigences techniques de chaque système d'exploitation : MacOs, iOS, Android, Windows ....
Des agences de développement se sont spécialisées sur ce créneau. Bien que le coût d'une application dépende principalement de ses fonctionnalités, on estime qu'il faut débourser entre 5 000 et 10 000€ pour disposer d'une application simple. Une fois codée, l'application devra être soumise et approuvée par les différentes plateformes pour être diffusée. Cette étape s'accompagne de frais d'inscription d'environ 25$ sur Google Play et d'un abonnement annuel de 99$ pour l'App Store.
La solution alternative du Progressive Web App
Parallèlement aux applications natives, il est possible de transformer une page HTML (ou un service web) en application grâce à la technologie PWA (Progressive Web Apps). Appelée application web progressive en français, ce format permet d'afficher un site web de la même manière qu'une application. Une fois installée, elle sera présente sur le bureau d'un PC, dans le Launchpad d'un système macOS, sur la page d'accueil d'un iPhone ou d'un smartphone Android. L'application permet alors d'accéder au site, sans avoir à ouvrir le navigateur web !
Prérequis à la création d'une application PWA
Pour fonctionner, cette technologie requiert la validation des éléments technique suivants :
- Connexion sécurisée par le protocole HTTPS
- Certaines balises META saisies dans le code HTML
- Icône de l'application dans les résolutions 512x512 et 192x192 pixels (idéalement au format .png)
- Fichier site.webmanifest installé sur le serveur. C'est lui qui définit les réglages de l’application (titre, icône, mode d’affichage…)
Balisage des pages Progressive Web App
Les balises META suivantes doivent être intégrées dans le HEADER des pages. Le fichier site.webmanifest doit aussi être obligatoirement mentionné. Le fichier JavaScript nommé pwa.js reste à ce stade facultatif, nous y reviendrons plus tard...
- apple-mobile-web-app-capable : yes - indiquent au navigateur que la page peut être utilisée comme une application (Apple)
- apple-mobile-web-app-title : titre de l'application (Apple)
- apple-mobile-web-app-status-bar-style : couleur de la barre d'état (Apple)
- application-name : titre de l'application (HTML5)
- mobile-web-app-capable yes - indiquent au navigateur que la page peut être utilisée comme une application (HTML5)
- msapplication-starturl : URL de lancement de l'application (HTML5)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Exemple PWA</title> <meta name="language" content="fr"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes"> <meta name="msapplication-tap-highlight" content="no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="msapplication-starturl" content="/pwa.html"> <meta name="HandheldFriendly" content="true"> <meta name="format-detection" content="telephone=no"> <meta name="application-name" content="Exemple PWA"> <meta name="apple-mobile-web-app-title" content="Exemple PWA"> <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"> <script src="/js/pwa.js" defer></script> <link rel="manifest" href="/favicon/site.webmanifest"> </head> <body> <button class="add-button" hidden>Télécharger l'application</button> </body> </html>
Fichier site.webmanifest et réglages de la Progressive Web Apps (PWA)
Le fichier site.webmanifest est indispensable. Généralement placé dans le répertoire favicon au même titre que les icônes, il détermine les paramètres de l'application.
{
"short_name": "Exemple PWA",
"name": "Exemple PWA",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "fullscreen",
"Scope": "/",
"orientation": "portrait",
"serviceworker": "/",
"icons": [
{
"src": "/favicon/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/favicon/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
} ],
"start_url": "/pwa.html"
}
Si ces recommandations sont respectées, le site web doit déjà permettre l'installation de l'Appli PWA. Sur Chrome, un nouvel icône apparaît à côté de la barre d'adresse pour inviter l'utilisateur à installer l'application. Sur Android, cette même fonction est présente dans le menu des options sous l'intitulé "Installer l'application".
Lien sponsorisé : Le web recherche un équilibre entre vitesse de chargement et qualité de rendu, en créant des visuels attractifs avec un graphiste professionnel. Contactez l'agence Votre Assistant Virtuel (VAV) et bénéficiez du savoir-faire d'un graphiste-designer qualifié.
Vous pouvez adopter une démarche plus pro-active en intégrant un bouton, directement dans votre page web. Ce bouton peut être personnalisé grâce aux styles CSS et mis en cohérence avec la charte graphique de votre site web, c'est là qu'intervient notre fichier pwa.js.
Il détermine la faisabilité de l'installation de l'application selon les critères de chaque navigateur et fait apparaître un bouton directement dans votre interface web. Le bouton apparaît souvent après quelques secondes de navigation.
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
addBtn.style.display = 'block';
addBtn.addEventListener('click', () => {
addBtn.style.display = 'none';
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
}
else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
Une application web progressive faire fonctionner du javascript et proposer des fonctionnalités avancées (gestion de panier, achat en ligne, compte utilisateur ...). Elle peut aller encore plus loin en intégrant la prise en charge des notifications push ou la navigation hors connexion grâce à un service worker. Cette partie fera l'objet d'un autre TUTO ;-)
De plus, comme une Appli PWA est directement liée à un site web, elle ne requiert aucune mise à jour.