جدید در کروم 102

پیت لی پیج

در اینجا چیزی است که شما باید بدانید:

  • PWA های نصب شده می توانند به عنوان کنترل کننده فایل ثبت شوند و باز کردن فایل ها را مستقیماً از دیسک برای کاربران آسان می کند.
  • ویژگی inert به شما امکان می دهد بخش هایی از DOM را به عنوان بی اثر علامت گذاری کنید.
  • Navigation API مدیریت ناوبری و به‌روزرسانی URL را برای برنامه‌های تک صفحه آسان‌تر می‌کند
  • و چیزهای بیشتری وجود دارد.

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 102 وجود دارد.

API مدیریت فایل

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 جهانی است که به مرورگر می‌گوید رویدادهای ورودی کاربر را برای یک عنصر نادیده بگیرد، از جمله رویدادهای تمرکز، و رویدادهای فناوری‌های کمکی.

این می تواند هنگام ساخت UI مفید باشد. به عنوان مثال، با یک دیالوگ مودال، می خواهید فوکوس را در داخل مدال وقتی قابل مشاهده است، "به دام بیاندازید". یا، برای کشویی که همیشه برای کاربر قابل مشاهده نیست، افزودن 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 پشتیبانی می شود و هم برای فایرفاکس و هم برای سافاری می آید.

برای جزئیات بیشتر، Introducing inert را بررسی کنید.

بسیاری از برنامه های وب به توانایی به روز رسانی 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 Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من Pete LePage هستم و به محض اینکه Chrome 103 منتشر شود، اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!