جدید در کروم 84

پیت لی پیج

کروم 84 اکنون شروع به عرضه به حالت پایدار کرده است.

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

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

میانبرهای نماد برنامه

میانبرهای نماد برنامه برای PWA توییتر

میانبرهای نماد برنامه، شروع سریع کارهای رایج در برنامه شما را برای کاربران آسان می کند. به عنوان مثال، یک توییت جدید بنویسید، یک پیام ارسال کنید، یا اعلان‌های آن‌ها را ببینید. آنها در Chrome for 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 انیمیشن های وب

Chrome 84 تعدادی از ویژگی‌های پشتیبانی نشده قبلی را به Web Animations API اضافه می‌کند.

  • animation.ready و animation.finished قول داده شده است.
  • این مرورگر اکنون می‌تواند انیمیشن‌های قدیمی را پاکسازی و حذف کند، حافظه را ذخیره کرده و عملکرد را بهبود بخشد.
  • و اکنون می توانید انیمیشن ها را با استفاده از حالت های ترکیبی - با گزینه های add و accumulate ترکیب کنید.

من به سادگی نمی‌توانم تمام پیشرفت‌ها را رعایت کنم یا مثال‌های خوبی را در اینجا ارائه کنم، بنابراین برای جزئیات کامل، بهبودهای Web Animations API در Chromium 84 را بررسی کنید.

API نمایه سازی محتوا

اگر محتوای شما بدون اتصال به شبکه در دسترس است. اما کاربر از آن اطلاعی ندارد؟ آیا واقعا موجود است؟ یک مشکل کشف وجود دارد!

با استفاده از Content Indexing API، که به تازگی از نسخه آزمایشی اصلی فارغ‌التحصیل شده است، می‌توانید نشانی‌های وب و ابرداده‌ها را برای محتوایی که به‌صورت آفلاین در دسترس است اضافه کنید. با استفاده از آن ابرداده، محتوا برای کاربر نمایش داده می شود و قابلیت کشف را بهبود می بخشد.

برای افزودن محتوا به ایندکس، با index.add() در ثبت نام کارگر سرویس تماس بگیرید و ابرداده مورد نیاز را در مورد محتوا ارائه دهید. 


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() را در ثبت نام Service Worker فراخوانی کنید.

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.

من دوست دارم آشپزی کنم، اما وقتی دستور غذا را دنبال می‌کنم، آن را بسیار خسته‌کننده می‌بینم، و محافظ صفحه شروع به کار می‌کند! با استفاده از wake lock API، که همچنین از نسخه آزمایشی اصلی خود در Chrome 84 فارغ‌التحصیل شده است، سایت‌ها می‌توانند برای جلوگیری از کم‌نور شدن و قفل شدن صفحه، درخواست wake lock کنند.

در واقع، وب‌سایت Betty Crocker امروز از این مورد استفاده می‌کند و مطالعه موردی را در web.dev منتشر کرد که نشان‌دهنده افزایش 300 درصدی شاخص‌های قصد خرید است.

برای دریافت wake lock، navigator.wakeLock.request() را فراخوانی کنید، یک شی WakeLockSentinel را برمی گرداند که برای "آزاد کردن" wake lock استفاده می شود. 


// 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 و اینکه چگونه می‌توانید امروز با آن آزمایش کنید، به شناسایی کاربران غیرفعال با Idle Detection API مراجعه کنید.

وب اسمبلی SIMD

و Web Assembly SIMD یک آزمایش اولیه را شروع می کند. عملیات‌هایی را معرفی می‌کند که به دستورالعمل‌های رایج SIMD در سخت‌افزار نگاشت می‌شوند. عملیات SIMD برای بهبود عملکرد، به ویژه در برنامه های چند رسانه ای استفاده می شود.

برای کسب اطلاعات بیشتر در مورد WebAssembly SIMD، برنامه های سریع و موازی با WebAssembly SIMD را بررسی کنید.

و بیشتر

Chrome 84 بزرگ است، اما چند به روز رسانی مهم دیگر وجود دارد که می خواهم به آن اشاره کنم.

در ادامه مطلب

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

مشترک شوید

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

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