جدید در کروم 80

پیت لی پیج

Chrome 80 اکنون در حال عرضه است، و تعداد زیادی چیز جدید برای توسعه دهندگان در آن وجود دارد!

پشتیبانی وجود دارد برای:

من Pete LePage هستم، بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 80 وجود دارد!

کارگران ماژول

Module Workers، یک حالت جدید برای کارگران وب - با ارگونومی، و مزایای عملکرد ماژول های جاوا اسکریپت اکنون در دسترس است. سازنده Worker یک گزینه جدید {type: "module"} را می پذیرد، که نحوه بارگذاری و اجرای اسکریپت ها را تغییر می دهد تا با <script type="module"> مطابقت داشته باشد.

const worker = new Worker('worker.js', {
  type: 'module'
});

حرکت به ماژول‌های جاوا اسکریپت، استفاده از واردات پویا را برای کد بارگذاری تنبل، بدون مسدود کردن اجرای کارگر، امکان‌پذیر می‌سازد. برای جزئیات بیشتر ، پست Jason را بررسی کنید.

زنجیربندی اختیاری

تلاش برای خواندن ویژگی‌های عمیق تو در تو در یک شی می‌تواند مستعد خطا باشد، به‌ویژه اگر این احتمال وجود داشته باشد که چیزی ارزیابی نشود.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

بررسی هر مقدار قبل از ادامه به راحتی به یک دستور if عمیق تودرتو تبدیل می‌شود یا به بلوک try / catch نیاز دارد.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 پشتیبانی از ویژگی جدید جاوا اسکریپت به نام زنجیره اختیاری را اضافه می کند. با زنجیره‌سازی اختیاری، اگر یکی از ویژگی‌ها به جای ارسال خطا، یک عدد تهی یا تعریف نشده برگرداند، کل چیز به سادگی تعریف نشده برمی‌گردد.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

برای همه جزئیات، پست وبلاگ اختیاری Chaining را در وبلاگ v8 بررسی کنید!

فارغ التحصیلان آزمایشی مبدا

سه قابلیت جدید وجود دارد که از Origin Trial به پایدار تبدیل شده‌اند و به آنها اجازه می‌دهد تا توسط هر سایتی بدون رمز استفاده شوند.

همگام سازی دوره ای پس زمینه

اول از همه، همگام‌سازی دوره‌ای پس‌زمینه است، به‌طور دوره‌ای داده‌ها را در پس‌زمینه همگام‌سازی می‌کند، به طوری که وقتی کاربر PWA نصب شده شما را باز می‌کند، همیشه تازه‌ترین داده‌ها را داشته باشد.

با انتخابگر تماس بگیرید

در مرحله بعد، Contact Picker API است، یک API درخواستی که به کاربران امکان می دهد ورودی ها را از لیست مخاطبین خود انتخاب کنند و جزئیات محدود ورودی های انتخاب شده را با یک وب سایت به اشتراک بگذارند.

این به کاربران اجازه می‌دهد فقط آنچه را که می‌خواهند به اشتراک بگذارند، و دسترسی کاربران و ارتباط با دوستان و خانواده‌شان را آسان‌تر می‌کند.

و در نهایت، روش Get Installed Related Apps به برنامه وب شما اجازه می دهد تا بررسی کند که آیا برنامه بومی شما بر روی دستگاه کاربر نصب شده است یا خیر.

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

آزمایشات منشاء جدید

API نمایه سازی محتوا

چگونه کاربران را در مورد محتوایی که در حافظه پنهان در PWA خود ذخیره کرده اید مطلع می کنید؟ اینجا یک مشکل کشف وجود دارد. آیا آنها می دانند که برنامه شما را باز کنند؟ یا چه محتوایی در دسترس است؟

Content Indexing API یک نسخه آزمایشی جدید است که به شما امکان می دهد URL ها و ابرداده های محتوای دارای قابلیت آفلاین را به یک فهرست محلی اضافه کنید که توسط مرورگر نگهداری می شود و به راحتی برای کاربر قابل مشاهده است.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

برای افزودن چیزی به ایندکس، باید ثبت نام کارگر سرویس را دریافت کنم، سپس با index.add تماس بگیرم و متادیتا درباره محتوا ارائه کنم.

پس از پر شدن فهرست، در قسمت اختصاصی Chrome for Android صفحه دانلودها نشان داده می شود. برای جزئیات کامل، پست جف را بررسی کنید که صفحات دارای قابلیت آفلاین خود را با Content Indexing API در web.dev نمایه می کند .

محرک های اعلان

اعلان ها بخش مهمی از بسیاری از برنامه ها هستند. اما، اعلان‌های فشاری فقط به اندازه شبکه‌ای که به آن متصل هستید قابل اعتماد هستند. در حالی که در بیشتر موارد کار می کند، گاهی اوقات می شکند. به عنوان مثال، اگر یادآوری تقویم، به دلیل اینکه در حالت هواپیما هستید، به شما اطلاع نمی‌دهد، ممکن است رویداد را از دست بدهید.

فعال‌کننده‌های اعلان به شما امکان می‌دهند اعلان‌ها را از قبل برنامه‌ریزی کنید تا سیستم عامل اعلان را در زمان مناسب ارائه دهد - حتی اگر اتصال شبکه وجود نداشته باشد یا دستگاه در حالت صرفه‌جویی باتری باشد.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

برای برنامه‌ریزی اعلان، با showNotification در ثبت نام کارگر خدمات تماس بگیرید. در گزینه‌های اعلان، یک ویژگی showTrigger با TimestampTrigger اضافه کنید. سپس، هنگامی که زمان فرا می رسد، مرورگر اعلان را نشان می دهد.

آزمایش اولیه قرار است از طریق کروم 83 اجرا شود، بنابراین برای جزئیات کامل، پست Tom's Notification Triggers را در web.dev بررسی کنید.

سایر آزمایشات منشا

چند آزمایش اصلی دیگر در Chrome 80 شروع می شود:

  • سریال وب
  • توانایی PWA ها برای ثبت به عنوان کنترل کننده فایل
  • ویژگی های جدید برای انتخابگر مخاطب

بررسی کنید برای یک لیست کامل از ویژگی های در آزمایش اولیه.

و بیشتر

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

  • اکنون می توانید با استفاده از #:~:text=something ، مستقیماً به قطعات متن در یک صفحه پیوند دهید. Chrome به اولین نمونه از آن قطعه متن پیمایش می کند و آن را برجسته می کند. به عنوان مثال https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • تنظیم display: minimal-ui در یک PWA دسکتاپ دکمه بازگشت و بارگذاری مجدد را به نوار عنوان PWA نصب شده اضافه می کند.
  • و کروم اکنون از استفاده از تصاویر SVG به عنوان فاویکون پشتیبانی می کند.

در ادامه مطلب

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

مشترک شوید

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

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