قابلیت های وب کد لبه

قابلیت های وب

ما می خواهیم شکاف قابلیت بین وب و بومی را ببندیم و ایجاد تجربیات عالی در وب باز را برای توسعه دهندگان آسان کنیم. ما قویاً معتقدیم که هر توسعه‌دهنده‌ای باید به قابلیت‌هایی که برای ایجاد یک تجربه وب عالی نیاز دارد دسترسی داشته باشد و ما متعهد به ایجاد یک وب توانمندتر هستیم.

با این حال، برخی از قابلیت‌ها مانند دسترسی به سیستم فایل و شناسایی بی‌حرکتی وجود دارد که برای بومی‌ها در دسترس هستند اما در وب در دسترس نیستند. این قابلیت‌های از دست رفته به این معنی است که برخی از انواع برنامه‌ها را نمی‌توان در وب ارائه کرد یا کمتر مفید هستند.

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

چیزی که خواهی ساخت

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

چیزی که یاد خواهید گرفت

این کد لبه مکانیزم های اولیه چندین API های لبه دار را به شما آموزش می دهد. توجه داشته باشید که این مکانیک ها هنوز کاملاً مشخص نشده اند و ما از بازخورد شما در مورد جریان توسعه دهنده بسیار قدردانی می کنیم.

آنچه شما نیاز دارید

از آنجایی که API های ارائه شده در این codelab واقعاً در لبه خونریزی هستند، الزامات هر API متفاوت است. لطفاً مطمئن شوید که اطلاعات سازگاری را در ابتدای هر بخش به دقت بخوانید.

چگونه به کد لبه نزدیک شویم

لزوماً قرار نیست که به طور متوالی از طریق Codelab کار شود. هر بخش نشان دهنده یک API مستقل است، بنابراین با خیال راحت آنچه را که بیشتر به آن علاقه دارید انتخاب کنید.

هدف Badging API جلب توجه کاربران به چیزهایی است که در پس‌زمینه اتفاق می‌افتد. به خاطر سادگی نسخه ی نمایشی در این کد، بیایید از API استفاده کنیم تا توجه کاربران را به چیزی که در پیش زمینه اتفاق می افتد جلب کنیم. سپس می توانید انتقال ذهنی را به چیزهایی که در پس زمینه اتفاق می افتد انجام دهید.

Airhorner را نصب کنید

برای اینکه این API کار کند، به یک PWA نیاز دارید که در صفحه اصلی نصب شده باشد، بنابراین اولین قدم نصب یک PWA است، مانند airhorner.com معروف و معروف در جهان. دکمه Install را در گوشه سمت راست بالا فشار دهید یا از منوی سه نقطه برای نصب دستی استفاده کنید.

این یک درخواست تأیید نشان می دهد، روی Install کلیک کنید.

اکنون یک نماد جدید در داک سیستم عامل خود دارید. روی آن کلیک کنید تا PWA راه اندازی شود. این پنجره برنامه خود را دارد و در حالت مستقل اجرا می شود.

تنظیم نشان

اکنون که یک PWA نصب کرده اید، به مقداری داده عددی نیاز دارید (نشان ها فقط می توانند شامل اعداد باشند) تا روی یک نشان نمایش داده شوند. نکته ساده ای که در The Air Horner باید حساب کرد این است که آه ، تعداد دفعاتی که شاخ زده شده است. در واقع، با برنامه Airhorner نصب شده، سعی کنید بوق را بوق بزنید و نشان را بررسی کنید. هر وقت بوق می زنید یکی به حساب می آید.

خب این چطور کار میکند؟ در اصل، کد این است:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

چند بار هورن را صدا کنید و نماد PWA را بررسی کنید: هر بار به روز می شود. تنها. زمان. هورن به صدا در می آید به همین راحتی.

پاک کردن نشان

شمارنده تا 99 بالا می رود و سپس دوباره شروع می شود. همچنین می توانید آن را به صورت دستی بازنشانی کنید. تب DevTools Console را باز کنید، خط زیر را پیست کرده و Enter را فشار دهید.

navigator.setExperimentalAppBadge(0);

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

navigator.clearExperimentalAppBadge();

بازخورد

نظر شما در مورد این API چیست؟ لطفا با پاسخ کوتاه به این نظرسنجی ما را یاری کنید:

آیا استفاده از این API شهودی بود؟

آره خیر

آیا شما مثال را برای اجرا گرفتید؟

آره خیر

چیز بیشتری برای گفتن دارید؟ آیا ویژگی های گم شده ای وجود داشت؟ لطفاً در این نظرسنجی بازخورد سریع ارائه دهید. متشکرم!

Native File System API به توسعه دهندگان این امکان را می دهد تا برنامه های وب قدرتمندی بسازند که با فایل های موجود در دستگاه محلی کاربر تعامل دارند. پس از اینکه کاربر به یک برنامه وب اجازه دسترسی داد، این API به برنامه‌های وب اجازه می‌دهد تا تغییرات را مستقیماً در فایل‌ها و پوشه‌های دستگاه کاربر بخوانند یا ذخیره کنند.

خواندن یک فایل

"Hello, world" از Native File System API خواندن یک فایل محلی و دریافت محتوای فایل است. یک فایل .txt ساده ایجاد کنید و متنی را وارد کنید. در مرحله بعد، به هر سایت ایمن (یعنی سایتی که از طریق HTTP S ارائه می شود) مانند example.com بروید و کنسول DevTools را باز کنید. قطعه کد زیر را در کنسول جای‌گذاری کنید. از آنجایی که Native File System API به یک اشاره کاربر نیاز دارد، یک کنترل کننده دوبار کلیک بر روی سند متصل می کنیم. بعداً به دسته فایل نیاز خواهیم داشت، بنابراین فقط آن را به یک متغیر جهانی تبدیل می کنیم.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

هنگامی که روی هر نقطه از صفحه example.com دوبار کلیک می کنید، یک انتخابگر فایل ظاهر می شود.

فایل .txt را که قبلا ایجاد کرده اید انتخاب کنید. سپس محتویات فایل جایگزین محتویات body واقعی example.com خواهد شد.

ذخیره یک فایل

در مرحله بعد، می خواهیم تغییراتی ایجاد کنیم. بنابراین، اجازه دهید با چسباندن قطعه کد زیر، body قابل ویرایش کنیم. اکنون می توانید متن را طوری ویرایش کنید که گویی مرورگر یک ویرایشگر متن است.

document.body.contentEditable = true;

اکنون می خواهیم این تغییرات را به فایل اصلی بازگردانیم. بنابراین، ما به یک رایتر در دسته فایل نیاز داریم که با چسباندن قطعه زیر در کنسول، می‌توانیم آن را به دست آوریم. باز هم به یک ژست کاربر نیاز داریم، بنابراین این بار منتظر کلیک روی سند اصلی هستیم.

document.onclick = async () => {
  const writer = await handle.createWriter();
  await writer.truncate(0);
  await writer.write(0, document.body.textContent);
  await writer.close();
};

وقتی روی سند کلیک می‌کنید (نه دوبار کلیک می‌کنید)، یک درخواست مجوز ظاهر می‌شود. وقتی مجوز می دهید، محتوای فایل همان چیزی است که قبلاً در body ویرایش کرده اید. با باز کردن فایل در یک ویرایشگر دیگر، تغییرات را تأیید کنید (یا با دوبار کلیک کردن دوباره روی سند و باز کردن مجدد پرونده، فرآیند را دوباره شروع کنید).

تبریک می گویم! شما به تازگی کوچکترین ویرایشگر متن در جهان را ایجاد کرده اید [citation needed] .

بازخورد

نظر شما در مورد این API چیست؟ لطفا با پاسخ کوتاه به این نظرسنجی ما را یاری کنید:

آیا استفاده از این API شهودی بود؟

آره خیر

آیا شما مثال را برای اجرا گرفتید؟

آره خیر

چیز بیشتری برای گفتن دارید؟ آیا ویژگی های گم شده ای وجود داشت؟ لطفاً در این نظرسنجی بازخورد سریع ارائه دهید. متشکرم!

Shape Detection API دسترسی به آشکارسازهای شکل سریع (مثلاً برای صورت انسان) را فراهم می کند و روی تصاویر ثابت و/یا فیدهای تصویر زنده کار می کند. سیستم عامل ها دارای آشکارسازهای عملکردی و بسیار بهینه شده مانند FaceDetector اندروید هستند. Shape Detection API این پیاده سازی های بومی را باز می کند و آنها را از طریق مجموعه ای از رابط های جاوا اسکریپت در معرض دید قرار می دهد.

در حال حاضر، ویژگی های پشتیبانی شده عبارتند از تشخیص چهره از طریق رابط FaceDetector ، تشخیص بارکد از طریق رابط BarcodeDetector و تشخیص متن (تشخیص کاراکتر نوری) از طریق رابط TextDetector .

شناسایی چهره

یکی از ویژگی های جالب Shape Detection API تشخیص چهره است. برای آزمایش آن به صفحه ای با چهره نیاز داریم. این صفحه با چهره نویسنده شروع خوبی است. چیزی شبیه به تصویر زیر خواهد بود. در یک مرورگر پشتیبانی‌شده، کادر مرزی چهره و نشانه‌های چهره شناسایی می‌شوند.

با میکس کردن مجدد یا ویرایش پروژه Glitch ، به خصوص فایل script.js ، می توانید ببینید که چقدر کد کمی برای انجام این اتفاق نیاز است.

اگر می‌خواهید کاملاً پویا باشید و فقط با چهره نویسنده کار نکنید، به این صفحه نتایج جستجوی Google پر از چهره در یک برگه خصوصی یا در حالت مهمان بروید. اکنون در آن صفحه، با کلیک راست در هر نقطه و سپس کلیک بر روی Inspect ، Chrome Developer Tools را باز کنید. سپس، در تب Console، قطعه زیر را جای‌گذاری کنید. کد چهره های شناسایی شده را با یک کادر قرمز نیمه شفاف برجسته می کند.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

توجه داشته باشید که برخی از پیام‌های DOMException وجود دارد و همه تصاویر در حال پردازش نیستند. این به این دلیل است که تصاویر بالا به‌عنوان URI داده‌ها در داخل قرار می‌گیرند و بنابراین می‌توان به آنها دسترسی داشت، در حالی که تصاویر زیر از یک دامنه متفاوت می‌آیند که برای پشتیبانی از CORS پیکربندی نشده است. به خاطر نسخه ی نمایشی، لازم نیست نگران این موضوع باشیم.

تشخیص نقطه عطف چهره

علاوه بر چهره‌ها، macOS به خودی خود از تشخیص نشانه‌های چهره نیز پشتیبانی می‌کند. برای آزمایش تشخیص نشانه‌های چهره، قطعه زیر را در کنسول جای‌گذاری کنید. یادآوری: به دلیل crbug.com/914348 ، خط‌آپ نشانه‌ها اصلاً کامل نیست، اما می‌توانید ببینید که این به کجا می‌رود و چقدر این ویژگی می‌تواند قدرتمند باشد.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);

      const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      landmarkSVG.style.position = 'absolute';
      landmarkSVG.classList.add('landmarks');
      landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
      landmarkSVG.style.width = `${img.width}px`;
      landmarkSVG.style.height = `${img.height}px`;
      face.landmarks.map((landmark) => {                    
        landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
        landmark.locations.map((point) => {          
          return `${scaleX * point.x},${scaleY * point.y} `;
        }).join(' ')
      }" /></svg>`;          
      });
      div.before(landmarkSVG);
    });
  } catch(e) {
    console.error(e);
  }
});

تشخیص بارکد

دومین ویژگی Shape Detection API تشخیص بارکد است. مانند قبل، ما به صفحه ای با بارکد نیاز داریم، مانند این صفحه. هنگامی که آن را در مرورگر باز می کنید، کدهای QR مختلف رمزگشایی شده را خواهید دید. پروژه Glitch ، به خصوص فایل script.js را ریمیکس یا ویرایش کنید تا ببینید چگونه انجام می شود.

اگر چیزی پویاتر می‌خواهید، می‌توانیم دوباره از جستجوی تصویر Google استفاده کنیم. این بار، در مرورگر خود به این صفحه نتایج جستجوی Google در یک برگه خصوصی یا در حالت مهمان بروید. اکنون قطعه زیر را در تب Chrome DevTools Console جای‌گذاری کنید. پس از مدت کوتاهی، بارکدهای شناسایی شده با مقدار خام و نوع بارکد حاشیه نویسی می شوند.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const barcodes = await new BarcodeDetector().detect(img);
    barcodes.forEach(barcode => {
      const div = document.createElement('div');
      const box = barcode.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.textContent = `${barcode.rawValue}`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

تشخیص متن

آخرین ویژگی Shape Detection API تشخیص متن است. تا به حال این تمرین را می دانید: ما به صفحه ای با تصاویر حاوی متن نیاز داریم، مانند این صفحه با نتایج اسکن Google Books. در مرورگرهای پشتیبانی شده، متن را می‌بینید که تشخیص داده می‌شود و یک کادر محدود در اطراف متن‌ها کشیده شده است. پروژه Glitch ، به خصوص فایل script.js را ریمیکس یا ویرایش کنید تا ببینید چگونه انجام می شود.

برای آزمایش پویا، به این صفحه نتایج جستجو در یک برگه خصوصی یا در حالت مهمان بروید. اکنون قطعه زیر را در تب Chrome DevTools Console جای‌گذاری کنید. با کمی انتظار، بخشی از متن شناسایی می شود.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const texts = await new TextDetector().detect(img);
    texts.forEach(text => {
      const div = document.createElement('div');
      const box = text.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.innerHTML = text.rawValue;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

بازخورد

نظر شما در مورد این API چیست؟ لطفا با پاسخ کوتاه به این نظرسنجی ما را یاری کنید:

آیا استفاده از این API شهودی بود؟

آره خیر

آیا شما مثال را برای اجرا گرفتید؟

آره خیر

چیز بیشتری برای گفتن دارید؟ آیا ویژگی های گم شده ای وجود داشت؟ لطفاً در این نظرسنجی بازخورد سریع ارائه دهید. متشکرم!

Web Share Target API به برنامه‌های وب نصب‌شده اجازه می‌دهد تا در سیستم عامل اصلی به‌عنوان هدف اشتراک‌گذاری ثبت نام کنند تا محتوای اشتراک‌گذاری شده را از Web Share API یا رویدادهای سیستم، مانند دکمه اشتراک‌گذاری در سطح سیستم عامل، دریافت کنند.

یک PWA برای اشتراک گذاری نصب کنید

به عنوان اولین قدم، به یک PWA نیاز دارید که بتوانید آن را به اشتراک بگذارید. این بار، Airhorner (خوشبختانه) این کار را انجام نخواهد داد، اما برنامه نمایشی Web Share Target پشت شماست. برنامه را در صفحه اصلی دستگاه خود نصب کنید.

چیزی را با PWA به اشتراک بگذارید

در مرحله بعد، به چیزی برای اشتراک‌گذاری نیاز دارید، مانند عکسی از Google Photos. از دکمه اشتراک استفاده کنید و Scrapbook PWA را به عنوان هدف اشتراک انتخاب کنید.

وقتی روی نماد برنامه ضربه می‌زنید، مستقیماً در Scrapbook PWA فرود می‌آیید و عکس همانجا است.

خب این چطور کار میکند؟ برای پیدا کردن، مانیفست برنامه وب Scrapbook PWA را کاوش کنید. پیکربندی برای کارکرد Web Share Target API در ویژگی "share_target" مانیفست قرار دارد که در قسمت "action" آن به URL ای اشاره می کند که با پارامترهای فهرست شده در "params" تزئین شده است.

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

{
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["audio/*", "image/*", "video/*"]
    }]
  }
}

بازخورد

نظر شما در مورد این API چیست؟ لطفا با پاسخ کوتاه به این نظرسنجی ما را یاری کنید:

آیا استفاده از این API شهودی بود؟

آره خیر

آیا شما مثال را برای اجرا گرفتید؟

آره خیر

چیز بیشتری برای گفتن دارید؟ آیا ویژگی های گم شده ای وجود داشت؟ لطفاً در این نظرسنجی بازخورد سریع ارائه دهید. متشکرم!

برای جلوگیری از تخلیه باتری، اکثر دستگاه‌ها در حالت بیکار به سرعت به خواب می‌روند. در حالی که در بیشتر مواقع این کار خوب است، برخی از برنامه ها برای تکمیل کار خود باید صفحه یا دستگاه را بیدار نگه دارند. Wake Lock API راهی برای جلوگیری از کم نور شدن و قفل شدن صفحه نمایش یا جلوگیری از به خواب رفتن دستگاه فراهم می کند. این قابلیت تجربه‌های جدیدی را امکان‌پذیر می‌کند که تاکنون به یک اپلیکیشن بومی نیاز داشتند.

یک محافظ صفحه نمایش راه اندازی کنید

برای آزمایش Wake Lock API، ابتدا باید مطمئن شوید که دستگاه شما به حالت Sleep می‌رود. بنابراین، در قسمت تنظیمات سیستم عامل خود، محافظ صفحه نمایش مورد نظر خود را فعال کنید و مطمئن شوید که پس از 1 دقیقه شروع به کار کند. مطمئن شوید که دقیقاً در آن زمان دستگاه خود را تنها بگذارید (آره، می دانم، دردناک است). تصاویر زیر macOS را نشان می‌دهند، اما مطمئناً می‌توانید این را در دستگاه Android تلفن همراه خود یا هر پلتفرم دسکتاپ پشتیبانی‌شده‌ای امتحان کنید.

یک قفل بیدار شدن صفحه را تنظیم کنید

اکنون که می دانید محافظ صفحه نمایش شما کار می کند، از wake lock از نوع "screen" استفاده می کنید تا محافظ صفحه نمایش کار خود را انجام ندهد. به برنامه نمایشی Wake Lock بروید و روی کادر فعال screen Wake Lock کلیک کنید.

از آن لحظه، یک wake lock فعال است. اگر آنقدر صبور باشید که دستگاه خود را برای یک دقیقه دست نخورده رها کنید، اکنون خواهید دید که محافظ صفحه واقعاً راه اندازی نشده است.

خب این چطور کار میکند؟ برای اطلاع از این موضوع، به پروژه Glitch برای برنامه نمایشی Wake Lock بروید و script.js را بررسی کنید. خلاصه کد در قطعه زیر آمده است. یک برگه جدید باز کنید (یا از هر برگه ای که به طور اتفاقی باز است استفاده کنید) و کد زیر را در یک کنسول Chrome Developer Tools جای‌گذاری کنید. وقتی روی پنجره کلیک می‌کنید، باید wake lock را ببینید که دقیقاً به مدت 10 ثانیه فعال است (به گزارش‌های کنسول مراجعه کنید) و محافظ صفحه نمایش شما نباید شروع به کار کند.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
  let wakeLock = null;
  
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      wakeLock.addEventListener('release', () => {        
        console.log('Wake Lock was released');                    
      });
      console.log('Wake Lock is active');      
    } catch (e) {      
      console.error(`${e.name}, ${e.message}`);
    } 
  };

  requestWakeLock();
  window.setTimeout(() => {
    wakeLock.release();
  }, 10 * 1000);
}

بازخورد

نظر شما در مورد این API چیست؟ لطفا با پاسخ کوتاه به این نظرسنجی ما را یاری کنید:

آیا استفاده از این API شهودی بود؟

آره خیر

آیا شما مثال را برای اجرا گرفتید؟

آره خیر

چیز بیشتری برای گفتن دارید؟ آیا ویژگی های گم شده ای وجود داشت؟ لطفاً در این نظرسنجی بازخورد سریع ارائه دهید. متشکرم!

یک API که ما در مورد آن بسیار هیجان زده هستیم، Contact Picker API است. این به یک برنامه وب اجازه می دهد تا به مخاطبین از مدیر تماس اصلی دستگاه دسترسی داشته باشد، بنابراین برنامه وب شما به نام، آدرس ایمیل و شماره تلفن مخاطبین شما دسترسی داشته باشد. می‌توانید مشخص کنید که فقط یک مخاطب یا چند مخاطب را می‌خواهید و آیا همه قسمت‌ها را می‌خواهید یا فقط زیرمجموعه‌ای از نام‌ها، آدرس‌های ایمیل و شماره تلفن را می‌خواهید.

ملاحظات حریم خصوصی

پس از باز شدن انتخابگر، می توانید مخاطبینی را که می خواهید به اشتراک بگذارید انتخاب کنید. توجه داشته باشید که گزینه "انتخاب همه" وجود ندارد، که عمدی است: ما می خواهیم اشتراک گذاری یک تصمیم آگاهانه باشد. به همین ترتیب، دسترسی پیوسته نیست، بلکه تصمیمی است که یکبار مصرف می کند.

دسترسی به مخاطبین

دسترسی به مخاطبین یک کار ساده است. قبل از باز شدن انتخابگر، می‌توانید فیلدهایی را که می‌خواهید (گزینه‌های name ، email ، و telephone ) و اینکه می‌خواهید به چند مخاطب دسترسی داشته باشید یا فقط یک مخاطب را مشخص کنید. می‌توانید با باز کردن برنامه نمایشی ، این API را در دستگاه Android آزمایش کنید. بخش مربوطه کد منبع اساساً قطعه زیر است:

getContactsButton.addEventListener('click', async () => {
  const contacts = await navigator.contacts.select(
      ['name', 'email'],
      {multiple: true});
  if (!contacts.length) {
    // No contacts were selected, or picker couldn't be opened.
    return;
  }
  console.log(contacts);
});

کپی و چسباندن متن

تا به حال هیچ راهی برای کپی و چسباندن تصاویر به صورت برنامه ریزی شده در کلیپ بورد سیستم وجود نداشت. اخیراً ما پشتیبانی تصویر را به Async Clipboard API اضافه کردیم.

به طوری که اکنون می توانید تصاویر را کپی و جایگذاری کنید. نکته جدید این است که شما همچنین می توانید تصاویر را در کلیپ بورد بنویسید. API کلیپ بورد ناهمزمان برای مدتی از کپی و چسباندن متن پشتیبانی می کند. می توانید با فراخوانی () navigator.clipboard.writeText، متن را در کلیپ بورد کپی کنید و سپس با فراخوانی navigator.clipboard.readText() آن متن را جایگذاری کنید.

کپی و چسباندن تصاویر

اکنون می توانید تصاویر را در کلیپ بورد نیز بنویسید. برای این کار، به داده های تصویر به عنوان یک حباب نیاز دارید که سپس به سازنده آیتم کلیپ بورد ارسال می کنید. در نهایت، می‌توانید با فراخوانی () navigator.clipboard.write این آیتم کلیپ‌بورد را کپی کنید.

// Copy: Writing image to the clipboard
try {
  const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

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

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}

می‌توانید این API را در یک برنامه آزمایشی در حال اجرا ببینید، قطعه‌های مربوطه از کد منبع آن در بالا تعبیه شده است. کپی کردن تصاویر در کلیپ بورد را می توان بدون اجازه انجام داد، اما باید اجازه دهید تا از روی کلیپ بورد جایگذاری شود.

پس از اعطای دسترسی، می توانید تصویر را از کلیپ بورد بخوانید و آن را در برنامه قرار دهید:

به شما تبریک می‌گویم، شما آن را به پایان کدلاب رساندید. باز هم، این یک یادآوری مهربان است که بیشتر API ها هنوز در جریان هستند و به طور فعال روی آنها کار می شود. بنابراین، تیم واقعاً از بازخورد شما قدردانی می کند، زیرا فقط تعامل با افرادی مانند شما به ما کمک می کند تا این API ها را به درستی انجام دهیم.

ما همچنین شما را تشویق می‌کنیم که به صفحه فرود قابلیت‌های ما نگاهی بیاندازید. ما آن را به‌روز نگه می‌داریم، و به تمام مقالات عمیق مربوط به APIهایی که روی آنها کار می‌کنیم اشاره‌هایی دارد. به تکان دادن ادامه بده!

تام و کل تیم قابلیت ها 🐡