Web Share API — Live Demo

The native share sheet — simulated

Tap "Share" in the phone below to open a simulated OS share sheet. Pick a target (success) or tap Cancel (AbortError). This is exactly what navigator.share() triggers.

📄

W3Tweaks Tutorial

The Web Share API guide

W3

W3Tweaks — Advanced HTML

w3tweaks.com/web-share-api

💬

Messages

✉️

Mail

📱

🔗

Copy

𝕏

X

📡

AirDrop

📝

Notes

•••

More

Cancel

--:--:--Tap Share, then pick a target or Cancel

AbortError — cancellation is NOT a failure

Both buttons call navigator.share() and the user "cancels". The left catches every rejection as an error (wrong). The right checks err.name === 'AbortError' (correct). Click each.

❌ Catches everything as an error

No result yet

✅ Checks err.name === 'AbortError'

No result yet

❌ catch (err) { showToast('Sharing failed!'); } // fires on cancel ✅ catch (err) { if (err.name === 'AbortError') return; // user cancelled, stay quiet showToast('Could not share.'); // only real errors }

Error name reference:

AbortError — user cancelled / no targets · don't show
NotAllowedError — no transient activation / blocked · usually a bug
TypeError — invalid data (bad URL, empty) · usually a bug
DataError — target failed to receive · offer fallback

--:--:--Click both "Share & Cancel" buttons to compare handling

canShare() — and its false-positive trap

Build a ShareData object and validate it. Watch how canShare() on the whole object can return true even when it contains an unknown key — because WebIDL silently ignores unrecognized members.

title: "W3Tweaks" text: "Great tutorial" url: "https://w3tweaks.com" url: "not a valid url" (invalid) weirdKey: "ignored" (unknown member)

Whole-object: canShare(data)

Click Validate

Per-member: canShare({[key]: value})

--:--:--Add the unknown member, then validate — see the false positive

Share a generated file — canvas → blob → File

Draw something below, then share it. We use canvas.toBlob() → new File() → canShare({files}) → share(), with a download fallback.

canvas.toBlob(async (blob) => { const file = new File([blob], 'drawing.png', { type: 'image/png' }); const data = { files: [file], title: 'My drawing' }; if (navigator.canShare?.(data)) await navigator.share(data); else downloadFile(blob); // fallback }, 'image/png');

--:--:--Draw on the canvas, then click Share drawing

The progressive fallback chain