Could you please check if this URL is accessible to you:
If it is, you can access the Github repository here: https://github.com/kissu/so-share-image-bounty
The code snippet provided is:
<template>
<div>
<div id="capture" ref="element" style="padding: 10px; background: #f5da55">
<h4 style="color: #000">Hello world!</h4>
</div>
<br />
<br />
<button @click="share">share please</button>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
methods: {
share() {
// IIFE implementation
;(async () => {
if (!('share' in navigator)) {
return
}
const canvas = await html2canvas(this.$refs.element)
canvas.toBlob(async (blob) => {
const files = [new File([blob], 'image.png', { type: blob.type })]
const shareData = {
text: 'Some text',
title: 'Some title',
files,
}
if (navigator.canShare(shareData)) {
try {
await navigator.share(shareData)
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message)
}
}
} else {
console.warn('Sharing not supported', shareData)
}
})
})()
},
},
}
</script>
Credit goes to @denvercoder9 for inspiration!
Additional Notes
- I've utilized an Immediately Invoked Function Expression (IIFE) to work within the method context.
- An asynchronous function was added for completeness and adherence to guidelines of ESlint.
- I've employed
$refs to accurately select DOM elements within Vue.
- The solution was streamlined for simplicity, hosted securely on Netlify with HTTPS, and thoroughly tested on Chrome (v91).
- For reference, here's the MDN documentation link for the Web Share API compatibility.
Web Browser Compatibility
My findings regarding browser compatibility based on testing are summarized in the table below:
| Browser |
Support Status |
| iPad Chrome |
Yes |
| iPad Firefox |
Yes |
| iPad Safari |
Yes |
| Windows Chrome |
Yes |
| Windows Firefox |
No |
| Android Chrome |
Yes |
| Android Firefox |
No |
| Desktop Linux Chrome |
No |
| Desktop Linux Firefox |
No |
While initially perceived as a mobile-specific feature, some desktop browsers surprisingly exhibit support for the Web Share API. It's noteworthy that Windows showed decent functionality in my tests. For further insights on browser support, refer to Google's post on browser compatibility.
In conclusion, based on the official definition from MDN:
The navigator.share() method of the Web Share API invokes the native sharing mechanism of the device.
Hence, the Share API seems more suited for mobile devices than desktop systems.
TLDR: The functionality performs as expected, but its compatibility across browsers remains relatively limited.