الجديد في Chrome 68

Pete LePage

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

اسمي بيت ليبيه. لنطّلع على الميزات الجديدة للمطوّرين في 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;
});

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

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

Page Lifecycle API

عندما يشغّل المستخدم عددًا كبيرًا من علامات التبويب، يمكن أن يتم الاشتراك بشكل مفرط في الموارد المهمة، مثل الذاكرة ووحدة المعالجة المركزية والبطارية والشبكة، ما يؤدي إلى تعطيل تجربة المستخدم.

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

على سبيل المثال، إذا كان المستخدم قد فتح علامة تبويب في الخلفية لفترة من الوقت، قد يختار المتصفّح تعليق تنفيذ النص البرمجي على تلك الصفحة للحفاظ على الموارد. قبل إجراء ذلك، سيتم تشغيل الحدث 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 التي تتناول Page Lifecycle API للحصول على الكثير من التفاصيل، بما في ذلك عيّنات الرموز البرمجية والنصائح وغير ذلك. يمكنك العثور على المواصفات ومستند الشرح على 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' }
  }
});

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

نشر "إيجى" مقالة رائعة توضّح كيفية تنفيذ ذلك في مواقع التجّار الإلكترونية ومعالِجات الدفع.

وغير ذلك

هذه ليست سوى بعض التغييرات في الإصدار 68 من Chrome للمطوّرين، وبالطبع، هناك العديد من التغييرات الأخرى.

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

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

اشتراك

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

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