Avec les progrès récents de la technologie web, de plus en plus de développeurs se tournent vers les technologies de l'information. Applications Web progressives (PWA). Les PWA permettent aux sites web de fonctionner hors ligne, offrant aux utilisateurs une expérience transparente même lorsque la connectivité réseau est limitée ou indisponible. Dans cet article de blog, nous verrons ce qu'est une PWA, comment mettre en œuvre une fonctionnalité hors ligne et comment configurer les fichiers essentiels, manifest.json et sw.jspour que votre site web fonctionne hors ligne.
Qu'est-ce qu'un PWA ?
A Application Web progressive (PWA) est un type d'application qui combine les avantages des applications web et natives. Les PWA offrent aux utilisateurs une expérience rapide, fiable et hors ligne. L'une des caractéristiques principales d'une PWA est sa capacité à fonctionner hors ligne, grâce à une technologie connue sous le nom de Travailleur des services.
- Progressif : Fonctionne pour tous les utilisateurs, quel que soit le navigateur choisi, et s'améliore progressivement en fonction des capacités du navigateur.
- Réactif : S'adapte à différents appareils et tailles d'écran.
- Possibilité de connexion hors ligne : Fonctionne même dans des environnements hors ligne ou à faible connectivité, améliorant ainsi l'expérience de l'utilisateur.
- Une expérience similaire à celle d'une application : Offre une expérience similaire aux applications natives, y compris la possibilité d'être ajoutée à l'écran d'accueil et d'envoyer des notifications push.
- Toujours à jour : Maintient automatiquement le contenu à jour sans mises à jour manuelles.
Mettre en œuvre des fonctionnalités hors ligne dans une PWA
La fonctionnalité hors ligne d'une PWA est principalement mise en œuvre à l'aide d'une fonction Travailleur des services. Un service worker est un fichier JavaScript qui s'exécute en arrière-plan, intercepte les demandes du réseau et sert les ressources mises en cache lorsque le réseau n'est pas disponible. Pour ce faire, deux fichiers essentiels sont nécessaires :
manifest.json: Un fichier de métadonnées qui définit le nom de l'application, ses icônes, son URL de démarrage et d'autres paramètres.sw.js: Un fichier de travailleur de service qui gère la mise en cache et les demandes de réseau.
Examinons chaque fichier en détail et donnons des exemples.
manifest.json Fichier : Définition des métadonnées de l'application
Le manifest.json contient les paramètres de votre application, tels que son nom, ses icônes, son URL de démarrage et son mode d'affichage. Ce fichier est essentiel pour rendre votre application web installable et accessible hors ligne.
Exemple : manifest.json
{
"name" : "PWA hors ligne",
"short_name" : "PWA",
"description" : "Une application web progressive avec des capacités hors ligne",
"start_url" : "/index.html",
"display" : "standalone",
"background_color" : "#ffffff",
"theme_color" : "#0000ff",
"icônes" : [
{
"src" : "/icons/icon-192x192.png",
"sizes" : "192x192",
"type" : "image/png"
},
{
"src" : "/icons/icon-512x512.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}Dans cet exemple :
start_url: Définit l'URL qui sera ouverte lorsque l'utilisateur lancera l'application à partir de l'écran d'accueil.affichage: Régler surautonomepour que l'application ressemble à une application native sans l'interface utilisateur du navigateur.icônes: Spécifie les icônes à utiliser lorsque l'application est ajoutée à l'écran d'accueil.
Le manifest.json doit être lié au code HTML de la manière suivante :
<link rel="manifest" href="/manifest.json">sw.js Dossier : Mise en œuvre de fonctionnalités hors ligne avec un Service Worker
Le service worker est un composant clé qui permet à votre application web de fonctionner hors ligne. Il intercepte les demandes du réseau et sert les ressources mises en cache, garantissant ainsi une expérience fluide même lorsque le réseau est en panne.
Exemple : sw.js
Voici un exemple basique de travailleur de service pour mettre en œuvre la fonctionnalité hors ligne :
const CACHE_NAME = 'offline-cache-v1' ;
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js',
'/icons/icon-192x192.png',
'/icons/icon-512x512.png'
] ;
// Événement d'installation du service worker
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache') ;
return cache.addAll(urlsToCache) ; // Mise en cache des ressources essentielles
})
) ;
}) ;
// Événement d'activation du travailleur de service
self.addEventListener('activate', (event) => {
console.log('Service Worker activated') ;
// La logique de suppression des anciens caches peut être ajoutée ici
}) ;
// Événement Fetch pour intercepter les requêtes réseau
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
if (response) {
return response ; // Retourne la ressource mise en cache
}
return fetch(event.request) // Récupération sur le réseau
.catch(() => caches.match('/offline.html')) ; // Fournit une page hors ligne en cas d'échec du réseau
})
) ;
}) ;Dans cet exemple :
- Événement d'installation (
installer): Le travailleur de service met en cache les ressources spécifiées dansurlsToCachelors de sa première installation. - Activation de l'événement (
activer): S'exécute lorsque l'agent de service est activé. Cet événement peut être utilisé pour nettoyer les anciens caches. - Événement de recherche (
rechercher): Intercepte les demandes du réseau et renvoie les réponses mises en cache si elles sont disponibles ; dans le cas contraire, il récupère les ressources du réseau. Si le réseau n'est pas disponible, il sert une page hors ligne (par exemple,/offline.html).
Pour enregistrer le service worker dans votre fichier HTML, ajoutez le script suivant :
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
}, (error) => {
console.error('Service Worker registration failed:', error);
});
});
}
</script>Ce script vérifie si le navigateur prend en charge les travailleurs de service et enregistre le travailleur de service au chargement de la page.
Conclusion
Les PWA sont particulièrement utiles pour offrir une expérience web fiable, même dans les environnements hors ligne ou lorsque la connectivité réseau est instable. En définissant les paramètres de votre application dans la section manifest.json et la mise en œuvre de stratégies de mise en cache dans sw.jsvous pouvez créer un site web qui fonctionne hors ligne et qui offre à vos utilisateurs une expérience rapide, semblable à celle d'une application.
Maintenant, essayez d'appliquer la PWA à votre projet web et offrez une application web accessible et robuste sur laquelle les utilisateurs peuvent compter à tout moment, n'importe où, même sans connexion internet.
Dans WordPress
Il existe également un plugin appelé Super PWA. Ce plugin permet de transformer facilement un site web WordPress en une Progressive Web App (PWA) avec un minimum d'effort. Super PWA permet de mettre en œuvre les fonctionnalités essentielles d'une PWA, telles que la prise en charge hors ligne, l'interface de type application et la possibilité pour les utilisateurs d'ajouter le site web à leur écran d'accueil.
Super PWA génère automatiquement le manifest.json et configure le sw.js (service worker) pour vous, ce qui simplifie le processus de transformation de votre site WordPress en une PWA entièrement fonctionnelle. Il offre également des options de personnalisation pour définir le nom de votre application, les icônes, la couleur du thème, et plus encore. Cela en fait un excellent choix pour les utilisateurs de WordPress qui cherchent à tirer parti des avantages des PWA sans avoir à se plonger dans un codage complexe.
