۱. مقدمه و تنظیمات
قابلیتهای وب
ما میخواهیم شکاف قابلیت بین وب و بومی را از بین ببریم و ایجاد تجربیات عالی در وب باز را برای توسعهدهندگان آسان کنیم. ما قویاً معتقدیم که هر توسعهدهندهای باید به قابلیتهای مورد نیاز خود برای ایجاد یک تجربه وب عالی دسترسی داشته باشد و ما به یک وب توانمندتر متعهد هستیم.
با این حال، برخی قابلیتها - مانند دسترسی به سیستم فایل و تشخیص عدم فعالیت - وجود دارند که در نسخه بومی در دسترس هستند اما در وب موجود نیستند. این قابلیتهای از دست رفته به این معنی است که برخی از انواع برنامهها را نمیتوان در وب ارائه داد یا کاربرد کمتری دارند.
ما این قابلیتهای جدید را به روشی باز و شفاف طراحی و توسعه خواهیم داد، با استفاده از فرآیندهای استانداردهای پلتفرم وب باز موجود، ضمن دریافت بازخورد اولیه از توسعهدهندگان و سایر فروشندگان مرورگر، همزمان با تکرار طراحی، تا از یک طراحی سازگار اطمینان حاصل کنیم.
آنچه خواهید ساخت
در این آزمایشگاه کد، شما با تعدادی از APIهای وب که کاملاً جدید هستند یا فقط پشت یک پرچم (flag) در دسترس هستند، کار خواهید کرد. بنابراین، این آزمایشگاه کد به جای ساخت یک محصول نهایی خاص، بر خود APIها و موارد استفادهای که این APIها ارائه میدهند تمرکز دارد.
آنچه یاد خواهید گرفت
این آزمایشگاه کد، اصول اولیهی چندین API پیشرفته را به شما آموزش میدهد. توجه داشته باشید که این اصول هنوز کاملاً قطعی نشدهاند و ما از بازخورد شما در مورد روند توسعه بسیار سپاسگزاریم.
آنچه نیاز دارید
از آنجایی که APIهای ارائه شده در این آزمایشگاه کد واقعاً پیشرفته هستند، الزامات هر API متفاوت است. لطفاً حتماً اطلاعات سازگاری را در ابتدای هر بخش با دقت مطالعه کنید.
چگونه به codelab دسترسی پیدا کنیم
قرار نیست که این آزمایشگاه کد لزوماً به صورت متوالی بررسی شود. هر بخش، یک API مستقل را نشان میدهد، بنابراین میتوانید هر بخش را که بیشتر مورد علاقه شماست، انتخاب کنید.
۲. API نشانگذاری
هدف Badging API جلب توجه کاربران به اتفاقاتی است که در پسزمینه رخ میدهد. برای سادگی نسخه آزمایشی در این آزمایشگاه کد، بیایید از API برای جلب توجه کاربران به چیزی که در پیشزمینه اتفاق میافتد استفاده کنیم. سپس میتوانید انتقال ذهنی را به چیزهایی که در پسزمینه اتفاق میافتند، انجام دهید.
نصب ایرهورنر
برای اینکه این API کار کند، به یک PWA نیاز دارید که روی صفحه اصلی نصب شده باشد، بنابراین اولین قدم نصب یک PWA مانند airhorner.com معروف و بدنام است. دکمه نصب را در گوشه بالا سمت راست بزنید یا از منوی سه نقطه برای نصب دستی استفاده کنید.
این یک پیام تأیید نشان میدهد، روی نصب کلیک کنید.
اکنون یک آیکون جدید در داک سیستم عامل خود دارید. برای اجرای PWA روی آن کلیک کنید. پنجره برنامه مخصوص به خود را خواهد داشت و در حالت مستقل اجرا میشود.
|
|
تنظیم نشان
حالا که یک PWA نصب کردهاید، به مقداری دادههای عددی (نشانها فقط میتوانند شامل اعداد باشند) برای نمایش روی نشان نیاز دارید. یک چیز ساده برای شمردن در Air Horner، آه ، تعداد دفعاتی است که بوق زده شده است. در واقع، با برنامه Airhorner نصب شده، سعی کنید بوق بزنید و نشان را بررسی کنید. هر بار که بوق میزنید، یک واحد بیشتر حساب میکند.
خب، این چطور کار میکند؟ اساساً، کد به این صورت است:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
چند بار بوق بادی را به صدا درآورید و آیکون PWA را بررسی کنید: هر. بار. صدای بوق بادی بهروزرسانی میشود. به همین سادگی.
پاک کردن یک نشان
شمارنده تا ۹۹ بالا میرود و سپس دوباره شروع میشود. همچنین میتوانید آن را به صورت دستی تنظیم مجدد کنید. تب DevTools Console را باز کنید، خط زیر را جایگذاری کنید و Enter را بزنید.
navigator.setExperimentalAppBadge(0);
از طرف دیگر، میتوانید با پاک کردن صریح آن، همانطور که در قطعه کد زیر نشان داده شده است، از شر نشان خلاص شوید. اکنون آیکون PWA شما باید دوباره مانند ابتدا، واضح و بدون نشان، به نظر برسد.
navigator.clearExperimentalAppBadge();
بازخورد
نظر شما در مورد این API چیست؟ لطفاً با پاسخ مختصر به این نظرسنجی به ما کمک کنید:
آیا استفاده از این API شهودی بود؟
آیا مثال را برای اجرا دریافت کردید؟
حرف بیشتری برای گفتن دارید؟ آیا ویژگی خاصی کم بود؟ لطفاً در این نظرسنجی بازخورد سریع خود را ارائه دهید. متشکرم!
۳. API سیستم فایل بومی
رابط برنامهنویسی کاربردی سیستم فایل بومی (Native File System API) به توسعهدهندگان این امکان را میدهد تا برنامههای وب قدرتمندی بسازند که با فایلهای موجود در دستگاه محلی کاربر تعامل داشته باشند. پس از اینکه کاربر به یک برنامه وب دسترسی میدهد، این رابط برنامهنویسی کاربردی (API) به برنامههای وب اجازه میدهد تا تغییرات را مستقیماً در فایلها و پوشههای دستگاه کاربر بخوانند یا ذخیره کنند.
خواندن یک فایل
هدف «سلام دنیا»ی API سیستم فایل بومی، خواندن یک فایل محلی و دریافت محتوای فایل است. یک فایل .txt ساده ایجاد کنید و مقداری متن وارد کنید. سپس، به هر سایت امنی (یعنی سایتی که از طریق HTTP S ارائه میشود) مانند example.com بروید و کنسول DevTools را باز کنید. قطعه کد زیر را در کنسول جایگذاری کنید. از آنجا که 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 شهودی بود؟
آیا مثال را برای اجرا دریافت کردید؟
حرف بیشتری برای گفتن دارید؟ آیا ویژگی خاصی کم بود؟ لطفاً در این نظرسنجی بازخورد سریع خود را ارائه دهید. متشکرم!
۴. API تشخیص شکل
API تشخیص شکل، دسترسی به آشکارسازهای شکل شتابیافته (مثلاً برای چهرههای انسان) را فراهم میکند و روی تصاویر ثابت و/یا فیدهای تصویر زنده کار میکند. سیستمعاملها دارای آشکارسازهای ویژگی کارآمد و بسیار بهینهشدهای مانند Android FaceDetector هستند. API تشخیص شکل، این پیادهسازیهای بومی را باز میکند و آنها را از طریق مجموعهای از رابطهای جاوا اسکریپت در معرض نمایش قرار میدهد.
در حال حاضر، ویژگیهای پشتیبانیشده عبارتند از تشخیص چهره از طریق رابط FaceDetector ، تشخیص بارکد از طریق رابط BarcodeDetector و تشخیص متن (تشخیص نوری کاراکتر) از طریق رابط TextDetector .
تشخیص چهره
یکی از ویژگیهای جذاب API تشخیص شکل، تشخیص چهره است. برای آزمایش آن، به صفحهای با چهره نیاز داریم. این صفحه با چهره نویسنده ، شروع خوبی است. چیزی شبیه به تصویر زیر خواهد بود. در یک مرورگر پشتیبانیشده، کادر مرزی چهره و نشانههای چهره شناسایی میشوند.
با ریمیکس کردن یا ویرایش پروژه Glitch ، به خصوص فایل script.js ، میتوانید ببینید که برای انجام این کار چقدر کد کمی لازم بوده است.
اگر میخواهید کاملاً پویا باشید و فقط با چهره نویسنده کار نکنید، به این صفحه نتایج جستجوی گوگل که پر از چهره است، در یک تب خصوصی یا در حالت مهمان بروید. اکنون در آن صفحه، با کلیک راست در هر جایی و سپس کلیک روی Inspect ، ابزارهای توسعهدهنده کروم را باز کنید. سپس، در تب 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);
}
});
تشخیص بارکد
دومین ویژگی API تشخیص شکل، تشخیص بارکد است. مشابه قبل، به صفحهای با بارکد، مانند این صفحه ، نیاز داریم. وقتی آن را در مرورگر باز میکنید، کدهای QR مختلف رمزگشایی شده را خواهید دید. پروژه Glitch ، به خصوص فایل script.js را ریمیکس یا ویرایش کنید تا ببینید چگونه انجام میشود.
اگر چیزی پویاتر میخواهید، میتوانیم دوباره از جستجوی تصویر گوگل استفاده کنیم. این بار، در مرورگر خود، در یک تب خصوصی یا در حالت مهمان به این صفحه نتایج جستجوی گوگل بروید. اکنون قطعه کد زیر را در تب کنسول DevTools کروم پیست کنید. پس از لحظهای کوتاه، بارکدهای شناسایی شده با مقدار خام و نوع بارکد حاشیهنویسی میشوند.
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);
}
});
تشخیص متن
آخرین ویژگی API تشخیص شکل، تشخیص متن است. تا الان دیگر با مراحل کار آشنا شدهاید: ما به صفحهای نیاز داریم که شامل تصاویری باشد که حاوی متن باشند، مانند این صفحه که نتایج اسکن Google Books را نشان میدهد. در مرورگرهای پشتیبانیشده، خواهید دید که متن شناسایی شده و یک کادر محدودکننده دور متن کشیده شده است. پروژه Glitch ، به خصوص فایل script.js را ریمیکس یا ویرایش کنید تا ببینید چگونه انجام میشود.
برای آزمایش این قابلیت به صورت پویا، در یک تب خصوصی یا در حالت مهمان به صفحه نتایج جستجو بروید. اکنون قطعه کد زیر را در تب کنسول DevTools کروم پیست کنید. با کمی انتظار، بخشی از متن شناسایی خواهد شد.
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 شهودی بود؟
آیا مثال را برای اجرا دریافت کردید؟
حرف بیشتری برای گفتن دارید؟ آیا ویژگی خاصی کم بود؟ لطفاً در این نظرسنجی بازخورد سریع خود را ارائه دهید. متشکرم!
۵. API هدف اشتراکگذاری وب
API هدف اشتراکگذاری وب به برنامههای وب نصبشده اجازه میدهد تا در سیستم عامل اصلی به عنوان یک هدف اشتراکگذاری ثبت شوند تا محتوای اشتراکگذاریشده را از API اشتراکگذاری وب یا رویدادهای سیستم، مانند دکمه اشتراکگذاری در سطح سیستم عامل، دریافت کنند.
یک PWA برای اشتراکگذاری نصب کنید
در اولین قدم، به یک PWA نیاز دارید که بتوانید در آن به اشتراک بگذارید. این بار، Airhorner (خوشبختانه) این کار را انجام نمیدهد، اما برنامه آزمایشی Web Share Target از شما حمایت میکند. برنامه را روی صفحه اصلی دستگاه خود نصب کنید.
چیزی را در PWA به اشتراک بگذارید
در مرحله بعد، به چیزی برای اشتراکگذاری نیاز دارید، مثلاً یک عکس از گوگل فوتوز. از دکمه اشتراکگذاری استفاده کنید و Scrapbook PWA را به عنوان هدف اشتراکگذاری انتخاب کنید.
وقتی روی آیکون برنامه ضربه بزنید، مستقیماً به برنامهی وب پیشنمایش Scrapbook وارد میشوید و عکس همانجاست.
خب، این چطور کار میکند؟ برای فهمیدنش، مانیفست برنامه وب 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 شهودی بود؟
آیا مثال را برای اجرا دریافت کردید؟
حرف بیشتری برای گفتن دارید؟ آیا ویژگی خاصی کم بود؟ لطفاً در این نظرسنجی بازخورد سریع خود را ارائه دهید. متشکرم!
۶. API قفل بیداری
برای جلوگیری از تخلیه باتری، اکثر دستگاهها وقتی بیکار میمانند، به سرعت به حالت خواب میروند. اگرچه این حالت در بیشتر مواقع خوب است، اما برخی از برنامهها برای تکمیل کار خود نیاز دارند که صفحه یا دستگاه را بیدار نگه دارند. API قفل بیداری راهی برای جلوگیری از کم نور شدن و قفل شدن صفحه یا جلوگیری از به خواب رفتن دستگاه فراهم میکند. این قابلیت، تجربیات جدیدی را ممکن میسازد که تاکنون به یک برنامه بومی نیاز داشتند.
تنظیم محافظ صفحه نمایش
برای آزمایش API قفل بیداری، ابتدا باید مطمئن شوید که دستگاه شما به حالت خواب میرود . بنابراین، در پنل تنظیمات سیستم عامل خود، یک محافظ صفحه نمایش دلخواه را فعال کنید و مطمئن شوید که بعد از ۱ دقیقه شروع به کار میکند. برای اطمینان از اینکه دستگاه شما دقیقاً در آن مدت به حال خود رها شود، آن را رها کنید (بله، میدانم، دردناک است). تصاویر زیر macOS را نشان میدهند، اما مطمئناً میتوانید این را روی دستگاه اندروید موبایل یا هر پلتفرم دسکتاپ پشتیبانیشده خود امتحان کنید.
قفل بیدارباش صفحه را تنظیم کنید
حالا که میدانید محافظ صفحه نمایش شما کار میکند، از یک قفل بیدارباش از نوع "screen" برای جلوگیری از انجام کار محافظ صفحه نمایش استفاده خواهید کرد. به برنامه آزمایشی Wake Lock بروید و روی دکمه فعالسازی کلیک کنید.
کادر انتخاب قفل بیدارباش screen .
از آن لحظه، قفل بیدارباش فعال میشود. اگر به اندازه کافی صبور باشید و دستگاه خود را برای یک دقیقه دستنخورده رها کنید، اکنون خواهید دید که محافظ صفحه نمایش واقعاً شروع به کار نکرده است.
خب، این چطور کار میکند؟ برای فهمیدنش، به پروژه Glitch برای برنامه آزمایشی Wake Lock بروید و script.js را بررسی کنید. خلاصه کد در قطعه کد زیر است. یک تب جدید باز کنید (یا از هر تبی که باز کردهاید استفاده کنید) و کد زیر را در کنسول ابزارهای توسعهدهنده کروم جایگذاری کنید. وقتی روی پنجره کلیک میکنید، باید یک قفل بیدارباش ببینید که دقیقاً به مدت ۱۰ ثانیه فعال است (به گزارشهای کنسول مراجعه کنید) و محافظ صفحه نمایش شما نباید اجرا شود.
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هایی که ما در مورد آن بسیار هیجانزدهایم، API انتخابگر مخاطب است. این API به یک برنامه وب اجازه میدهد تا از طریق مدیریت مخاطبین بومی دستگاه به مخاطبین دسترسی پیدا کند، بنابراین برنامه وب شما به نامها، آدرسهای ایمیل و شماره تلفنهای مخاطبین شما دسترسی خواهد داشت. میتوانید مشخص کنید که آیا فقط یک یا چند مخاطب میخواهید و آیا همه فیلدها را میخواهید یا فقط زیرمجموعهای از نامها، آدرسهای ایمیل و شماره تلفنها را.
ملاحظات حریم خصوصی
پس از باز شدن کادر انتخاب، میتوانید مخاطبینی را که میخواهید به اشتراک بگذارید انتخاب کنید. متوجه خواهید شد که گزینه «انتخاب همه» وجود ندارد، که عمدی است: ما میخواهیم اشتراکگذاری یک تصمیم آگاهانه باشد. به همین ترتیب، دسترسی مداوم نیست، بلکه یک تصمیم یکباره است.
دسترسی به مخاطبین
دسترسی به مخاطبین کار سادهای است. قبل از باز شدن کادر انتخاب، میتوانید فیلدهای مورد نظر خود را مشخص کنید (گزینهها name ، email و telephone هستند) و اینکه آیا میخواهید به چندین یا فقط یک مخاطب دسترسی داشته باشید. میتوانید این API را روی یک دستگاه اندروید با باز کردن برنامه آزمایشی آزمایش کنید. بخش مربوطه در کد منبع اساساً قطعه کد زیر است:
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);
});
۸. API کلیپبورد ناهمگام
کپی و چسباندن متن
تاکنون، هیچ راهی برای کپی و چسباندن تصاویر به کلیپبورد سیستم از طریق برنامهنویسی وجود نداشت. اخیراً، پشتیبانی از تصویر را به API کلیپبورد Async اضافه کردهایم.
بنابراین اکنون میتوانید تصاویر را کپی و پیست کنید. نکته جدید این است که میتوانید تصاویر را نیز در کلیپبورد بنویسید. 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هایی است که روی آنها کار میکنیم. به پیشرفت ادامه دهید!
تام و کل تیم Capabilities 🐡