חדש ב-Chrome 84

Pete LePage

אנחנו מתחילים להשיק את Chrome 84 בגרסה היציבה.

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

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

קיצורי דרך של סמלי אפליקציות

קיצורי דרך לסמל האפליקציה של אפליקציית ה-PWA של Twitter

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

כדי להפעיל את קיצורי הדרך האלה ב-Android, לוחצים לחיצה ארוכה על סמל האפליקציה. הוספת קיצור דרך לאפליקציית ה-PWA היא פשוטה: יוצרים נכס shortcuts חדש במניפסט של אפליקציית האינטרנט, מתארים את קיצור הדרך ומוסיפים את הסמלים.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

פרטים נוספים זמינים במאמר ביצוע משימות במהירות בעזרת מקשי קיצור לאפליקציות.

Web animations API

ב-Chrome 84 נוספו ל-Web Animation API כמה תכונות שלא היו נתמכות בעבר.

  • הפונקציות animation.ready ו-animation.finished הומרו ל-Promise.
  • הדפדפן יכול עכשיו לנקות ולהסיר אנימציות ישנות, וכך לחסוך בזיכרון ולשפר את הביצועים.
  • עכשיו אפשר לשלב אנימציות באמצעות מצבי קומפוזיציה – באמצעות האפשרויות add ו-accumulate.

אי אפשר לתאר כאן את כל השיפורים או להציע דוגמאות טובות, לכן כדאי לעיין במאמר שיפורים ב-Web Animations API ב-Chromium 84 כדי לקבל פרטים מלאים.

Content indexing API

אם התוכן זמין ללא חיבור לרשת. אבל המשתמש לא יודע על כך? האם המוצר באמת זמין? יש בעיה בגילוי!

בעזרת Content Indexing API, שסיים לאחרונה את תקופת הניסיון המקורית, תוכלו להוסיף כתובות URL ומטא-נתונים של תוכן שזמין אופליין. לאחר מכן, התוכן מוצג למשתמש על סמך המטא-נתונים האלה, וכך קל יותר למצוא אותו.

כדי להוסיף תוכן לאינדקס, צריך לבצע קריאה ל-index.add() ברישום של ה-service worker ולספק את המטא-נתונים הנדרשים לגבי התוכן.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

רוצים לראות מה כבר נכלל באינדקס? מתקשרים למספר index.getAll() שמופיע ברישום של עובד השירות.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

פרטים מלאים זמינים במאמר הוספת דפים שתומכים במצב אופליין לאינדקס באמצעות Content Indexing API.

Wake lock API

הטמעת Wake lock באתר של Betty Crocker.

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

למעשה, באתר של Betty Crocker משתמשים באפשרות הזו היום, והם פרסמו מחקר מקרה ב-web.dev שבו מוצגת עלייה של 300% במדדים של כוונת הרכישה.

כדי לקבל מנעול התעוררות, קוראים ל-navigator.wakeLock.request(). הפונקציה מחזירה אובייקט WakeLockSentinel, שמשמש ל'שחרור' של מנעול ההתעוררות.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

כמובן, יש עוד קצת מעבר לזה, אז כדאי לקרוא את המאמר שמירה על מצב פעיל באמצעות Screen Wake Lock API. אבל לפחות המסך שלי לא יהיה מכוסה יותר בקמח!

גרסאות מקור לניסיון

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

זיהוי מצב סרק

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

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

במאמר זיהוי משתמשים לא פעילים באמצעות Idle Detection API מוסבר בהרחבה על ה-API ועל האופן שבו אפשר להתחיל להתנסות בו כבר היום.

Web Assembly SIMD

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

מידע נוסף על WebAssembly SIMD זמין במאמר אפליקציות מהירות ומקבילות באמצעות WebAssembly SIMD.

ועוד

גרסה 84 של Chrome היא גרסה גדולה, אבל יש עוד כמה עדכונים חשובים שרציתי לציין.

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפיי (Pete LePage) ועדיין צריך לגזור לי את השיער, אבל ברגע שגרסת Chrome 85 תושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!