Je suis en train de jouer du JS pour faire une PWA (progressive web app).

Un des aspects sympa est la gestion du cache : on utilise le cache et les données hors connexion du navigateur pour notre PWA.

Comme le dit la page, le truc c’est que c’est au PWA de gérer si une URL doit être cachée :
– url des images, des scripts, des CSS : mis en cache
– url des XHR et requêtes renvoyant des données JSON (par exemple) : pas de cache.

Dans ce dernier cas, la PWA ignore son cache et lance une requête, qui atterrit… dans le navigateur !

Les PWA sont des app (en JS/HTML/CSS) dont le moteur d’exécution est le navigateur. C’est le navigateur qui gère les requêtes réseau (entre autres).

Et concernant ces dernières requêtes non cachées par la PWA, le navigateur décide :
– soit il fait une vraie requête vers le serveur
– soit il cherche dans son cache disque à lui

Donc même avec un bouton « rafraîchir » dans la PWA, on n’est pas assuré que les données soient bien transmises au serveur, et il n’y a aucun moyen de forcer ça depuis la PWA.

… enfin si : en ajoutant un paramètre (timestamp par exemple) à l’URL, mais là, ça peut poser problème pour le cache interne au PWA (qui risque de cacher toutes les URL identiques ne différant que par leur timestamp).

La solution, c’est d’agir au niveau du serveur : ajouter une en-tête Cache-Control au fichier appelé par le XHR :

Cache-Control: max-age=0

Soit en PHP :

header('Cache-Control: max-age=0');

Là, le navigateur ne conservera pas le fichier en cache disque, et si la PWA fait une requête, elle atterrira sur le serveur à tous les coups.

— (permalink)