Хостинг Firebase: как предотвратить кеширование для index.html SPA

Я размещаю SPA на firebase, где почти все пути переписываются в index.html. Я использую очистку кэша на основе хеша, поэтому я хочу всегда предотвращать кэширование моего index.html но не любых других файлов. Мне на удивление трудно это сделать. В частности, мой файл выглядит так

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

Я начал наивно с "sources": "index.html" прежде чем читать эту цитату из документации.

Каждое определение должно иметь исходный ключ, который сопоставляется с исходным путем запроса, независимо от каких-либо правил перезаписи с использованием нотации glob.

Итак, вместо простого глоба, который указывает файлы, для которых я хочу эти заголовки, я думаю, мне нужен один по путям. Поскольку большинство путей перенаправляются в index.html, мне нужен глобус, исключающий все пути, на которые я не хочу ставить эти заголовки.

Для справки мой раздел хостинга firebase.json выглядит так:

{
  "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"
          }
        ]
      }
    ]
  }
}

Итак, приведем несколько примеров, которые перенаправляют на index.html и не должны кэшироваться.

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

Примечание: я мог бы жить, если бы этот последний был кеширован, поскольку он не используется на практике.

И вещи, которые не перенаправляют на index.html и не должны кэшироваться

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

Самым близким, что я получил, является **/!(login|*.*) mysite.com работает почти для всего перечисленного выше, но по непонятным причинам не работает на mysite.com или mysite.com/. Эти 2 страницы не соответствуют этому шару, и я не могу понять, почему.

ОТВЕТЫ

Ответ 1

Вот конфиг, который я использую. Логика заключается в том, чтобы использовать кеш для всех статических файлов, таких как images, css, js т.д. Для всех остальных, например, "source": "/**" установить кеш как no-cache. поэтому для всех других файлов, например, example.com, example.com/index.html, example.com/about-us, example.com/about-us.html, кеш не будет применен.

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source":
          "**/*[email protected](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/**"]
  }
}

Ответ 2

Я нашел отличную статью на Medium об этом, которая дала массу примеров кода и конкретных шагов для подражания. Это было очень полезно для меня. (... и нет, я не автор статьи :)).