Check from Twig if browser has cached assets

1

Is there a way to determine whether a browser has visited a Grav site before (and is thus likely to have cached assets, like, in my case, webfonts)? There’s the browser object accessible from Twig. And Grav does store a cookie. Checking if a cookie has been set might suffice, because a small percentage of both false positives and false negative is acceptable in my case.

Would it be possible to add this with a plugin? I’m willing to implement this myself, but I’d very much appreciate a few pointers.

Background

I’n order to display my pages both faster and prettier, I’m experimenting with webfont loading. I’ve discovered something that might turn out to be the egg of Columbus for me if it works across browsers: I’m embedding a minimal subset of the regular font in a data-uri inside the @font-face. This subset contains only latin alphabet characters, just the most essential punctuation and the most important chars of my target language (i.e. German äöuß). No italic and bold variants, the browser can fake these until all fonts are loaded. The @font-face declarations for the full font and it’s real typographical variants contain just regular URLs. This minimal font is specified as the first fallback to the full font. For instance:

<style>
html {
  font-family: muli-full, muli-embed, sans;
}

@font-face {
    font-family: 'muli-embed';
    src: url(data:application/font-woff2;charset=utf-8;base64, [ ... about 9k (gzipped) of data]) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muli-full';
    src: url('/user/themes/THEME/fonts/muli-full.woff2') format('woff2'),
         url('/user/themes/THEME/fonts/muli-full.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ... More @font-face declarations for italic, bold, bold-italic etc. */
</style>

The idea is: The browser displays the page immediately with the embedded font as a fallback: No flash of unstyled text. (Except, and only possibly, for a few international characters.) Bold and italic variants are generated by the browers. Then, once, the full font is loaded, the browser replaces the fallback with minimal irritation to the user’s eye.

This works as intended in Firefox and it’s quite beautiful. In Chrome, there is some resizing going on, whose cause I have yet to investigate. Maybe I made a mistake with the settings when creating the font subset.

This increases the size of each page only a little: Between maybe 5k and 10k for each page, depending on the font. This might be acceptable. However, I’m obsessing about speed and page size. So, if there’s a way to check if a page has been visited before and redirect to a variant without the embedded font, that would be preferable.

Could this be done even, while still caching Twig?