Problème de cache dans HA lors de la création de custom-cards personnalisées

Entraide Home Assistant
1

Bonjour à tous.

Je suis en train de créer des customs cards pour HA, et je rencontre un problème de cache avec mon navigateur.

avec la conséquence suivante: si je change un image de fond dans le code d’une carte, même en vidant le cache, en redémarrant HA, proxmox, mon PC, l’image de fond et autre modification du CSS, les modification ne sont pas prises en compte.

le code fonctionne correctement en mode de navigation privée mais pas en mode normal, cela semble indiquer probablement un problème lié au cache du navigateur. Pour résoudre ce problème et m’assurer que le code fonctionne également en mode public, voici quelques étapes que j’ai essayé de suivre :

  • Vider le Cache du Navigateur et supprimer les fichiers cache et les cookies.

  • Désactiver les Extensions :

  • Utiliser un Paramètre de Désactivation du Cache : Dans certaines situations, vous pouvez désactiver le cache pendant que vous développez ou testez. Ouvrez la console de développement (généralement avec F12) et cochez l’option « Disable cache » (Désactiver le cache) dans les paramètres du réseau. Cela forcera le navigateur à toujours récupérer les nouvelles ressources.

  • Redémarrer le Navigateur : Parfois, un redémarrage complet du navigateur peut également résoudre les problèmes de cache persistants.

Dans les possibilités que j’ai trouvé, il y a:

" Configurer Cache-Control : Si vous avez le contrôle sur le serveur qui héberge votre code (dans ce cas, Home Assistant), vous pouvez configurer les en-têtes de réponse HTTP pour indiquer au navigateur de ne pas mettre en cache les fichiers. Vous pouvez utiliser l’en-tête Cache-Control: no-cache dans votre serveur pour indiquer au navigateur de ne pas mettre en cache les ressources."

Mais là je ne sais pas comment faire???

A ce niveau d’informatique je suis totalement dépassé.

J’ai testé avec microsoft edge et cela fonctionne directement.
Malheureusement après un nouveau changement du code de la custom-card dans HA, l’erreur est toujours là, même dans microsoft Edge

J’ai donc bien un problème de cache un problème propre au navigateur Chrome???

Cette précision apportée à ChatGPT, le réponse à mon problème semble plus précis, même si hélas je ne comprends pas bien ce que je dois faire!!!

"Pour résoudre ces problèmes de cache de manière définitive, il est recommandé de mettre en œuvre des solutions spécifiques au niveau de votre site ou de votre application. Cela pourrait inclure la configuration de l’en-tête Cache-Control, l’utilisation de paramètres de désactivation du cache pendant le développement, ou même la mise en place de stratégies de cache plus intelligentes.
En résumé, tester votre code sur différents navigateurs peut aider à identifier des problèmes liés au cache, mais la résolution définitive devrait impliquer la gestion adéquate du cache dans votre application. "

Merci pour votre aide.

2

Je me répond à moi même:
En passant par les paramètres du navigateur, dans cache, faire « Effacer les données de navigation » « Général » le cache s’est vraiment effacé.
ce pendant il faut refaire cette manipulation à chaque changement du code dans la custom card

3

Salut,

CTRL+F5 ça marche bien pour vider le cache sous-chrome

1 « J'aime »
4

Malheureusement ça ne fonctionne pas pour rafraichir les custom-cards écrites à la main.
Comme la custom:content-card-example de la partie développeur de HA.
Si quelqu’un peut me dire pourquoi.
le code de la card:

class ContentCardExample extends HTMLElement {
  // Whenever the state changes, a new `hass` object is set. Use this to
  // update your content.
  set hass(hass) {
    // Initialize the content if it's not there yet.
    if (!this.content) {
      this.innerHTML = `
        <ha-card header="Example-card">
          <div class="card-content"></div>
        </ha-card>
      `;
      this.content = this.querySelector("div");
    }

    const entityId = this.config.entity;
    const state = hass.states[entityId];
    const stateStr = state ? state.state : "unavailable";

    this.content.innerHTML = `
      The state of ${entityId} is ${stateStr}!
      <br><br>
      <img src="http:/local/Images Maison/Maison coté Piscine.jpg">
    `;
  }

  // The user supplied configuration. Throw an exception and Home Assistant
  // will render an error card.
  setConfig(config) {
    if (!config.entity) {
      throw new Error("You need to define an entity");
    }
    this.config = config;
  }

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;
  }
}

customElements.define("content-card-example", ContentCardExample);

c’est la partie qui ne semets pas à jour par ctrl + F5

5

Tout ça pour un nom+ état + une image ?
Il doit avoir largement plus simple avec les custom card toutes faites. ça ressemble à quoi visuellement ?
Et puis techniquement, elles utilisent ça aussi et ça fonctionne très bien chez moi pour ce genre de phénomène de cache avec chrome.
Au pire F12/puis clic droit sur actualiser et choisir " vider le cache et effectuer une actualisation forcée"
*
image

PS: Accents et espaces dans les url, c’est pas idéal

6

Merci je ne connaissais pas le F12/puis clic droit sur actualiser et choisir " vider le cache et effectuer une actualisation forcée"
cela fonctionne parfaitement
Si je suis parti la dessus c’est bien parce que pour l’instant je n’ai pas pu réaliser l’interface que je désire avec les custom card toutes faites.
Et toutes ne sont pas modifiables avec card-mod par exemple

Forcément c’est simple puisque l’on part de https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/

en tout cas merci pour ton aide cela va me faciliter la tache
Cordialement

7

J’en ai pas croisé une seule pour l’instant

8

Alors je n’ai peut être pas tout assimilé
Je vais me replonger dedans, entre autre dans les cover à lame en knx
cordialement