متحد کردن وب و برنامه های بومی با 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 رویداد، ما می توانیم ببینیم که هر بار که صفحه نمایش می چرخد \u200b\u200bچگونه مقادیر به روز می شوند.

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 200msnavigator.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)