الجديد في 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، سأكون في انتظارك لإخبارك بالجديد في Chrome!