Transformer une application AngularJs en PWA
chez Team@solutions
Table des matières
1. Progressive Web App (PWA).........................................................................................................3
2. Le manifeste d’application.............................................................................................................3
3. Service worker................................................................................................................................5
4. Enregistré le service worker...........................................................................................................6
5. Implémentation :............................................................................................................................6
2
1. Progressive Web App (PWA)
Une PWA est une application web qui peut être installée sur un système, au
même titre que les applications natives. Elle peut fonctionner en offline et
conserver le cache.
Que faut-il faire pour rendre une application web progressive ?
Vérifier que l’appli n’est pas déjà installable
L’application doit être servie via HTTPS
L’application doit comprendre un manifeste d’application web
L’application doit enregistrer un service worker avec fetch
2. Le manifeste d’application
Le manifeste d’application web est un fichier json qui donne certaines
informations au pwa et dit comment il doit s’installer sur les différents
supports.
Le contenu minimal d’un fichier [Link] est constitué :
3
Pour
créer un fichier [Link], cliquer ici.
Après avoir téléchargé le fichier le mettre à la racine au même emplacement
que le fichier [Link]. Ensuite, l’appelé dans le fichier [Link] dans le
<head></head> juste après les balises <meta> comme suit : <link rel='manifest'
href='/[Link]'>
4
3. Service worker
Un service worker est un proxy réseau programmable qui vous permet de
contrôler la façon dont les demandes réseau de votre page sont traitées.
Il s'agit essentiellement d'un fichier JavaScript qui s'exécute séparément du fil
d'exécution principal du navigateur, interceptant les requêtes réseau, mettant
en cache ou récupérant des ressources dans le cache, et délivrant des
messages push.
Le service worker peut recevoir des messages push d'un serveur lorsque
l'application n'est pas active. Cela permet à votre application d'afficher des
notifications push à l'utilisateur, même si elle n'est pas ouverte dans le
navigateur.
Les services workers ne fonctionnent que sur HTTPS. Comme ils peuvent
intercepter les requêtes réseau et modifier les réponses, les attaques de type
"man-in-the-middle" peuvent être très graves.
Les services workers permettent aux applications de contrôler les demandes du
réseau, de mettre en cache ces demandes pour améliorer les performances et
de fournir un accès hors ligne au contenu mis en cache.
Les services workers dépendent de deux API pour faire fonctionner une
application hors ligne : Fetch (un moyen standard de récupérer du contenu sur
le réseau) et Cache (un stockage de contenu persistant pour les données de
l'application). Ce cache est persistant et indépendant du cache du navigateur
ou de l'état du réseau.
Notre service worker est le fichier [Link].
5
C’est dans ce fichier qu’on va appeler toutes les ressources de notre
application : les fichiers js, css déclarés dans le fichier [Link] et le fichier
[Link] lui-même.
Figure 1: Déclaration des fichiers dans le service worker
4. Enregistré le service worker
L’enregistrement du service worker se fait dans un fichier js : [Link]
La copie des fichiers hors connexion se fait avec le fichier js : [Link]
6
5. Implémentation :
Copier et coller les fichiers [Link] et [Link] à la racine de l’application ; créer un dossier js
s’il n’existe pas et y coller le fichier [Link].
Dans le fichier [Link] déclaré vos fichiers : tous les fichiers js et css appelés dans l’[Link] et aussi
l’[Link].
