جدید در کروم 68

پیت لی پیج

  • رفتار افزودن به صفحه اصلی در Android در حال تغییر است تا کنترل بیشتری به شما بدهد.
  • صفحه Lifecycle API به شما می گوید چه زمانی برگه شما به حالت تعلیق درآمده یا بازیابی شده است.
  • و Payment Handler API این امکان را برای برنامه های پرداخت مبتنی بر وب فراهم می کند تا از تجربه درخواست پرداخت پشتیبانی کنند.

و خیلی چیزهای دیگر وجود دارد!

من پیت لی پیج هستم. بیایید غوطه ور شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 68 وجود دارد!

لیست کامل تغییرات را می خواهید؟ فهرست تغییرات مخزن منبع Chromium را بررسی کنید.

اضافه کردن به تغییرات صفحه اصلی

اگر سایت شما معیارهای افزودن به صفحه اصلی را داشته باشد، Chrome دیگر بنر افزودن به صفحه اصلی را نشان نخواهد داد. درعوض، شما کنترل زمان و نحوه درخواست از کاربر را دارید.

برای درخواست از کاربر، به رویداد beforeinstallprompt گوش دهید، سپس رویداد را ذخیره کنید و یک دکمه یا عنصر رابط کاربری دیگر را به برنامه خود اضافه کنید تا نشان دهد که قابل نصب است.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

هنگامی که کاربر روی دکمه install کلیک می کند، call prompt() در رویداد ذخیره شده beforeinstallprompt ، سپس کروم گفتگوی افزودن به صفحه اصلی را نشان می دهد.


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

برای اینکه به شما زمان بدهد تا سایت خود را به‌روزرسانی کنید، Chrome یک نوار اطلاعات کوچک را در اولین باری که کاربر از سایتی بازدید می‌کند که معیارهای افزودن به صفحه اصلی را دارد، نشان می‌دهد. پس از حذف، مینی اینفوبار برای مدتی دیگر نمایش داده نمی شود.

تغییرات در افزودن به رفتار صفحه اصلی دارای جزئیات کامل است، از جمله نمونه کدهایی که می توانید استفاده کنید و موارد دیگر.

Page Lifecycle API

هنگامی که یک کاربر تعداد زیادی برگه در حال اجرا دارد، منابع حیاتی مانند حافظه، CPU، باتری و شبکه ممکن است بیش از حد اشتراک داشته باشند که منجر به تجربه کاربری بدی می شود.

اگر سایت شما در پس‌زمینه اجرا می‌شود، سیستم ممکن است برای حفظ منابع آن را به حالت تعلیق درآورد. با API جدید Page Lifecycle، اکنون می توانید به این رویدادها گوش دهید و به آنها پاسخ دهید.

به عنوان مثال، اگر یک کاربر برای مدتی یک برگه در پس‌زمینه داشته باشد، مرورگر ممکن است برای حفظ منابع، اجرای اسکریپت را در آن صفحه به حالت تعلیق درآورد. قبل از انجام این کار، رویداد freeze را فعال می‌کند و به شما این امکان را می‌دهد که IndexedDB باز یا اتصالات شبکه را ببندید یا هر حالت نمایش ذخیره‌نشده را ذخیره کنید. سپس، هنگامی که کاربر برگه را مجدداً فوکوس می‌کند، رویداد resume فعال می‌شود، جایی که می‌توانید هر چیزی را که پاره شده است، مجدداً راه‌اندازی کنید.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

پست Phil's Page Lifecycle API را برای جزئیات بیشتر ، از جمله نمونه کد، نکات و موارد دیگر بررسی کنید. شما می توانید مشخصات و یک سند توضیح دهنده را در GitHub پیدا کنید.

Payment Handler API

API درخواست پرداخت یک روش باز و مبتنی بر استانداردها برای پذیرش پرداخت است. Payment Handler API با فعال کردن برنامه‌های پرداخت مبتنی بر وب برای تسهیل پرداخت‌ها به طور مستقیم در تجربه درخواست پرداخت، دامنه درخواست پرداخت را افزایش می‌دهد.

به عنوان یک فروشنده، افزودن یک برنامه پرداخت مبتنی بر وب موجود به آسانی افزودن ورودی به ویژگی supportedMethods است.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

اگر یک سرویس‌کار که می‌تواند روش پرداخت مشخص‌شده را انجام دهد، نصب شده باشد، در واسط درخواست پرداخت نشان داده می‌شود و کاربر می‌تواند با آن پرداخت کند.

Eiji یک پست عالی دارد که نشان می دهد چگونه می توان این را برای سایت های تجاری و برای کنترل کننده های پرداخت پیاده سازی کرد.

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 68 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

جدید در DevTools

حتماً New in Chrome DevTools را بررسی کنید تا بدانید چه چیزهای جدیدی برای DevTools در Chrome 68 وجود دارد.

اشتراک در

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

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