Uno 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();