Chrome 93 में नया

Pete LePage

यहां आपके जानने योग्य तथ्य दिए गए हैं:

  • अब JavaScript मॉड्यूल की तरह ही, import स्टेटमेंट की मदद से सीएसएस स्टाइल शीट लोड की जा सकती हैं.
  • इंस्टॉल किए गए PWA, यूआरएल हैंडलर के तौर पर रजिस्टर हो सकते हैं. इससे उपयोगकर्ता सीधे आपके PWA पर जा सकते हैं.
  • आपके सुझाव/राय/शिकायत के आधार पर, मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई को अपडेट कर दिया गया है. साथ ही, ऑरिजिन के लिए दूसरा ट्रायल शुरू किया गया है.
  • PWA समिट 6 से 7 अक्टूबर को होने वाला है.
  • इसके अलावा, और भी बहुत कुछ है.

नमस्ते, पीट लेपेज बोल रहा हूं. मैं घर से काम और वीडियो रिकॉर्ड कर रहा हूं. आइए, Chrome 93 में डेवलपर के लिए क्या नया है, इस बारे में जानते हैं.

सीएसएस मॉड्यूल स्क्रिप्ट

अब JavaScript मॉड्यूल की तरह ही, import स्टेटमेंट की मदद से सीएसएस स्टाइल शीट लोड की जा सकती हैं. इसके बाद, स्टाइल शीट को दस्तावेज़ या स्‍हेड रूट पर उसी तरह से लागू किया जा सकता है जिस तरह से कॉन्स्ट्रक्ट की जा सकने वाली स्टाइलशीट को लागू किया जाता है.

सीएसएस मॉड्यूल स्क्रिप्ट की नई सुविधा, कस्टम एलिमेंट के लिए बहुत अच्छी है. साथ ही, JavaScript से सीएसएस लागू करने के अन्य तरीकों के मुकाबले, इसमें एलिमेंट बनाने या सीएसएस टेक्स्ट की JavaScript स्ट्रिंग में बदलाव करने की ज़रूरत नहीं होती.

इसका इस्तेमाल करने के लिए, assert {type: 'css'} की मदद से स्टाइल शीट इंपोर्ट करें. इसके बाद, adoptedStyleSheets का इस्तेमाल करके, इसे document या shadowRoot पर लागू करें.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

हालांकि, ध्यान रखें कि अगर assert को हटाया जाता है, तो फ़ाइल को JavaScript के तौर पर माना जाएगा और वह काम नहीं करेगी!

पूरी जानकारी के लिए, web.dev पर शैलीशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट का इस्तेमाल करना लेख पढ़ें.

Multi-Screen Window Placement API

कुछ ऐप्लिकेशन के लिए, नई विंडो खोलना और उन्हें किसी खास जगह या डिसप्ले पर दिखाना एक अहम सुविधा है. उदाहरण के लिए, Slides का इस्तेमाल करके प्रज़ेंटेशन करते समय, मुझे प्राइमरी डिसप्ले पर स्लाइड फ़ुल स्क्रीन में दिखें और दूसरे डिसप्ले पर मेरे स्पीकर नोट दिखें.

मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई की मदद से, उपयोगकर्ता की मशीन से कनेक्ट डिसप्ले की गिनती की जा सकती है. साथ ही, विंडो को खास स्क्रीन पर प्लेस किया जा सकता है. यह इस सुविधा का दूसरा ऑरिजिन ट्रायल है. आपके सुझावों के आधार पर, हमने इसमें कई बदलाव किए हैं.

यह तुरंत देखा जा सकता है कि डिवाइस से एक से ज़्यादा स्क्रीन कनेक्ट हैं या नहीं:

const isExtended = window.screen.isExtended;
// returns true/false

हालांकि, मुख्य फ़ंक्शन window.getScreens() में होता है, जो अटैच किए गए डिसप्ले के बारे में पूरी जानकारी देता है.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

उदाहरण के लिए, प्राइमरी स्क्रीन तय की जा सकती है. इसके बाद, उस स्क्रीन पर कोई एलिमेंट दिखाने के लिए requestFullscreen() का इस्तेमाल किया जा सकता है.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

साथ ही, यह बदलावों को सुनने का एक तरीका भी उपलब्ध कराता है. उदाहरण के लिए, अगर कोई नया डिसप्ले प्लग इन किया गया है या हटाया गया है.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

ज़्यादा जानकारी के लिए, web.dev पर टॉम का लेख मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना पढ़ें.

रिलीज़ साइकल कम होना

मार्च में, हमने रिलीज़ साइकल को छोटा करने और हर चार हफ़्ते में Chrome का नया वर्शन रिलीज़ करने के अपने प्लान का एलान किया था.

वह समय आ गया है और हम 21 सितंबर को Chrome 94 को रिलीज़ करेंगे. Chrome कैलेंडर पर, हर वर्शन के रिलीज़ होने की योजना की तारीखें देखी जा सकती हैं.

PWA की नई सुविधाएं

अगर आपको प्रोग्रेसिव वेब ऐप्लिकेशन बनाना है, तो ऑरिजिन के लिए दो नए ट्रायल आज़माएं.

PWA के लिए यूआरएल हैंडलर

अगर आपने कोई PWA इंस्टॉल किया है और आपने उस PWA के लिंक पर क्लिक किया है, तो हो सकता है कि आप उसे ब्राउज़र टैब में न, बल्कि PWA में खोलना चाहें.

अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में url_handlers की जानकारी देकर और अपनी .well-known/ डायरेक्ट्री में web-app-origin-association फ़ाइल जोड़कर, ब्राउज़र को यह बताया जा सकता है कि अगर कोई उपयोगकर्ता आपके PWA के लिंक पर क्लिक करता है, तो वह इंस्टॉल किए गए PWA में खुलना चाहिए.

manifest.json फ़ाइल में url_handlers का उदाहरण:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association फ़ाइल का उदाहरण:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

थोड़ी और पुष्टि करने के बाद, अपने PWA को अपने मालिकाना हक वाले अन्य ऑरिजिन से लिंक मैनेज करने की अनुमति भी दी जा सकती है.

ऑरिजिन ट्रायल के बारे में पूरी जानकारी, web.dev पर यूआरएल हैंडलर के तौर पर PWA में दी गई है.

विंडो कंट्रोल ओवरले

विंडो कंट्रोल ओवरले, क्लाइंट एरिया को पूरी विंडो को कवर करने के लिए बड़ा करता है. इसमें टाइटल बार और विंडो कंट्रोल बटन शामिल हैं, जैसे कि बंद करें, ज़्यादा करें, और छोटा करें बटन.

इस सुविधा का इस्तेमाल करके, इंस्टॉल किए गए PWA को अन्य इंस्टॉल किए गए ऐप्लिकेशन की तरह दिखाया जा सकता है.

ऑरिजिन ट्रायल के बारे में ज़्यादा जानने के लिए, अपने PWA के टाइटल बार के विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं लेख पढ़ें.

PWA समिट

PWA समिट अक्टूबर में होने वाला है. यह एक मुफ़्त ऑनलाइन कॉन्फ़्रेंस है. इसका मकसद, प्रोग्रेसिव वेब ऐप्लिकेशन से सभी को सफल बनाने में मदद करना है. PWA Summit, PWA टेक्नोलॉजी बनाने वाली कुछ कंपनियों के लोगों के बीच सहयोग का एक प्लैटफ़ॉर्म है. इनमें Google, Intel, Microsoft, और Samsung शामिल हैं.

यहां बहुत सारी शानदार बातचीत और कॉन्टेंट मौजूद है. ज़्यादा जानने और रजिस्टर करने के लिए, PWASummit.org पर जाएं.

और भी कई सुविधाएं!

इसके अलावा, और भी बहुत कुछ है.

  • Flexbox और Flexbox आइटम में, अलाइनमेंट कीवर्ड के लिए सहायता जोड़ी गई है: start, end, self-start, self-end, left, और right.
  • अब असाइन किए बिना काम करने वाला क्लिपबोर्ड एपीआई, SVG फ़ाइलों के साथ काम करता है.
  • साथ ही, meta theme-color सेट करते समय media एट्रिब्यूट का इस्तेमाल किया जाएगा, ताकि हल्के और गहरे रंग वाले मोड के लिए, अलग-अलग थीम कलर तय किए जा सकें.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 93 में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

मेरा नाम पीट लेपेज है. Chrome 94 रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!