El molesto caché http de las PWA

PWAUno de los problemas que me he encontrado al desarrollar PWA con Ionic / Angular es el caché en las peticiones http. Es molesto, porque obtienes los valores cacheados al hacer una petición en vez de los valores nuevos. O sea, haces una petición, obtienes unos valores. Ahora en el admin cambias los valores que va a obtener la petición http. Vuelves a hacer la petición, y obtienes los anteriores, en vez de los que acabas de poner. Pero si la vuelves a hacer una segunda vez, ya obtienes los que querías. Voy a centrarme en una app que hice en Ionic 3 / Angular 5. 

Buscando en Google una solución, hace tiempo que no había encontrado soluciones tan variopintas para un mismo problema, por ejemplo:

- Meter una directiva en el Apache para que el fichero "service-worker.js" no sea cacheado.
- Meter comandos de anulación del caché en las headers que lleva la petición http. Por ejemplo:

this.headers = new HttpHeaders({
'Content-Type': 'application/json',
'Cache-control': 'no-cache',
'Expires': '0',
'Pragma': 'no-cache'
});

- Meter metas en el index.html

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

- E incluso hacer la petición http dos veces seguidas, para que la segunda ya salgan los datos reales y no cacheados

Nada de esto funciona o es aceptable. Pero sí lo hace la solución más simple:

Hacer que la URL a la que se hace la petición http sea siempre distinta. Eso se consigue por ejemplo añadiendo un timestamp como parámetro al final de la URL:

url = url + "&random="+ (new Date()).getTime();
Deja un comentario
He leido y acepto la Política de Privacidad

Los comentarios enviados por cada usuario serán siempre visibles en el post correspondiente, y no serán utilizados para ningún otro fin. El usuario tiene derecho a acceder, rectificar y suprimir dichos comentarios, tal como se refleja en nuestra Política de Privacidad