متحد کردن وب و برنامه های بومی با 4 رابط برنامه کاربردی جاوا اسکریپت ناشناخته – مجله Smashing

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

این وضعیت می تواند یک “catch-22” باشد:

یک API جالب است اما به دلیل پشتیبانی ناقص فاقد آگاهی است و به دلیل آگاهی کم نیازی به پشتیبانی فوری نیست.

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

شما می توانید تمام این API ها را در این نسخه نمایشی در حال انجام مشاهده کنید.

1. Screen Orientation API

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

با استفاده از جهانی screen شی، می‌توانید به ویژگی‌های مختلفی که صفحه برای رندر کردن صفحه استفاده می‌کند، از جمله ویژگی‌های مختلف دسترسی داشته باشید screen.orientation هدف – شی. دو خاصیت دارد:

• type: جهت صفحه نمایش فعلی میتونه باشه: "portrait-primary"، "portrait-secondary"، "landscape-primary"، یا "landscape-secondary".
• angle: زاویه جهت گیری صفحه نمایش فعلی می تواند هر عددی از 0 تا 360 درجه باشد، اما معمولاً در مضرب 90 درجه تنظیم می شود (مثلاً 0، 90، 180، یا 270).

در دستگاه های تلفن همراه، اگر angle است 0 درجه، type اغلب قرار است به ارزیابی شود "portrait" (عمودی)، اما در دستگاه های دسکتاپ، معمولاً چنین است "landscape" (افقی). این باعث می شود type ویژگی دقیق برای دانستن موقعیت واقعی دستگاه

این screen.orientation شی نیز دو روش دارد:

• .lock(): این یک روش همگام است که a type مقدار به عنوان آرگومان برای قفل کردن صفحه نمایش.
• .unlock(): این روش قفل صفحه را در جهت پیش فرض آن باز می کند.

و بالاخره، screen.orientation با یک حساب می شود "orientationchange" رویداد برای دانستن زمان تغییر جهت.

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

یافتن و قفل کردن جهت صفحه نمایش

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

این می تواند دیگ بخار HTML ما باشد:

  

    Orientation Type: 
    
Orientation Angle: 
  

  Lock Screen

  Unlock Screen

  Go Full Screen

در سمت جاوا اسکریپت، جهت صفحه را تزریق می کنیم type و angle خواص در HTML ما.

let currentOrientationType = document.querySelector(".orientation-type");
let currentOrientationAngle = document.querySelector(".orientation-angle");

currentOrientationType.textContent = screen.orientation.type;
currentOrientationAngle.textContent = screen.orientation.angle;

اکنون می‌توانیم ویژگی‌های جهت و زاویه دستگاه را ببینیم. در لپ تاپ من، آنها هستند "landscape-primary" و 0°.

اگر به صدای پنجره گوش کنیم orientationchange رویداد، ما می توانیم ببینیم که هر بار که صفحه نمایش می چرخد ​​چگونه مقادیر به روز می شوند.

window.addEventListener("orientationchange", () => {
  currentOrientationType.textContent = screen.orientation.type;
  currentOrientationAngle.textContent = screen.orientation.angle;
});

برای قفل کردن صفحه، ابتدا باید در حالت تمام صفحه باشیم، بنابراین از یک ویژگی بسیار مفید دیگر استفاده خواهیم کرد: API تمام صفحه. هیچ کس نمی خواهد یک صفحه وب بدون رضایت او به حالت تمام صفحه باز شود، بنابراین برای کار کردن به فعال سازی موقت (یعنی کلیک کاربر) از یک عنصر DOM نیاز داریم.

API تمام صفحه دو روش دارد:

1. Document.exitFullscreen() از شی سند جهانی استفاده می شود،
2. Element.requestFullscreen() باعث می شود عنصر مشخص شده و فرزندان آن به صورت تمام صفحه نمایش داده شوند.

ما می خواهیم کل صفحه تمام صفحه باشد تا بتوانیم متد را از عنصر ریشه در قسمت فراخوانی کنیم document.documentElement هدف – شی:

const fullscreenButton = document.querySelector(".fullscreen-button");

fullscreenButton.addEventListener("click", async () => {
  // If it is already in full-screen, exit to normal view
  if (document.fullscreenElement) {
    await document.exitFullscreen();
  } else {
    await document.documentElement.requestFullscreen();
  }
});

بعد، می‌توانیم صفحه را در جهت فعلی قفل کنیم:

const lockButton = document.querySelector(".lock-button");

lockButton.addEventListener("click", async () => {
  try {
    await screen.orientation.lock(screen.orientation.type);
  } catch (error) {
    console.error(error);
  }
});

و با دکمه باز کردن قفل برعکس عمل کنید:

const unlockButton = document.querySelector(".unlock-button");

unlockButton.addEventListener("click", () => {
  screen.orientation.unlock();
});

آیا نمی‌توانیم جهت‌گیری را با درخواست رسانه بررسی کنیم؟

آره! ما در واقع می توانیم جهت گیری صفحه را از طریق بررسی کنیم orientation ویژگی رسانه در پرس و جو رسانه CSS. با این حال، پرسش‌های رسانه‌ای جهت‌گیری فعلی را با بررسی اینکه آیا عرض برای منظره «بزرگ‌تر از ارتفاع» است یا برای عمودی «کوچک‌تر» است، جهت‌گیری فعلی را محاسبه می‌کنند. در مقابل،

Screen Orientation API صفحه نمایش را بدون توجه به ابعاد viewport بررسی می کند و در مقابل ناهماهنگی هایی که ممکن است با تغییر اندازه صفحه ظاهر شوند، مقاوم می شود.

ممکن است متوجه شده باشید که چگونه PWA هایی مانند اینستاگرام و X صفحه نمایش را مجبور می کنند در حالت عمودی قرار گیرد حتی زمانی که جهت گیری سیستم اصلی باز است. توجه به این نکته مهم است که این رفتار از طریق Screen Orientation API حاصل نمی شود، بلکه با تنظیم orientation اموال در manifest.json فایل به نوع جهت دلخواه.

2. Device Orientation API

API دیگری که می‌خواهم به آن اشاره کنم Device Orientation API است. این امکان دسترسی به حسگرهای ژیروسکوپ دستگاه را برای خواندن جهت گیری دستگاه در فضا فراهم می کند. چیزی که همیشه در برنامه های تلفن همراه، عمدتا بازی ها، استفاده می شود. API این اتفاق را با a می دهد deviceorientation رویدادی که در هر بار حرکت دستگاه ایجاد می شود. دارای خواص زیر است:

• event.alpha: جهت گیری در امتداد محور Z، از 0 تا 360 درجه.
• event.beta: جهت گیری در امتداد محور X، از 180- تا 180 درجه.
• event.gamma: جهت گیری در امتداد محور Y، در محدوده 90- تا 90 درجه.

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

جابجایی عناصر با دستگاه شما

در این صورت یک مکعب سه بعدی با CSS می سازیم که با دستگاه شما قابل چرخش است! دستورالعمل‌های کاملی که من برای ساختن مکعب CSS اولیه استفاده کردم به دیوید دساندرو اختصاص دارد و می‌توان آن را در مقدمه‌ای برای تبدیل‌های سه بعدی پیدا کرد.

شما می توانید HTML کامل خام را در نسخه ی نمایشی ببینید، اما بیایید آن را برای آیندگان در اینجا چاپ کنیم:

  
  
  

    Alpha: 
    
Beta: 
    
Gamma: 
  

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

اکنون با جاوا اسکریپت به پنجره ها گوش می دهیم deviceorientation رویداد و دسترسی به داده‌های جهت‌گیری رویداد:

const currentAlpha = document.querySelector(".currentAlpha");
const currentBeta = document.querySelector(".currentBeta");
const currentGamma = document.querySelector(".currentGamma");

window.addEventListener("deviceorientation", (event) => {
  currentAlpha.textContent = event.alpha;
  currentBeta.textContent = event.beta;
  currentGamma.textContent = event.gamma;
});

برای مشاهده اینکه چگونه داده ها در یک دستگاه دسکتاپ تغییر می کنند، می توانیم DevTools Chrome را باز کنیم و به پنل حسگرها برای شبیه سازی یک دستگاه در حال چرخش دسترسی پیدا کنیم.

برای چرخاندن مکعب، CSS آن را تغییر می دهیم transform ویژگی ها با توجه به داده های جهت گیری دستگاه:

const currentAlpha = document.querySelector(".currentAlpha");
const currentBeta = document.querySelector(".currentBeta");
const currentGamma = document.querySelector(".currentGamma");

const cube = document.querySelector(".cube");

window.addEventListener("deviceorientation", (event) => {
  currentAlpha.textContent = event.alpha;
  currentBeta.textContent = event.beta;
  currentGamma.textContent = event.gamma;

  cube.style.transform = `rotateX(${event.beta}deg) rotateY(${event.gamma}deg) rotateZ(${event.alpha}deg)`;
});

این هم نتیجه:

3. Vibration API

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

فقط یک روش وجود دارد که Vibration API در اختیار ما قرار می دهد، و این تنها چیزی است که ما نیاز داریم: navigator.vibrate().

vibrate() در سطح جهانی از navigator شی و استدلالی برای مدت زمان یک ارتعاش در میلی ثانیه می گیرد. این می تواند یک عدد یا آرایه ای از اعداد باشد که حامی ارتعاشات و مکث ها را نشان می دهد.

navigator.vibrate(200); // vibrate 200ms
navigator.vibrate((200, 100, 200)); // vibrate 200ms, wait 100, and vibrate 200ms.

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

نسخه ی نمایشی Vibration API

بیایید یک نسخه ی نمایشی سریع ایجاد کنیم که در آن کاربر چند میلی ثانیه را وارد می کند که می خواهد دستگاهش بلرزد و دکمه ها برای شروع و متوقف کردن لرزش، با علامت گذاری شروع می شود:

  

  Vibrate
  Stop

یک شنونده رویداد برای یک کلیک اضافه می کنیم و آن را فراخوانی می کنیم vibrate() روش:

const vibrateButton = document.querySelector(".vibrate-button");
const millisecondsInput = document.querySelector("#milliseconds-input");

vibrateButton.addEventListener("click", () => {
  navigator.vibrate(millisecondsInput.value);
});

برای توقف ارتعاش، ارتعاش فعلی را با یک لرزش صفر میلی‌ثانیه لغو می‌کنیم.

const stopVibrateButton = document.querySelector(".stop-vibrate-button");

stopVibrateButton.addEventListener("click", () => {
  navigator.vibrate(0);
});

در گذشته، فقط برنامه‌های بومی می‌توانستند به «مخاطبین» دستگاه متصل شوند. اما اکنون ما چهارمین و آخرین API را داریم که می‌خواهم به آن نگاه کنم: the تماس با Picker API.

API به برنامه های وب اجازه دسترسی به لیست مخاطبین دستگاه را می دهد. به طور خاص، ما دریافت می کنیم contacts.select() روش async در دسترس از طریق navigator شی، که دو آرگومان زیر را می گیرد:

• properties: این آرایه ای است که حاوی اطلاعاتی است که می خواهیم از یک کارت تماس دریافت کنیم، به عنوان مثال، "name"، "address"، "email"، "tel"، و "icon".
• options: این یک شی است که فقط می تواند حاوی multiple ویژگی boolean برای تعیین اینکه آیا کاربر می تواند یک یا چند مخاطب را در یک زمان انتخاب کند یا خیر.

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

من می ترسم که پشتیبانی مرورگر در کنار zilch در این مورد باشد، در زمانی که من این را می نویسم به Chrome Android، اینترنت سامسونگ و مرورگر وب بومی اندروید محدود می شود.

انتخاب مخاطبین کاربر

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

  Get Contacts
  
Contacts:
  

سپس، در جاوا اسکریپت، ابتدا عناصر خود را از DOM می سازیم و انتخاب می کنیم که کدام ویژگی را می خواهیم از مخاطبین انتخاب کنیم.

const getContactsButton = document.querySelector(".get-contacts");
const contactList = document.querySelector(".contact-list");

const props = ("name", "tel", "icon");
const options = {multiple: true};

اکنون، وقتی کاربر روی آن کلیک می‌کند، به‌صورت ناهمزمان مخاطبین را انتخاب می‌کنیم getContactsButton.

const getContacts = async () => {
  try {
    const contacts = await navigator.contacts.select(props, options);
  } catch (error) {
    console.error(error);
  }
};

getContactsButton.addEventListener("click", getContacts);

با استفاده از دستکاری DOM، می‌توانیم یک آیتم لیست را به هر مخاطب و یک نماد را به آن اضافه کنیم contactList عنصر

const appendContacts = (contacts) => {
  contacts.forEach(({name, tel, icon}) => {
    const contactElement = document.createElement("li");

    contactElement.innerText = `${name}: ${tel}`;
    contactList.appendChild(contactElement);
  });
};

const getContacts = async () => {
  try {
    const contacts = await navigator.contacts.select(props, options);
    appendContacts(contacts);
  } catch (error) {
    console.error(error);
  }
};

getContactsButton.addEventListener("click", getContacts);

ضمیمه کردن یک تصویر کمی مشکل است زیرا باید آن را به URL تبدیل کرده و برای هر مورد در لیست اضافه کنیم.

const getIcon = (icon) => {
  if (icon.length > 0) {
    const imageUrl = URL.createObjectURL(icon(0));
    const imageElement = document.createElement("img");
    imageElement.src = imageUrl;

    return imageElement;
  }
};

const appendContacts = (contacts) => {
  contacts.forEach(({name, tel, icon}) => {
    const contactElement = document.createElement("li");

    contactElement.innerText = `${name}: ${tel}`;
    contactList.appendChild(contactElement);

    const imageElement = getIcon(icon);
    contactElement.appendChild(imageElement);
  });
};

const getContacts = async () => {
  try {
    const contacts = await navigator.contacts.select(props, options);
    appendContacts(contacts);
  } catch (error) {
    console.error(error);
  }
};

getContactsButton.addEventListener("click", getContacts);

و این هم نتیجه:

توجه داشته باشید: Contact Picker API تنها در صورتی کار می کند که زمینه امن باشد، به عنوان مثال، صفحه در خدمت است https:// یا wss:// URL ها

نتیجه

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

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

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

(gg, yk)