דברים שעליך לדעת:
- הניתוב נעשה קל יותר כש-
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.
ופעולות נוספות.
כמובן שיש עוד הרבה.
- אם עקבתם אחרי העבודה של Storage Foundation API, גרסת מקור לתקופת ניסיון חדשה לכינויי גישה.
- עכשיו יש ב-WebAssembly תמיכה בטיפול בחריגים, מאפשרת לקוד לפרוץ את זרימת הבקרה כאשר תתרחש חריגה.
- גרסת Chrome 100 תגיע בשנה הבאה. זה הזמן לוודא הקוד יכול להכיל יותר משתי ספרות!
קריאה נוספת
זה כולל רק חלק מהעדכונים העיקריים. בקישורים הבאים תוכלו למצוא שינויים נוספים ב-Chrome 95.
- מה חדש בכלי הפיתוח ל-Chrome (95)
- הוצאה משימוש של Chrome 95 הסרות
- עדכונים ל-ChromeStatus.com ל-Chrome 95
- מה חדש ב-JavaScript בגרסה 95 של Chrome
- רשימת השינויים במאגר המקור של Chromium
- יומן הגרסאות של Chrome
להרשמה
כדי לא לפספס עדכונים, אפשר להירשם אל ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.
אני פיט לעמוד, וברגע ש-Chrome 96 יפורסם, אני אהיה כאן לספר לך מה חדש ב-Chrome!