ادغام کردن با میانای کاربری هم‌رسانی سیستم‌عامل با Web Share API

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

Joe Medley

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

توجه: هم‌رسانی فقط نیمی از جادو است. برنامه‌های وب همچنین می‌توانند هدف هم‌رسانی باشند، یعنی می‌توانند داده، پیوند، نوشتار، و فایل را از برنامه‌های وب یا برنامه‌های مختص پلاتفرم دریافت کنند. برای آشنایی با نحوه ثبت برنامه به‌عنوان هدف هم‌رسانی، دریافت داده‌های هم‌رسانی‌شده را بخوانید.

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

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

هم‌رسانی وب قابلیت‌ها و محدودیت‌های زیر را دارد:

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

Browser Support

• 128
• 93
• 
• 12.1

Source

درحال هم‌رسانی پیوندها و نوشتار

برای هم‌رسانی پیوندها و نوشتار، از روش share() استفاده کنید که روشی مبتنی بر وعده با شیء ویژگی‌های الزامی است. برای جلوگیری از اینکه مرورگر TypeError را نشان دهد، شیء باید حداقل یکی از ویژگی‌های زیر را داشته باشد: title، text، url، یا files. برای مثال، می‌توانید نوشتار را بدون نشانی وب یا برعکس هم‌رسانی کنید. مجاز کردن هر سه عضو، انعطاف‌پذیری موارد استفاده را گسترش می‌دهد. تصور کنید اگر پس‌از اجرای کد زیر، کاربر یک برنامه ایمیل را به‌عنوان هدف انتخاب کند. پارامتر 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));
}

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

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 پشتیبانی می‌کند. انواع خاصی از فایل‌های صوتی، تصویری، پی‌دی‌اف، ویدیویی، و نوشتاری را می‌توان هم‌رسانی کرد. برای مشاهده فهرست کامل، پسوندهای مجاز فایل در 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>

مطالعه موردی «ردیاب بابانوئل»

دکمه هم‌رسانی «به‌دنبال بابانوئل».

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

در سال ۲۰۱۶، تیم «شبیه‌ساز بابانوئل» از Web Share API در Android استفاده کرد. این میانای برنامه‌سازی کاربردی برای تلفن همراه کاملاً مناسب بود. در سال‌های گذشته، تیم دکمه‌های هم‌رسانی را در تلفن همراه برداشت چون فضا محدود است و نمی‌توانستند وجود چندین هدف هم‌رسانی را توجیه کنند.

اما با Web Share API، آن‌ها توانستند یک دکمه ارائه دهند، و پیکسل‌های ارزشمند را ذخیره کنند. آن‌ها همچنین متوجه شدند که کاربران با Web Share حدود ۲۰٪ بیشتر از کاربرانی که API را فعال نکرده‌اند، هم‌رسانی می‌کنند. به Santa Tracker بروید تا Web Share را در عمل ببینید.

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

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

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

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

نمایش پشتیبانی از میانای برنامه‌سازی کاربردی

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

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

پیوندهای مفید

• نمونه‌های نمایشی هم‌رسانی وب
• Scrapbook PWA