A polyfill for button type=”share”
After writing about a declarative Web Share API here yesterday I thought I’d better share the idea (see what I did there?).
I opened an issue on the Github repo for the spec.
The polyfill also demonstrates how feature detection could work. Here’s the code.
This polyfill takes an Inception approach to feature detection. There are three nested levels:
- This browser supports
button type="share". Great! Don’t do anything. Otherwise proceed to level two.
- Use a
mailto:link to prefill an email with the page title as the subject and the URL in the body. Ya basic!
The idea is that, as long as you include the 20 lines of polyfill code, you could start using
button type="share" in your pages today.
I’ve made a test page on Codepen. I’m just using plain text in the button but you could use a nice image or SVG or combination. You can use the Codepen test page to observe two of the three possible behaviours browsers could exhibit:
- A browser supports
button type="share". Currently that’s none because I literally made this shit up yesterday.
- A browser supports neither
The polyfill doesn’t support Internet Explorer 11 or lower because it uses the DOM
closest() method. Feel free to fork and rewrite if you need to support old IE.