חדש ב-Chrome 95

Pete LePage

דברים שעליך לדעת:

  • הניתוב נעשה קל יותר כש-URLPattern מוטמע בדפדפן.
  • Eye Dropper API מספק כלי מובנה לבחירה צבעים.
  • יש גרסת מקור חדשה לניסיון שמאפשרת לך להביע הסכמה לקבלת הפחיתו את מחרוזת UA.
  • כל הסרטונים של PWA: זמינים באינטרנט.
  • ויש עוד הרבה עוד.

אני Pete LePage, ואני עובד/ת וקולעים מהבית, בואו נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 95.

מתבצע ניתוב עם URLPattern

כמעט כל אפליקציות האינטרנט תלויות בניתוב, לא משנה אם הקוד פועל. בשרת שממפה נתיב לקבצים בדיסק או בלוגיקה באפליקציה עם דף יחיד שמעדכנת את ה-DOM כשכתובת ה-URL משתנה. URLPattern הוא אתר אינטרנט חדש Platform 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 מופעל כברירת מחדל ב-Chrome וב-Edge מגרסה 95 ואילך. ובדפדפנים או סביבות כמו Node שעדיין לא תומכים בו, אפשר להשתמש בספרייה urlpattern-polyfill.

כדאי לקרוא את המאמר של ג'ף בנושא URLTemplate אפשרות לקבל ניתוב לפלטפורמת האינטרנט לקבלת פרטים מלאים!

בחירת צבעים באמצעות Eye Dropper API

כמעט לכל אפליקציית עיצוב שהשתמשתי בה יש כלי טפטוף, קל להבין מהו הצבע של משהו. בחלק מהדפדפנים יש כלי הטפטפת שיש לך אפשרות מובנית להפעיל ב-<input type=color>, אבל היא לא אידיאלית.

ממשק ה-API של הטפטפת, שמוטמע על ידי כמה מהאנשים ב-Microsoft, מביא את הפונקציונליות הזו באינטרנט. כדי להשתמש בו, צריך ליצור EyeDropper() חדש ואז קוראים לפונקציה open().

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

בדומה להרבה ממשקי API מודרניים אחרים, היא פועלת באופן אסינכרוני, כדי לא חוסמת את ה-thread הראשי. כשהמשתמשים לוחצים על הצבע הרצוי, היא תופיע בצבע שעליו לחצו.

אפשר לנסות הדגמה קצרה, code ב-Glitch.

כנס PWA

ראית את מפגש הפסגה בנושא PWA מוקדם יותר החודש?

שמחתי לראות כל כך הרבה אנשים מדברים על אפליקציות PWA ומשתפים לחוויות שונות. אם פספסת, כל הסרטונים כבר מוכנים, אז כדאי לצפות בסרטון בכתובת PWASummit.org או ערוץ YouTube של מפגש הפסגה של PWA

גרסת מקור של הפחתת סוכני משתמשים

הפחתת מידע בסוכן משתמש במטרה להפחית את המשתמשים טביעות אצבע דיגיטליות, על ידי צמצום המידע מחרוזת רק למותג הדפדפן ולגרסה המשמעותית שלו, למחשב שלו או ייחודיות לנייד, והפלטפורמה שבה הוא פועל.

החל מגרסה 95 של Chrome, יש גרסת מקור לניסיון חדשה מאפשר לכם להביע הסכמה עכשיו לקבל את המחרוזת המופחתת של UA. הפעולה הזו תאפשר לגלות ולתקן בעיות לפני שה-UA המצומצם הופך לברירת המחדל ההתנהגות ב-Chrome.

השינויים יחולו באופן מצטבר על מספר גרסאות, אבל כל מה שצריך להכין ולבדוק מוכן כבר עכשיו.

כל הפרטים וציר הזמן זמינים פוסט של גרסת המקור לניסיון של הפחתה בסוכן המשתמש בתאריך developer.chrome.com.

ופעולות נוספות.

כמובן שיש עוד הרבה.

קריאה נוספת

זה כולל רק חלק מהעדכונים העיקריים. בקישורים הבאים תוכלו למצוא שינויים נוספים ב-Chrome 95.

להרשמה

כדי לא לפספס עדכונים, אפשר להירשם אל ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.

אני פיט לעמוד, וברגע ש-Chrome 96 יפורסם, אני אהיה כאן לספר לך מה חדש ב-Chrome!