web-dev-qa-db-fra.com

Hébergement Firebase: comment empêcher la mise en cache du fichier index.html d'un SPA

J'héberge un SPA sur Firebase où presque tous les chemins sont réécrits en index.html. J'utilise le contournement du cache basé sur le hachage Webpack, donc je veux toujours empêcher la mise en cache de mon index.html Mais pas d'autres fichiers. Je trouve cela étonnamment difficile à faire. Plus précisément, ma disposition de fichier ressemble à ceci

/
├── index.html
├── login.html
├── js
│   ├── login.ba22ef2579d744b26c65.bundle.js
│   └── main.6d0ef60e45ae7a11063c.bundle.js
└── public
    └── favicon-16x16.ico

J'ai commencé naïvement avec "sources": "index.html" Avant de lire cette citation de la documentation.

Chaque définition doit avoir une clé source qui est mise en correspondance avec le chemin de demande d'origine, indépendamment des règles de réécriture utilisant notation globale .

Ok, donc au lieu d'un simple glob qui spécifie les fichiers sur lesquels je veux ces en-têtes, je suppose que j'en ai besoin d'un sur les chemins. Comme la plupart des chemins redirigent vers index.html, j'ai besoin d'un glob qui exclut tous les chemins sur lesquels je ne veux pas mettre ces en-têtes.

Pour référence, ma section d'hébergement firebase.json Ressemble à ceci:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false,
    "headers": [
      {
        "source": <<<WHAT-GOES-HERE?>>>,
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      }
    ]
  }
}

Donc, pour donner quelques exemples qui redirigent vers index.html et ne doivent pas être mis en cache

mysite.com  
mysite.com/  
mysite.com/foo/bar/baz  
mysite.com/index.html

Remarque: je pourrais vivre si ce dernier était mis en cache car il n'est pas utilisé dans la pratique.

Et les choses qui ne redirigent pas vers index.html et ne doivent pas être mises en cache

**/*.* (ideally excluding index.html)
mysite.com/login

Le plus proche que j'ai obtenu par moi-même est **/!(login|*.*) qui fonctionne pour presque tout ce qui est indiqué ci-dessus, mais inexplicablement ne fonctionne pas sur mysite.com Ou mysite.com/. Ces 2 pages ne correspondent pas à ce globe et je ne peux pas comprendre pourquoi.

firebasesingle-page-applicationcache-controlfirebase-hosting
18
zevdg

Voici la config que j'utilise. La logique consiste à utiliser le cache pour tous les fichiers statiques comme images, css, js etc. Pour tous les autres, c'est-à-dire "source": "/**" définir le cache comme sans cache. donc pour tous les autres fichiers, cela peut-être example.com, example.com/index.html, example.com/about-us, example.com/about-us.html le cache ne sera pas appliqué.

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}
37
Gijo Varghese