الجديد في Chrome 68

بيت ليبيج

وهناك الكثير غيرها.

اسمي بيت ليب. لنتعمق في الأمر ونتعرّف على الميزات الجديدة للمطوّرين في الإصدار 68 من Chrome.

هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ راجِع قائمة تغييرات مستودع مصدر 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;
});

عندما ينقر المستخدم على زر التثبيت، يتّصل بـ prompt() في حدث beforeinstallprompt المحفوظ، سيعرض Chrome بعد ذلك مربّع حوار الإضافة إلى الشاشة الرئيسية.


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 شريط معلومات مصغّرًا في المرة الأولى التي يزور فيها المستخدم موقعًا إلكترونيًا يستوفي معايير الإضافة إلى الشاشة الرئيسية. بعد إغلاق الصفحة، لن يتم عرض شريط المعلومات المصغّر مرة أخرى لفترة من الوقت.

يمكنك الاطّلاع على التفاصيل الكاملة في مقالة التغييرات على سلوك الإضافة إلى الشاشة الرئيسية، بما في ذلك نماذج الرموز البرمجية التي يمكنك استخدامها وغير ذلك.

واجهة برمجة تطبيقات مراحل نشاط الصفحة

عندما يكون لدى المستخدم عدد كبير من علامات التبويب قيد التشغيل، قد يزيد الاشتراك في الموارد المهمة مثل الذاكرة ووحدة المعالجة المركزية (CPU) والبطارية والشبكة، ما يؤدي إلى ترك انطباع سيئ لدى المستخدم.

إذا كان موقعك الإلكتروني يعمل في الخلفية، قد يعلِّقه النظام للحفاظ على الموارد. باستخدام واجهة برمجة التطبيقات الجديدة لدورة حياة الصفحة، يمكنك الآن الاطّلاع على هذه الأحداث والاستجابة لها.

على سبيل المثال، إذا كان لدى المستخدم علامة تبويب في الخلفية لفترة من الوقت، قد يختار المتصفح تعليق تنفيذ النص البرمجي على هذه الصفحة للحفاظ على الموارد. وقبل إجراء ذلك، سيتم تنشيط حدث freeze، ما يسمح لك بإغلاق اتصالات قاعدة البيانات المفهرسة أو الشبكة المفتوحة أو حفظ أي حالة عرض غير محفوظة. بعد ذلك، عندما يعيد المستخدم تركيز علامة التبويب، يتم تنشيط حدث 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);

يمكنك الاطّلاع على مشاركة Page Lifecycle API من "فيل" للحصول على الكثير من التفاصيل، بما في ذلك نماذج الرموز والنصائح وغير ذلك. يمكنك العثور على spec ومستند توضيحي على GitHub.

واجهة برمجة تطبيقات معالج الدفع

Payment Request 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 من Chrome للمطوّرين بالطبع، وهناك المزيد من التغييرات الأخرى.

الميزات الجديدة في "أدوات مطوري البرامج"

احرص على الاطّلاع على الجديد في "أدوات مطوري البرامج في Chrome"، لمعرفة الميزات الجديدة في "أدوات مطوري البرامج" في الإصدار 68 من Chrome.

اشتراك

بعد ذلك، انقر على الزر اشتراك في قناتنا على YouTube وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

اسمي بيت ليب، وبعد طرح الإصدار 69 من Chrome، سأكون على استعداد هنا لإخبارك بالجديد في Chrome!