الجديد في Chrome 102

Pete LePage

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

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

اسمي بيت ليب. لنتعمق أكثر ونتعرّف على الميزات الجديدة للمطوّرين في Chrome 102.

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 مع Chrome 102، وسيتوفّر على كلّ من Firefox وSafari.

اطّلِع على مقالة مقدمة حول inert لمزيد من التفاصيل.

تعتمد العديد من تطبيقات الويب على إمكانية تعديل عنوان URL بدون التنقّل في الصفحة. نستخدم حاليًا History API، ولكنّها قديمة ولا تعمل دائمًا كما هو متوقع. بدلاً من محاولة تصحيح الحواف البسيطة لـ History 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;
  }
});

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

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

ومقاييس أخرى

بالطبع هناك المزيد.

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

محتوى إضافي للقراءة

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

اشتراك

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

اسمي بيت ليب، وبعد إطلاق Chrome 103، سأكون هنا لإخبارك بالجديد في Chrome!