חדש ב-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" }
    ]
  },
]

לקבלת פרטים מלאים, קראו את המאמר ביצוע משימות במהירות באמצעות קיצורי דרך של אפליקציות.

ממשק API של אנימציות באינטרנט

בגרסה 84 של Chrome יש עוד המון תכונות שלא היו נתמכות בעבר ל-API של אנימציות באינטרנט.

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

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

API להוספת תוכן לאינדקס

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

באמצעות ה-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 Index API.

API לנעילת מצב שינה

הטמעה של נעילת מצב שינה באתר של 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,
});

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

SIMD להרכבת אינטרנט

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

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

ועוד

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

קריאה נוספת

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

להרשמה

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

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