جدید در کروم 96

پیت لی پیج

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

من Pete LePage هستم، بالاخره در استودیو فیلمبرداری می‌کنم، بیایید به داخل آن شیرجه بزنیم و ببینیم چه چیز جدیدی برای توسعه‌دهندگان در Chrome 96 وجود دارد.

id مانیفست برای PWA ها

هنگامی که کاربر یک PWA را نصب می کند، مرورگر به راهی برای شناسایی منحصر به فرد آن نیاز دارد. اما، تا همین اواخر، مشخصات مانیفست برنامه وب نحوه شناسایی PWA را مشخص نمی‌کرد و مرورگرها را به تصمیم‌گیری می‌سپرد و منجر به پیاده‌سازی‌های مختلف می‌شد. در برخی از مرورگرها از start_url استفاده می شود در حالی که در برخی دیگر از مسیر فایل مانیفست استفاده می شود.

این امر تغییر هر یک از این زمینه ها را بدون شکستن تجربه نصب غیرممکن می کند. اکنون، یک ویژگی id اختیاری جدید وجود دارد که به شما امکان می‌دهد به صراحت شناسه مورد استفاده برای PWA خود را تعریف کنید.

افزودن ویژگی id به مانیفست وابستگی به start_url یا مکان مانیفست را حذف می کند و امکان به روز رسانی آن فیلدها را فراهم می کند.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

پشتیبانی از ویژگی id در مرورگرهای مبتنی بر Chromium دسک‌تاپ که از Chrome 96 شروع می‌شود. پشتیبانی از تلفن همراه که در حال حاضر از نشانی اینترنتی مانیفست به عنوان شناسه منحصربه‌فرد استفاده می‌کند، باید در نیمه اول سال 2022 ارائه شود.

DevTools که شناسه برنامه محاسبه شده را نشان می دهد

اگر قبلاً یک PWA در حال تولید دارید و می‌خواهید یک id به مانیفست خود اضافه کنید، باید از شناسه‌ای که توسط مرورگر اختصاص داده شده است استفاده کنید. id را می‌توانید در قسمت Manifest پنل Application در Dev Tools پیدا کنید.

برای یک PWA کاملاً جدید، می‌توانید id را روی هر مقدار رشته‌ای که دوست دارید تنظیم کنید، اما به یاد داشته باشید که در آینده نمی‌توانید آن را تغییر دهید، بنابراین عاقلانه انتخاب کنید.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

برای اطلاعات بیشتر ، شناسایی منحصر به فرد PWA ها را با ویژگی شناسه مانیفست برنامه وب بررسی کنید.

کنترل کننده های پروتکل URL برای PWA ها

برنامه های وب می توانند از navigator.registerProtocolHandler() برای ثبت به عنوان یک کنترل کننده پروتکل استفاده کنند. به عنوان مثال، Gmail می تواند پروتکل mailto را ثبت کند. سپس وقتی کاربر روی پیوندی با پیشوند mailto: کلیک می کند، Gmail باز می شود و ارسال ایمیل را برای کاربر آسان می کند.

با شروع کروم 96، یک PWA می تواند به عنوان یک کنترل کننده پروتکل به عنوان بخشی از نصب خود ثبت شود. برای انجام این کار برای PWA خود، یک ویژگی protocol_handlers را به مانیفست برنامه وب خود اضافه کنید، protocol را که می خواهید مدیریت کنید، و url که باید با کلیک کردن باز شود را مشخص کنید.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

در اینجا محدودیت‌هایی وجود دارد، و شما نمی‌توانید هر پروتکلی را ثبت کنید، بنابراین برای جزئیات کامل، و اینکه چگونه می‌توانید از دستور web+ برای ایجاد پروتکل‌های خود استفاده کنید ، ثبت نام کنترل کننده پروتکل URL برای PWA را بررسی کنید!

نکات اولویت (نسخه آزمایشی)

هنگامی که یک مرورگر یک صفحه وب را تجزیه می کند و شروع به کشف و دانلود منابعی مانند تصاویر، اسکریپت ها یا CSS می کند، برای تلاش برای بهینه سازی بارگذاری صفحه، اولویت واکشی به آنها اختصاص می دهد. مرورگرها در تعیین اولویت ها بسیار خوب هستند، اما ممکن است در همه موارد بهینه نباشند.

نکات اولویت یک ویژگی آزمایشی است که به‌عنوان نسخه آزمایشی اولیه در Chrome 96 در دسترس است و می‌تواند به بهینه‌سازی Core Web Vitals کمک کند. ویژگی importance به شما امکان می دهد اولویت را برای انواع منابع مانند CSS، فونت ها، اسکریپت ها، تصاویر و iframes مشخص کنید.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

برای مثال، اینجا صفحه Google Flights است. آن تصویر پس‌زمینه بزرگترین رنگ پر محتوا (LCP) است.

اسکرین شات از Google Flights با تصویر پس زمینه بزرگ

بیایید آن را با بارگذاری و بدون نکات اولویت ببینیم. با تنظیم اولویت روی high در تصویر پس زمینه، LCP از 2.6 ثانیه به 1.9 ثانیه کاهش می یابد.

بهینه سازی بارگیری منبع با Fetch Priority API را برای همه جزئیات، نحوه ثبت نام برای نسخه آزمایشی اصلی، و چند نمونه عالی از این که چگونه می تواند به بهبود عملکرد رندر شما کمک کند، بررسی کنید.

کروم 100 را در رشته UA شبیه سازی کنید

در اوایل سال آینده، کروم 100، یک شماره نسخه سه رقمی را عرضه خواهیم کرد. هر کدی که شماره نسخه ها را بررسی می کند، یا رشته UA را تجزیه می کند، باید بررسی شود تا مطمئن شوید که سه رقم را کنترل می کند.

از Chrome 96، یک پرچم جدید #force-major-version-to-100 وجود دارد که شماره نسخه فعلی را به 100 تغییر می‌دهد، بنابراین می‌توانید مطمئن شوید که همه چیز همانطور که انتظار می‌رود کار می‌کند.

صفحه پرچم‌های Chrome که گزینه جدید #force-major-version-to-100 را برجسته می‌کند

برای جزئیات ، به اجبار نسخه اصلی Chrome به 100 در رشته User-Agent مراجعه کنید.

Chrome Dev Summit

Chrome Dev Summit یک مجموعه است. همه ویدیوها و مطالب به صورت آنلاین در دسترس هستند. سایت Chrome Dev Summit را بررسی کنید، یا اگر سخنرانی اصلی یا پخش زنده را از دست دادید، فهرست پخش CDS را در کانال YouTube Developers Chrome بررسی کنید.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

  • کش Back، Forward – یا bfcache – اکنون به صورت پایدار در دسترس است و کروم را با فایرفاکس و سافاری هماهنگ می کند.

در ادامه مطلب

این تنها برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در کروم 96 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من پیت لی پیج هستم و به محض اینکه کروم 97 منتشر شد، اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!