Web Share API 是 PWA 实现原生级分享功能的核心，支持文本、链接、标题及文件分享，需满足PWA注册、HTTPS/localhost安全环境及用户手势触发等条件。
Web Share API 是 PWA 实现原生级分享功能的核心，它让网页能调用系统级分享面板，无需跳转 App 或依赖第三方 SDK。前提是页面已注册为 PWA（有 manifest + service worker），且运行在 HTTPS 或 localhost 环境下。
检查浏览器支持与基础条件
Web Share API 目前在 Chrome、Edge、Firefox（部分版本）、Safari（iOS 16.4+ / macOS 13.3+）中支持。使用前需确认：
- 页面已通过
registerServiceWorker激活 PWA 状态（即具备安装能力） - 当前上下文是安全环境（HTTPS 或
localhost） - 调用发生在用户手势触发的事件中（如
click、tap），不能在异步回调或定时器里直接调用
基本分享：文本、链接、标题
最常用的是分享纯文本内容或 URL，代码简洁直观：
if (navigator.share) {
document.getElementById('share-btn').addEventListener('click', async () => {
try {
await navigator.share({
title: '这是一篇好文章',
text: '推荐你看这个！',
url: 'https://example.com/article/123'
});
console.log('分享成功');
} catch (err) {
console.log('分享被取消或失败', err);
}
});
} else {
console.warn('当前浏览器不支持 Web Share API');
}
注意：url 必须是当前页面同源或绝对合法 URL；title 和 text 可选，但至少传入一项。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
进阶分享：文件（图片、PDF 等）
从 Chrome 95+ 开始，navigator.share() 支持 files 字段，可用于分享本地生成或已获取的 Blob 文件：
- 需配合
createObjectURL将 Blob 转为可分享 URL - 仅支持图像（
image/*）、PDF（application/pdf）等常见类型 - 文件大小受浏览器限制（Chrome 约 50MB，iOS Safari 更严）
示例（分享一张 Canvas 导出的 PNG）：
const canvas = document.getElementById('my-canvas');
canvas.toBlob(async (blob) => {
if (navigator.canShare && navigator.canShare({ files: [blob] })) {
const file = new File([blob], 'chart.png', { type: 'image/png' });
await navigator.share({ files: [file] });
}
}, 'image/png');
适配不支持场景：降级方案
对不支持 Web Share API 的浏览器，建议提供手动复制链接 + 社交平台按钮的组合方案：
- 用
navigator.clipboard.writeText()复制链接到剪贴板 - 预置微信、微博、Twitter 等分享链接模板（含
url、title参数） - 结合 PWA 的
beforeinstallprompt事件，在分享失败时提示“可添加到主屏幕以便更好分享”
避免强行隐藏按钮或报错，保持交互一致性。
