🔧 Mises à jour des pwa

Les pwa permettent de mettre en cache des contenus du site ( css, js, articles, etc. ).
Or cette mise en cache peut-être problématique si vous faites des mises à jour.
En effet, et spécialement pour une application qui ne contient qu'une page, l'utilisateur ne naviguera pas sur plusieurs pages.
Et, pire encore, dans le cas où l'utilisateur a une fenêtre en permanence ouverte sur une application mono-page ( comme un jeu de solitaire :-), il ne rechargera jamais la page.
Je vous propose ci-dessous un ensemble de mesures qui permettent de gérer ces mises à jour. Il y en a peut-être d'autres...

Ne JAMAIS mettre en cache le service worker dans le navigateur. Les navigateurs internet gèrent bien le cache et en particulier, les programmes javascript ont une durée de vie que les programmeurs fixent à plusieurs semaines ou mois.
Mais c'est une très mauvaise idée de mettre en cache le service worker, en conséquence, j'utilise php et mes services workers sont précédés d'une entête qui ressemble à celle ci :
```
<?php
// quelque soit la conf apache, ce script ne DOIT PAS être mis dans le cache du navigateur
header('Content-Type: application/javascript');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Expires: on, 01 Jan 1970 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
?>
```
Ne JAMAIS mettre en cache le service worker dans le service worker lui même. La liste des fichiers que vous mettez en cache dans le service worker (cache.addAll( ['' , '/' , 'favicon.ico' , 'manifest.json' , ....])) ne doit pas contenir le service worker lui même.
Prévoyez un appel ajax qui vous permet d'aller vérifier sur le serveur la version en cours.
Cet appel doit être fait seulement si l'utilisateur est en ligne :
```
if(navigator.onLine==true){
 // faire le job!
}
```
Ne rechargez JAMAIS automatiquement la page. Faites le seulement sur une action de l'utilisateur car si par malheur il y a un problème, votre utilisateur pourrait se retrouver avec une page qui se recharge en boucle indéfiniment...
Une utilisation possible de cet appel ajax est d'afficher un bouton qui incite l'utilisateur à rafraîchir la page.
J'ai utilisé cette technique dans le jeu des syllabes car si deux joueurs veulent jouer sur la même partie, ils doivent avoir exactement les mêmes composants en mémoire.
Une autre utilisation possible de cet appel ajax est de rafraîchir la page lors d'une action.
J'ai utilisé cette technique dans tous les jeux.
Quand un utilisateur charge une nouvelle partie, les éléments sont mis en place, puis cet appel ajax est effectué en désynchronisé par un setTimeout. Si au retour de cette appel une nouvelle version est disponible, la page est rechargée par un
```
document.location=String(document.location);
```
ce qui provoque généralement un petit clignotement "acceptable" visuellement car ces jeux sont très rapides à télécharger.
Mais si votre application est très lourde à télécharger ( 1 seconde ou plus ), il vaut mieux afficher un petit message du type :
Veuillez patienter quelques secondes, mise à jour de "votre pwa" en cours.
Cela dit, en phase de mise en place de votre application, vous faites généralement une mise à jour par jour (ou plusieurs en cas de bug et qui n'en fait pas ?) puis les évolutions/corrections se font plus rares.
Un avantage de cet appel ajax est que vous avez une trace dans votre serveur de l'utilisation de ce jeu.
Pour éviter qu'un utilisateur qui clique compulsivement sur le bouton "nouvelle partie" ne laisse trop de logs, il est prudent vérifier au moyen d'un timer que l'appel précédent n'a pas eu lieu trop récemment.

📝 Les Articles.

Le symbole "🔧" (clé plate) indique les articles techniques.