Using the Web Speech API for Multilingual Translations

I wrote that using inline …
It’s weirdly easy to toss text into browser cache as a file
In the above HTML, the selector .icon-alarm will fetch us the entire chunk of Let’s make sure the browser grabs that file out of the cache when it’s requested We’ll register a Service Worker on our pages: if (navigator.serviceWorker) { navigator.serviceWorker.register(/sw.js, { scope: / }); } The service worker itself will be quite small, just a cache matcher: self.addEventListener(fetch, event => { let request = event.request; event.respondWith( caches.match(request).then(response => { return response || fetch(request); }) ); }); But… we never request that file, because our icons are inline. True. But what if other pages benefitted from that cache? For example, an SVG icon could be placed on the page like this:
Since /icons/icon-alarm.svg is sitting there ready in cache, the browser will happily pluck it out of cache and display it.
(I was kind of amazed this works. Edge doesn’t like elements that link to files, but that’ll be over soon enough.)
And even if the file isn’t in the cache, assuming we actually chuck this file on the file system likely the result of some kind of “include” (I used Nunjucks on the demo).
But… and inline SVG aren’t quite the same
True. What I like about the above is that it’s making use of the cache and the icons should render close to immediately. And there are some things you can style this way — for example, setting the fill on the parent icon should go through the shadow DOM that the creates and colorize the SVG elements within.
Still, it’s not the same. The shadow DOM is a big barrier compared to inline SVG.
So, enhance them! We could asynchronously load a script that finds each SVG icon, Ajaxs for the SVG it needs, and replaces the stuff…
const icons = document.querySelectorAll(svg.icon);
icons.forEach(icon => {
const url = icon.querySelector(use).getAttribute(xlink:href); // Might wanna look for href also
fetch(url)
.then(response => response.text())
.then(data => {
// This is probably a bit layout-thrashy. Someone smarter than me could probably fix that up.
// Replace the with inline SVG
const newEl = document.createElement(span);
newEl.innerHTML = data;
icon.parentNode.replaceChild(newEl, icon);
// Remove the s
const parent = newEl.parentNode;
while (newEl.firstChild) parent.insertBefore(newEl.firstChild, newEl);
parent.removeChild(newEl);
});
});
Now, assuming this JavaScript executes correctly, this page has inline SVG available just like the original page did.
Demo & Repo
Demo on Netlify
Repo on GitHub