جدید در کروم 95

پیت لی پیج

در اینجا چیزی است که شما باید بدانید:

  • با URLPattern که در مرورگر ساخته شده است، مسیریابی آسان تر می شود.
  • Eye Dropper API یک ابزار داخلی برای انتخاب رنگ ها فراهم می کند.
  • نسخه آزمایشی مبدأ جدیدی وجود دارد که به شما امکان می دهد هم اکنون رشته UA کاهش یافته را دریافت کنید.
  • ویدیوهای PWA Summit همه آنلاین هستند.
  • و چیزهای بیشتری وجود دارد.

من Pete LePage هستم، کار می‌کنم و از خانه عکس‌برداری می‌کنم، بیایید شیرجه بزنیم و ببینیم چه چیزی برای توسعه‌دهندگان Chrome 95 جدید است.

مسیریابی با URLPattern

تقریباً همه برنامه‌های وب به طریقی به مسیریابی وابسته هستند، خواه کد در حال اجرا روی سروری باشد که مسیری را برای فایل‌های روی دیسک ترسیم می‌کند یا منطقی در یک برنامه تک صفحه‌ای که DOM را با تغییر URL به‌روزرسانی می‌کند. URLPattern یک API پلتفرم وب جدید است که نحو الگوی مسیریابی را استاندارد می کند.

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

اگر قبلاً با نحو مسیریابی مورد استفاده در Express ، Ruby on Rails یا path-to-regexp آشنا هستید، احتمالاً این مورد آشنا به نظر می رسد.

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

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

به عنوان مثال، بیایید به URLPattern که ممکن است توسط Google Docs استفاده شود نگاه کنیم. ما kind فایل، ID فایل و mode که باید باز شود را مشخص می‌کنیم. سپس برای استفاده از الگو، می‌توانیم test() یا exec() را فراخوانی کنیم.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern به طور پیش فرض در کروم و اج نسخه 95 و بالاتر فعال است. و برای مرورگرها یا محیط‌هایی مانند Node که هنوز از آن پشتیبانی نمی‌کنند، می‌توانید از کتابخانه urlpattern-polyfill استفاده کنید.

برای جزئیات کامل، مقاله جف را بررسی کنید URLPattern مسیریابی را به پلتفرم وب می آورد !

انتخاب رنگ ها با Eye Dropper API

تقریباً هر برنامه طراحی که من تا به حال استفاده کرده ام دارای یک ابزار قطره چکان است که تشخیص رنگ چیزی را آسان می کند. برخی از مرورگرها قابلیت قطره چکان را در <input type=color> تعبیه کرده اند، اما ایده آل نیست.

API قطره چکان که توسط برخی از افراد مایکروسافت پیاده سازی شده است، این قابلیت را به وب می آورد. برای استفاده از آن، یک نمونه EyeDropper() جدید ایجاد کنید، سپس open() را روی آن فراخوانی کنید.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

مانند بسیاری دیگر از APIهای وب مدرن، به صورت ناهمزمان کار می کند، به طوری که رشته اصلی را مسدود نمی کند. هنگامی که کاربر روی رنگ مورد نظر خود کلیک می کند، با رنگی که روی آن کلیک کرده است حل می شود.

می‌توانید یک نسخه آزمایشی سریع را امتحان کنید و کد را در Glitch ببینید.

نشست PWA

آیا اوایل این ماه اجلاس PWA را دریافت کردید؟

دیدن افراد زیادی که در مورد PWA صحبت می کنند و تجربیات خود را به اشتراک می گذارند بسیار عالی بود. اگر آن را از دست دادید، همه ویدیوها آماده شده‌اند، بنابراین حتماً آن را در PWASummit.org یا کانال PWA Summit YouTube بررسی کنید.

آزمایش مبدا کاهش عامل کاربر

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

از Chrome 95، نسخه آزمایشی مبدأ جدیدی وجود دارد که به شما امکان می‌دهد همین حالا رشته UA کاهش‌یافته را دریافت کنید. این به شما امکان می دهد قبل از اینکه UA کاهش یافته به رفتار پیش فرض در Chrome تبدیل شود، مشکلات را کشف و برطرف کنید.

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

همه جزئیات و جدول زمانی در پست آزمایشی اصلی کاهش عامل کاربر در developer.chrome.com موجود است.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

این تنها برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در کروم 95 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من Pete LePage هستم، و به محض انتشار کروم 96، من اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!