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

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

جو مدلی
Joe Medley
GitHub

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

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

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

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

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

پشتیبانی مرورگر

  • کروم: 89.
  • لبه: 93.
  • فایرفاکس: پشت پرچم
  • سافاری: 12.1.

منبع

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

برای اشتراک‌گذاری لینک‌ها و متن، از متد 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', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

توجه داشته باشید که نمونه با آزمایش برای navigator.canShare() به جای navigator.share() تشخیص ویژگی را کنترل می کند. شی داده ارسال شده به canShare() فقط از ویژگی files پشتیبانی می کند. انواع خاصی از فایل های صوتی، تصویری، pdf، ویدیویی و متنی را می توان به اشتراک گذاشت. برای فهرست کامل، افزونه‌های فایل مجاز در Chromium را ببینید. ممکن است در آینده انواع فایل های بیشتری اضافه شود.

اشتراک گذاری در iframe های شخص ثالث

برای راه‌اندازی اقدام اشتراک‌گذاری از داخل یک iframe شخص ثالث، iframe را با ویژگی allow با مقدار web-share جاسازی کنید:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

می‌توانید این را در یک نسخه آزمایشی در Glitch ببینید و کد منبع را مشاهده کنید. عدم ارائه ویژگی منجر به NotAllowedError با پیام Failed to execute 'share' on 'Navigator': Permission denied .

مطالعه موردی سانتا ردیاب

برنامه Santa Tracker دکمه اشتراک‌گذاری را نشان می‌دهد.
دکمه اشتراک گذاری بابانوئل ردیاب.

Santa Tracker ، یک پروژه منبع باز، یک سنت تعطیلات در Google است. هر ماه دسامبر، می توانید فصل را با بازی ها و تجربیات آموزشی جشن بگیرید.

در سال 2016، تیم Santa Tracker از Web Share API در اندروید استفاده کرد. این API برای موبایل مناسب بود. در سال‌های گذشته، تیم دکمه‌های اشتراک‌گذاری را روی موبایل حذف کرد، زیرا فضا در بالاترین حد خود قرار دارد و آنها نمی‌توانستند داشتن چندین هدف اشتراک‌گذاری را توجیه کنند.

اما با استفاده از Web Share API، آنها توانستند یک دکمه را ارائه دهند و پیکسل های گرانبها را ذخیره کنند. آنها همچنین دریافتند که کاربران با Web Share حدود 20 درصد بیشتر از کاربرانی که API فعال ندارند اشتراک گذاری می کنند. به Santa Tracker بروید تا Web Share را در عمل ببینید.

پشتیبانی از مرورگر

پشتیبانی مرورگر از Web Share API کمی متفاوت است، و توصیه می‌شود به جای اینکه فرض کنید یک روش خاص پشتیبانی می‌شود، از تشخیص ویژگی (همانطور که در نمونه‌های کد قبلی توضیح داده شد) استفاده کنید.

در اینجا یک طرح کلی از پشتیبانی از این ویژگی ارائه شده است. برای اطلاعات دقیق، یکی از پیوندهای پشتیبانی را دنبال کنید.

navigator.canShare()

پشتیبانی مرورگر

  • کروم: 89.
  • لبه: 93.
  • فایرفاکس: پشت پرچم
  • سافاری: 14.

منبع

navigator.share()

پشتیبانی مرورگر

  • کروم: 89.
  • لبه: 93.
  • فایرفاکس: پشت پرچم
  • سافاری: 12.1.

منبع

پشتیبانی از API را نشان دهید

آیا قصد دارید از Web Share API استفاده کنید؟ پشتیبانی عمومی شما به تیم Chromium کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

با استفاده از هشتگ #WebShare یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.