Building PWA (livre)

Question 1

Quelles sont les capacités d’une PWA ?

Answer 1

Travail offline, chargement rapide, notifications push, raccourci écran d’accueil, apparence application native

Question 2

Quel est le plus gros avantage d’une PWA ?

Answer 2

On réduit fortement les frais de maintenant, car l’application web fonctionnera sur tous les supports.

Question 3

Comment fonctionne le service worker ?

Answer 3

Il se situe entre le serveur et les onglets du navigateur. Il n’est jamais éteint pour pouvoir recevoir des notifications.

Question 4

Ou se place le fichier service worker dans son app ?

Answer 4

On le place a la racine, puis on le registrer dans le code

Question 5

service worker et HTTPS ?

Answer 5

Le service worker ne fonctionne que en HTTPS. Il ne n’installera pas en HTTP.

Question 6

Quel est le scope du service worker ?

Answer 6

Si il est installé sur “/”, alors il fonctionnera partout. Si il est installé sur “/coucou”, alors il ne fonctionnera que sur /coucou/*

Question 7

A quoi sert l’API Cache Storage ?

Answer 7

A mettre en cache une requête HTTP. Le cache va fonctionner si l’URL, les headers et les query params matchent.

Question 8

Quelles sont les 5 phases du service worker ?

Answer 8

Installing, installed, activating, activated, redundant.

Question 9

A quoi correspond la phase installed du service worker ?

Answer 9

Le service worker est téléchargé et se met en place dans le navigateur

Question 10

A quoi correspond la phase activated du service worker ?

Answer 10

Le service worker est installé et prend la main sur la page. (donc remplace l’ancien service worker)

Question 11

A quoi correspond la phase redundant du service worker ?

Answer 11

Le service worker a eu un problème pendant l’installation ou vient de se faire remplacer.

Question 12

Que se passe t’il lors du téléchargement d’un nouveau service worker ?

Answer 12

Il va s’installer mais ne va pas s’activer ! Il va attendre que tous les onglets du site soient fermés pour s’activer (pour éviter la concurrence)

Question 13

Quand le navigateur détecte un nouveau service worker ?

Answer 13

Quand son contenu a changé (sûrement via les hashs)

Question 14

Qu’est ce que le précache du service worker ?

Answer 14

Ce sont les routes que l’ont met dans le cache dès le lancement de l’application.

Question 15

Quel header HTTP faut il enlever sur le service worker ?

Answer 15

Le header “Cache” qui est défini côté backend. Sinon, il faudra demander a l’utilisateur de supprimer a la main le cache…

Question 16

Qu’est ce que LightHouse ?

Answer 16

Un outil pour voir si la PWA est bien optimisée

Question 17

Quels sont les stratégies de caching ?

Answer 17

Cache only, network only, cache first then network on fail, network first then cache on fail, generique fallback

Question 18

Que faire avec l’ancien cache ?

Answer 18

Le supprimer si le nom de la version est dans la clé du cache

Question 19

Qu’est ce que IndexDB ?

Answer 19

Une DB qui fonctionne dans le navigateur

Question 20

Quelles sont les caractéristiques d’IndexDB ?

Answer 20

Transactionnelle, NoSQL et indexable. C’est une DB clé valeur

Question 21

Comment fonctionne les migrations nativement avec IndexDB ?

Answer 21

Il n’existe pas de système, il faut les créer soit même. ça fonctionne avec un numéro de version.

Question 22

Comment envoyer une requête en différée dans une PWA ?

Answer 22

On va venir enregistrer l’évènement dans le syncManager

Question 23

Que se passe t’il si il y a un échec pendant le syncManager ?

Answer 23

La navigateur va réessayer la requête plus tard. Si il y a trop d’echecs il va abandonner.

Question 24

Quand le syncManager réessaye d’accomplir l’event ?

Answer 24

Immédiatement au moment du save de l’event, quand le navigateur passe de offline et online, sinon toutes les minutes

Question 25

Qu’est ce qu’un tag du syncManager ?

Answer 25

C’est le nom de l’événement. Il ne peut y avoir qu’un seul a chaque fois. C’est pour ça qu’un event doit être géré sous forme de liste, via l’IndexDB.

Question 26

Qu’est ce que le last chance dans le SyncManager ?

Answer 26

C’est le dernier essai d’un tag. Il peut être écouté via un booléen lastChance()

Question 27

Comment implémenter facilement le SyncManager ?

Answer 27

Implémenter un tag request-queue , puis stocker en IndexDB toutes les requêtes HTTP. Et boom, tout fonctionne or ligne !

Question 28

Comment communiquer du SyncManager au service worker ?

Answer 28

Via les posts messages. C’est bidirectionnel, entre le sw et l’app.

Question 29

Quels sont les conditions pour voir la bannière “Installer l’application” nativement ?

Answer 29

HTTPS, service worker, webmanifest bien configuré, que l’utilisateur montre de l’intêret pour le site et qu’il n’ai pas refusé la bannière

Question 30

Quelles conditions pour que l’utilisateur puisse recevoir les notifications ?

Answer 30

Il faut qu’il autorise via la NotificationAPI, et que l’application ai généré une VAPID key.

Question 31

Où les notifications doivent elles êtres écoutées dans une PWA ?

Answer 31

Dans le service worker, sinon ça ne fonctionnera pas lorsque que l’utilisateur quittera l’app.

Question 32

Qu’est ce qu’une VAPID key ?

Answer 32

C’est une clé qui permet d’autoriser un site a publier des notifications. C’est fait pour parler avec des serveurs de messageries, qui luttent contre le spam.

Question 33

Quelles sont les étapes pour envoyer une notification a un utilisateur dans une PWA ?

Answer 33

L’utilisateur accepte les notifs, ouvre une subscription a un serveur de messagerie. La subscription retourne des infos, que l’on va stocker dans le backend. Le backend va ensuite envoyer des notifs via le serveur de messageries grâce aux infos de la subscription.

Question 34

Quels sont les bons principe UX pour une bonne PWA ?

Answer 34

Notifier a l’utilisateur qu’il est passé offline, notifier que l’app est synchronisée, demander l’autorisation au bon moment pour les notifications, et bien expliquer pourquoi c’est utile.

Question 35

Que veut dire l’acronyme RAIL en UX ?

Answer 35

Reactivity, animation, idle, load.