الجديد في Chrome 102

Pete LePage

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

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

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

File Handling API

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

لإضافة وظيفة معالجة الملفات إلى تطبيق الويب التقدّمي (PWA)، عليك تعديل بيان تطبيق الويب وإضافة مصفوفة file_handlers تتضمّن تفاصيل حول أنواع الملفات التي يمكن لتطبيق الويب التقدّمي (PWA) التعامل معها. عليك تحديد عنوان 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"
  }
]

وبعد ذلك، للوصول إلى هذه الملفات عند إطلاق تطبيق الويب التقدّمي (PWA)، عليك تحديد مستهلك للعنصر 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 للمتصفّح البحث عن نص في المناطق المخفية، وكشف هذا القسم في حال العثور على مطابقة.

مراجع إضافية

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

اشتراك

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

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