El molesto caché http de las PWA

PWAUno de los problemas que a veces 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();
Leave a comment
I have read and accept the Privacy Policy

The comments sent by each user will always be visible in the corresponding post, and will not be used for any other purpose. The user has the right to access, rectify and suppress said comments, as reflected in our Privacy Policy