جدید در کروم 89

کروم 89 در حال عرضه به حالت پایدار است.

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

من Pete LePage هستم، کار می‌کنم و از خانه عکس‌برداری می‌کنم، بیایید شیرجه بزنیم و ببینیم چه چیزی برای توسعه‌دهندگان در Chrome 89 جدید است!

WebHID، WebNFC، و سریال وب

من واقعاً در مورد WebHID، WebNFC و Web Serial هیجان زده هستم. آنها سناریوهای جدیدی را برای کاربران باز می کنند که قبلا هرگز امکان پذیر نبودند و در تعامل با سخت افزار دنیای واقعی بودند.

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

با استفاده از سریال وب و حدود 60 خط کد ، @AndreBan صفحه ای ایجاد کرد که می تواند با MicroPython REPL در Raspberry Pi Pico تعامل داشته باشد. Web Serial نیز توسط Espruino در IDE مبتنی بر وب خود استفاده می شود.

در CDS 2019، فرانسوا با استفاده از وب NFC یک بازی سرگرم کننده و به سبک حافظه نوشت. باید گوشی را به ترتیب درست روی کارت سمت راست ضربه بزنید.

StreamDeck با پد درام دافت پانک

و مورد علاقه من، @bramus از WebHID برای اتصال به StreamDeck، ساخت پد درام Daft Punk استفاده کرد. اگر StreamDeck ندارید، ویدیوی آزمایشی او را در YouTube و کد آن را در GitHub بررسی کنید.

چه سایت شما با سخت افزار شما تعامل داشته باشد، چه سخت افزار شما که می تواند با بسیاری از سایت ها تعامل داشته باشد، کاربران برنده می شوند زیرا نیازی به نصب درایورها یا نرم افزار خاصی ندارند.

می‌توانید در web.dev/devices درباره برخی از دستگاه‌هایی که می‌توانید به آن‌ها متصل شوید اطلاعات بیشتری کسب کنید، یا راهنمای شروع به کار WebHID ، WebNFC ، و Web Serial را بررسی کنید.

معیارهای نصب PWA تغییر می کند

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

در اواخر امسال، ما در نظر داریم که حفره‌ای را ببندیم که به چند سایت اجازه می‌دهد تا معیارهای نصب‌پذیری را بدون تجربه آفلاین پاس کنند. اگر PWA شما قبلاً یک تجربه آفلاین دارد، همه چیز آماده است. هیچ اقدامی لازم نیست، اما، اگر این کار را نکردید، وقت آن است که یکی را اضافه کنید!

از Chrome 89 شروع می‌شود، اگر PWA شما در حالت آفلاین پاسخ معتبری ارائه نمی‌دهد، در DevTools در برگه Issues هشداری می‌بینید و Lighthouse نشان می‌دهد که مشکلی وجود دارد. و اجرای آن در Chrome 93، اواخر امسال آغاز خواهد شد.

DevTools در حال نمایش پیام هشدار در کنسول.
پیام هشدار در کنسول Chrome DevTools.
DevTools پیام هشدار را در تب Application نشان می دهد.
پیام هشدار در تب Application > Manifest > Installability.

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

می‌توانید جزئیات بیشتری درباره تغییر و دلیل ایجاد آن در بهبود تشخیص پشتیبانی آفلاین برنامه وب پیشرفته بیابید.

اگر مطمئن نیستید از کجا شروع کنید، Workbox را بررسی کنید. مجموعه ای از کتابخانه ها دارد که می تواند یک سرویس دهنده آماده تولید را برای PWA شما تامین کند. یا برای یک صفحه بازگشتی آفلاین ساده، مقاله ایجاد یک صفحه بازگشتی آفلاین تمام کدهای مورد نیاز را دارد و می توانید مستقیماً در سایت خود کپی و جایگذاری کنید.

اشتراک وب و هدف اشتراک وب برای دسکتاپ

اگر سایت شما به کاربران اجازه ایجاد، ویرایش یا تعامل با فایل‌ها را می‌دهد، باید از Web Share و Web Share Target API استفاده کنید. این APIها مدتی است که در تلفن همراه در دسترس بوده اند اما اکنون در ChromeOS و Windows پشتیبانی می شوند.

اشتراک‌گذاری وب این امکان را برای کاربران فراهم می‌کند که فایل‌ها یا داده‌ها را به سایر برنامه‌های نصب‌شده روی دستگاه خود ارسال کنند، برای مثال، به اشتراک‌گذاری عکسی از Google Photos در توییتر.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

برای ثبت نام به عنوان یک هدف و برنامه های دیگر می توانند فایل ها یا داده ها را با شما به اشتراک بگذارند، باید از Web Share Target API استفاده کنید.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

برای راهنماهای شروع ، گزینه Integrate with OS sharing UI with Web Share API and Receiving data shared with Web Share Target API را علامت بزنید.

و بیشتر

و البته موارد بسیار بیشتری وجود دارد.

کروم اکنون اجازه می دهد تا سطح بالا در ماژول های جاوا اسکریپت await .

نماد نصب جدید omnibox برای PWA

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


و اگر از یک فعالیت وب معتمد برای در دسترس قرار دادن PWA خود در فروشگاه Play برای ChromeOS استفاده کرده‌اید، می‌توانید برای نسخه آزمایشی اولیه Digital Goods API ثبت نام کنید.

در ادامه مطلب

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

مشترک شوید

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

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

اعتبارات

عکس Raspberry Pis و Arduino توسط Harrison Broadbent در Unsplash است.