Qu’est-ce qu’une application Web progressive (PWA)? –
Les applications Web progressives (PWA) sont des sites Web qui utilisent un ensemble de technologies Web modernes pour offrir des expériences utilisateur semblables à des applications. Les fonctionnalités typiques de PWA incluent la prise en charge hors ligne, la synchronisation en arrière-plan et la possibilité d ‘«installer» le site en tant qu’application mobile.
PWA est un terme général utilisé pour référencer plusieurs technologies. Une PWA comprend généralement un manifeste d’application Web et un Service Worker. Le manifeste d’application Web fournit des données utilisées pour enregistrer le site avec la liste des applications d’un système d’exploitation. Le Service Worker peut être utilisé pour ajouter des fonctionnalités qui restent actives après la fermeture des onglets du navigateur du site.
Tous les sites n’utiliseront pas toutes les fonctionnalités possibles. Certains comprendront un manifeste d’application Web, mais aucun service Worker; d’autres auront un Service Worker mais pas de support d’installation d’application. Il n’y a pas de norme particulière définissant comment une PWA doit se comporter. Une PWA est un site qui utilise certaines de ces technologies pour offrir un certain niveau de parité des fonctionnalités avec les applications natives.
Sommaire
Comprendre l’amélioration «progressive»
La partie «progressive» des Progressive Web Apps découle de leur utilisation prévue de l’amélioration progressive. Les fonctionnalités PWA sont encore assez récentes et peuvent ne pas être prises en charge dans tous les navigateurs. Une PWA doit continuer à fournir son expérience Web de base même si les API de navigateur telles que les techniciens de service ne sont pas disponibles.
Les fonctionnalités telles que les notifications push ne devraient pas être une partie obligatoire de votre expérience. Si votre site ne parvient pas à s’inscrire aux notifications push, le reste du site devrait continuer à fonctionner normalement. Lorsque le navigateur Est-ce que prennent en charge les technologies modernes, votre site doit les traiter comme une amélioration qui donne à l’utilisateur une commodité supplémentaire.
Disponibilité des fonctionnalités
Les fonctionnalités PWA fournissent une intégration plus profonde entre votre site Web et l’appareil de l’utilisateur. Par conséquent, les API utilisées pour les créer sont limitées aux connexions HTTPS. Cela permet de garantir que le contenu n’a pas été falsifié pour installer de manière persistante des applications néfastes sur votre appareil.
Les fonctionnalités individuelles sont protégées par des autorisations Web destinées aux utilisateurs. Des fonctionnalités telles que les notifications push pourraient être utilisées abusivement pour bombarder l’utilisateur avec du contenu indésirable. Les utilisateurs doivent accuser réception d’une invite d’autorisation qui accorde à votre site la possibilité d’utiliser des fonctionnalités potentiellement intrusives.
Ces conditions signifient que vous devez utiliser la détection des fonctionnalités avant d’essayer d’utiliser la plupart des API pertinentes. Une fonctionnalité peut ne pas être disponible car le navigateur ne la prend pas en charge. Cependant, il peut également être désactivé en raison d’une connexion non sécurisée ou parce que l’utilisateur a refusé une invite d’autorisation. Vous ne pouvez pas anticiper ce dernier scénario; l’utilisateur peut changer d’avis à tout moment.
Traits PWA
Bien qu’il n’y ait pas de norme pour les PWA, la plupart des sites offrant une expérience de type application présentent les caractéristiques suivantes:
- Installable – Sur les plates-formes prises en charge, le site Web peut être «installé» comme une application mobile. Les effets varient selon le système d’exploitation et le navigateur.
- Fonctionne hors ligne – Les Service Workers sont des scripts qui continuent à s’exécuter même lorsque votre site n’est pas ouvert. Ils peuvent également intercepter les requêtes réseau, ce qui vous permet de servir des actifs essentiels à partir d’un cache. Cela permet à votre site de continuer à fonctionner lorsque l’utilisateur est hors ligne.
- Interface utilisateur semblable à une application – Bien que ce ne soit pas une exigence, les PWA sont susceptibles de mettre davantage l’accent sur l’utilisation de contrôles d’interface utilisateur modernes qui s’intègrent bien aux styles d’applications natives. Les PWA devront être réactifs à différentes tailles d’écran.
Au-delà de ces caractéristiques essentielles, les PWA individuels superposeront des fonctionnalités supplémentaires pour créer l’expérience utilisateur dont ils ont besoin. Ces fonctionnalités peuvent inclure des notifications push, des téléchargements en arrière-plan et des extractions périodiques de données en arrière-plan. Ces fonctionnalités optionnelles vous permettent de réengager l’utilisateur et d’anticiper ses besoins.
Manifeste d’application Web
Les manifestes d’application Web sont des fichiers JSON définissant des informations clés sur votre site. Cela inclut des détails tels que le nom du site, la couleur d’accentuation et les emplacements des fichiers d’icônes.
Les navigateurs et les systèmes d’exploitation utilisent ces informations pour créer des entrées d’application au niveau du système lorsque vous «installez» votre site. C’est ainsi que votre site obtient une icône de tiroir d’application sur Android ou un lien de menu Démarrer sur Windows.
Voici un exemple de manifeste:
{"name": "Example App",
"display": "standalone",
"background_color": "#fff",
"description": "My App",
"start_url": "/",
"icons": [
{
"src": "/icon.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
le display La propriété déclare que le site doit être lancé dans sa propre fenêtre autonome lorsqu’il est ouvert à partir d’un tiroir d’application. le start_url La propriété définit l’URL initiale vers laquelle naviguer après le lancement.
Votre site doit annoncer son manifeste d’application Web à l’aide d’un link balise dans son HTML:
<link rel="manifest" href="/manifest.json">
Les navigateurs tenteront ensuite de récupérer le manifeste. S’il est valide, l’utilisateur peut être invité à «installer» l’application. Sur Chrome pour Android, cela apparaît sous la forme d’une barre «Ajouter à l’écran d’accueil». L’apparition de la barre n’est pas garantie – Chrome utilise des heuristiques telles que la fréquence à laquelle vous visitez le site pour déterminer si un indice d’installation doit être affiché.
Travailleur de service
Les Service Workers sont créés à l’aide de JavaScript. Ils se distinguent du JavaScript principal de votre site. Un technicien de service est enregistré à partir de votre script principal. Le navigateur maintient ensuite le service worker en cours d’exécution lorsque l’onglet est fermé. Cela vous permet d’exécuter des opérations en arrière-plan qui peuvent survivre à la visite de l’utilisateur sur votre site.
Voici comment enregistrer un technicien de service:
if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/service-worker.js"); }
le service-worker.js Le script sera téléchargé et activé en tant que service worker. Un technicien de service n’offre aucune fonctionnalité utile à lui seul. Vous devez utiliser des API telles que les caches, la synchronisation en arrière-plan ou les notifications push au sein de votre service worker.
Voici un exemple de base qui met en cache tous les actifs associés à notre application:
self.addEventListener("install", e => { e.waitUntil(async () => { const cache = await caches.open("my-app-cache"); await cache.addAll([ "/index.html", "/my-css.css", "/my-js.js", "/assets/icon.png", "/assets/my-header-image.png" ]); }); }); self.addEventListener("fetch", e => { e.respondWith(async () => { const cached = await catches.match(e.request); if (cached) return cached; const response = await fetch(e.request); return response; }) });
Cela utilise le install événement de cycle de vie du service worker pour télécharger tous les actifs critiques. Ils seront ajoutés à un cache dédié qui est contrôlé par le technicien de service.
Le technicien de service écoute également les fetch un événement. Cela se produit chaque fois qu’une demande réseau est effectuée. L’objet événement comprend un request propriété qui est un objet de requête accepté par le fetch() API.
Le code vérifie d’abord si la demande existe déjà dans le cache. Si c’est une URL qui a été mise en cache plus tôt, cette vérification réussira et la réponse mise en cache sera renvoyée. Sinon, la demande est transmise au fetch() API. L’élément sera chargé sur le réseau comme d’habitude.
Cet exemple ne montre que le conseil de ce que les travailleurs des services peuvent offrir. Dans une vraie application, vous aurez souvent besoin d’une mise en cache plus avancée, de capacités d’arrière-plan supplémentaires et d’événements de cycle de vie supplémentaires (pour contrôler la façon dont votre technicien de service remplace et est remplacé par d’autres versions).
Résumé
Les applications Web progressives sont des applications Web qui utilisent un ensemble d’API de navigateur associées pour offrir une expérience semblable à une application. Vous avez probablement utilisé des PWA dans le passé, même si vous n’en étiez pas consciemment conscient.
L’expérience PWA est fondée sur l’amélioration progressive et le choix de l’utilisateur. Vous devez donner votre consentement avant que chaque site puisse activer ses fonctionnalités PWA. Sinon, le site doit fournir son expérience de base basée sur le navigateur, sans les capacités supplémentaires fournies par les technologies PWA.
