Web Share API
debt(d7/e3/b1/t7)
Closest to 'only careful code review or runtime testing' (d7), because detection_hints.automated is 'no' and the pattern navigator.share is straightforward syntax, but the real mistakes (missing support checks, calling outside user gestures, no fallback) require runtime testing or manual review to catch reliably.
Closest to 'simple parameterised fix' (e3), because quick_fix is 'Check navigator.share before calling. Always handle AbortError. Provide clipboard fallback' — this is a small, localised refactor within a single component (one share function/button) that doesn't require cross-file changes.
Closest to 'minimal commitment' (b1), because the choice applies only to web contexts and only affects sharing functionality — it's a localised feature addition with no architectural weight or reach across the codebase; future maintainers pay no tax unless they modify the share button itself.
Closest to 'serious trap' (t7), because the misconception 'navigator.share() works on all devices' directly contradicts developer intuition (a cross-platform API name suggests universal support), and the silent failure on desktop (no error, just unavailable) contradicts how similar browser APIs behave; the requirement to call only within a user gesture is also non-obvious and catches many developers.
TL;DR
Explanation
navigator.share({ title, text, url }) opens the native share dialog on supported platforms (Android, iOS, Windows 11). Returns a Promise that resolves when sharing completes or rejects if cancelled. Check support: navigator.canShare(data) before calling. Requires user gesture (click handler). Supports sharing files via navigator.share({ files: [...] }). Falls back gracefully on desktop where it may not be available. Progressive enhancement: show custom social share buttons when share API unavailable.
Common Misconception
Why It Matters
Common Mistakes
- Not checking navigator.share support before calling.
- Calling share outside a user gesture (click/touch) — browsers reject it.
- Not providing a fallback for browsers without support.
Code Examples
// No feature detection:
await navigator.share({ url: window.location.href });async function shareContent(title, url) {
if (navigator.share) {
try {
await navigator.share({ title, url });
} catch (err) {
if (err.name !== 'AbortError') throw err;
}
} else {
// Fallback: copy link or show custom share UI
await navigator.clipboard.writeText(url);
showToast('Link copied!');
}
}