این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

با رابط کاربری اشتراک گذاری سیستم عامل با Web Share API یکپارچه شوید

برنامه‌های وب می‌توانند از همان قابلیت‌های اشتراک‌گذاری ارائه‌شده توسط سیستم مانند برنامه‌های مخصوص پلتفرم استفاده کنند.

Joe Medley

با Web Share API، برنامه‌های وب می‌توانند از همان قابلیت‌های اشتراک‌گذاری ارائه‌شده توسط سیستم مانند برنامه‌های پلتفرم خاص استفاده کنند. Web Share API این امکان را برای برنامه‌های وب فراهم می‌کند که پیوندها، متن و فایل‌ها را با سایر برنامه‌های نصب‌شده در دستگاه به همان شیوه برنامه‌های مخصوص پلتفرم به اشتراک بگذارند.

انتخابگر هدف اشتراک در سطح سیستم با یک PWA نصب شده به عنوان یک گزینه.

قابلیت ها و محدودیت ها

اشتراک وب دارای قابلیت ها و محدودیت های زیر است:

فقط در سایتی قابل استفاده است که از طریق HTTPS قابل دسترسی است.
اگر اشتراک گذاری در یک iframe شخص ثالث اتفاق بیفتد، باید از ویژگی allow استفاده شود.
باید در پاسخ به یک اقدام کاربر مانند کلیک فراخوانی شود. فراخوانی آن از طریق onload handler غیرممکن است.
می تواند URL ها، متن یا فایل ها را به اشتراک بگذارد.

Browser Support

Source

به اشتراک گذاری لینک و متن

برای اشتراک‌گذاری لینک‌ها و متن، از متد share() استفاده کنید که یک متد مبتنی بر وعده با شیء خواص مورد نیاز است. برای جلوگیری از پرتاب TypeError در مرورگر، شی باید حداقل یکی از ویژگی های زیر را داشته باشد: title ، text ، url یا files . برای مثال می توانید متن را بدون URL به اشتراک بگذارید یا برعکس. اجازه دادن به هر سه عضو، انعطاف پذیری موارد استفاده را افزایش می دهد. تصور کنید پس از اجرای کد زیر، کاربر یک برنامه ایمیل را به عنوان هدف انتخاب کند. پارامتر title ممکن است به موضوع ایمیل، text ، متن پیام و فایل‌ها، پیوست‌ها تبدیل شود.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

اگر سایت شما چندین URL برای یک محتوا دارد، به جای نشانی اینترنتی فعلی، نشانی اینترنتی متعارف صفحه را به اشتراک بگذارید. به‌جای اشتراک‌گذاری document.location.href ، یک تگ URL متعارف <meta> را در <head> صفحه بررسی کنید و آن را به اشتراک بگذارید. این کار تجربه بهتری را در اختیار کاربر قرار می دهد. نه تنها از تغییر مسیرها جلوگیری می کند، بلکه تضمین می کند که یک URL مشترک، تجربه کاربری صحیحی را برای یک مشتری خاص ارائه می دهد. به عنوان مثال، اگر دوستی یک URL تلفن همراه را به اشتراک بگذارد و شما به آن در رایانه رومیزی نگاه کنید، باید نسخه دسکتاپ را ببینید:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

اشتراک گذاری فایل ها

برای اشتراک‌گذاری فایل‌ها، ابتدا برای navigator.canShare() تست کنید و با آن تماس بگیرید. سپس آرایه ای از فایل ها را در فراخوانی navigator.share() قرار دهید:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed',

با رابط کاربری اشتراک گذاری سیستم عامل با Web Share API یکپارچه شوید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

قابلیت ها و محدودیت ها

به اشتراک گذاری لینک و متن

اشتراک گذاری فایل ها

با رابط کاربری اشتراک گذاری سیستم عامل با Web Share API یکپارچه شوید