الجديد في Chrome 102

Pete LePage

في ما يلي ما تحتاج إلى معرفته:

  • يمكن لتطبيقات الويب المُثبَّتة تسجيل نفسها كمعالجات ملفات، ما يسهِّل على المستخدمين فتح الملفات مباشرةً من القرص.
  • تسمح لك سمة inert بوضع علامة على أجزاء من DOM على أنّها غير نشطة.
  • تسهِّل واجهة برمجة التطبيقات Navigation API على تطبيقات الصفحة الواحدة معالجة التنقّل والتعديلات على عنوان URL.
  • وهناك الكثير من الميزات الأخرى.

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

File Handling API

تسمح واجهة برمجة التطبيقات File Handling API لتطبيقات الويب التقدّمية المثبَّتة بالتسجيل في نظام التشغيل كمعالجملف. بعد التسجيل، يمكن للمستخدم النقر على ملف لفتحه باستخدام تطبيق PWA المثبَّت. وهذا مثالي لتطبيقات الويب المتوافقة مع الأجهزة الجوّالة التي تتفاعل مع الملفات، مثل محرّري الصور وأدوات تطوير البرامج المتكاملة ومحرّري النصوص وما إلى ذلك.

لإضافة وظيفة معالجة الملفات إلى تطبيقك المتوافق مع الأجهزة الجوّالة، عليك تعديل بيان تطبيق الويب، وإضافة صفيف file_handlers يتضمّن تفاصيل عن أنواع الملفات التي يمكن لتطبيقك المتوافق مع الأجهزة الجوّالة معالجتها. عليك تحديد عنوان URL المطلوب فتحه وأنواع ملف MIME ورمز لنوع الملف ونوع الإطلاق. يحدِّد نوع الإطلاق ما إذا كان يجب فتح ملفات متعددة في ملف عملاء واحد أو في عملاء متعدّدين.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

بعد ذلك، للوصول إلى هذه الملفات عند تشغيل تطبيق الويب التقدّمي، عليك تحديد launchQueue consumer لعنصر launchQueue. يتم وضع عمليات الإطلاق في قائمة الانتظار إلى أن تتم معالجتها من قِبل المستهلك.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

اطّلِع على السماح لتطبيقات الويب المثبّتة بمعالجة الملفات للاطّلاع على جميع التفاصيل.

سمة inert

السمة inert هي سمة HTML شاملة تطلب من المتصفّح تجاهل أحداث إدخال المستخدم لعنصر معيّن، بما في ذلك أحداث التركيز والأحداث المرسَلة من التقنيات المساعِدة.

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

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

في هذه الحالة، تمّ الإعلان عن inert في عنصر <div> الثاني، لذا لا يمكن لأي محتوى مضمّن فيه، بما في ذلك <button> و<label>، تلقّي التركيز أو النقر عليه.

تتوفّر inert في الإصدار 102 من Chrome، وسيتم طرحها في Firefox وSafari.

اطّلِع على لمحة عن ميزة "العناصر غير القابلة للتفاعل" لمزيد من التفاصيل.

تعتمد العديد من تطبيقات الويب على إمكانية تعديل عنوان URL بدون تصفّح الصفحة. في الوقت الحالي، نستخدم History API، ولكنّه غير فعّال ويصعُب استخدامه، ويحدث أحيانًا أنّه لا يعمل على النحو المتوقّع. بدلاً من محاولة إصلاح المشاكل المتعلّقة بمنصّة History API، تُجري Navigation API عملية إصلاح شاملة لهذه المساحة.

لاستخدام Navigation API، أضِف مستمعًا navigate على العنصر navigation العمومي.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

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

اطّلِع على مقالة التوجيه الحديث من جهة العميل: Navigation API للحصول على التفاصيل الكاملة وعرض توضيحي يمكنك تجربته.

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

  • تهدف واجهة برمجة التطبيقات Sanitizer API الجديدة إلى إنشاء معالج قوي لسلاسل عشوائية لإدراجها بأمان في الصفحة.
  • تتيح سمة hidden=until-found للمتصفّح البحث عن نص في المناطق المخفية، وكشف هذا القسم في حال العثور على مطابقة.

مراجع إضافية

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

اشتراك

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة YouTube الخاصة بمطوّري Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

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