Allow external <script type=speculationrules>

[bramus]

I’m building a project that is a bunch of plain HTML files with plain CSS and JS – there is no build step. I’m deploying this project to a server where I cannot control the headers being sent.

Because I can’t control the headers, I needed to add Speculation Rules by adding the following snippet to each and every HTML file:

<script type="speculationrules">
	{
		"prerender": [{
			"source": "document",
			"where": {
				"href_matches": "/*"
			},
			"eagerness": "moderate"
		}]
	}
</script>

This is very repetitive. I kinda assumed I would be able to do the following to keep things DRY, but turns out this is not possible:

<script type="speculationrules" src="file-with-speculation-rules.json"></script>

Hereby requesting to consider this feature request.

[tunetheweb]

As mentioned on chat, this is possible with plain JS:

<script src="inject-speculation-rules.js" defer></script>

And then have inject-speculation-rules.js contain something like this:

if (HTMLScriptElement.supports &&
    HTMLScriptElement.supports('speculationrules')) {
  const specScript = document.createElement('script');
  specScript.type = 'speculationrules';
  specRules = {
    prerender: [
      {
        urls: ['/next.html'],
      },
    ],
  };
  specScript.textContent = JSON.stringify(specRules);
  console.log('added speculation rules to: next.html');
  document.body.append(specScript);
}

But yeah it seems it would be nice to be able to do this directly.