Chrome 93 में नया

Pete LePage

यहां कुछ ज़रूरी जानकारी दी गई है:

  • अब सीएसएस स्टाइल शीट को import स्टेटमेंट के साथ लोड किया जा सकता है. यह JavaScript मॉड्यूल की तरह ही काम करता है.
  • इंस्टॉल किए गए PWA, यूआरएल हैंडलर के तौर पर रजिस्टर किए जा सकते हैं. इससे उपयोगकर्ता सीधे आपके PWA पर जा सकते हैं.
  • आपके सुझाव, शिकायत या राय के आधार पर, Multi-Screen Window Placement API को अपडेट कर दिया गया है. साथ ही, दूसरा ऑरिजिन ट्रायल शुरू हो गया है.
  • पीडब्ल्यूए समिट 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 कैलेंडर पर, हर वर्शन के रिलीज़ होने की तारीखें देखी जा सकती हैं.

पीडब्ल्यूए की नई सुविधाएं

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

पीडब्ल्यूए के लिए यूआरएल हैंडलर

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

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

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/*"]
      }
    }
  ]
}

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

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

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

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

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

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

PWA Summit

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

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

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

बेशक, इसमें और भी बहुत कुछ है.

  • फ़्लेक्सबॉक्स और फ़्लेक्सबॉक्स आइटम में, अलाइनमेंट के लिए इन कीवर्ड का इस्तेमाल किया जा सकता है: 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 Developers के YouTube चैनल की सदस्यता लें. इससे आपको नया वीडियो लॉन्च होने पर, ईमेल से सूचना मिलेगी.

मैं पीट लेपेज हूं. Chrome 94 के रिलीज़ होते ही, मैं आपको Chrome में मौजूद नई सुविधाओं के बारे में बताऊंगा!