Chrome 84 में नया

Pete LePage

Chrome 84 अब ठीक से काम करने के लिए रोल आउट किया जा रहा है.

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

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

ऐप्लिकेशन आइकॉन के शॉर्टकट

Twitter के PWA के लिए ऐप्लिकेशन आइकॉन के शॉर्टकट

ऐप्लिकेशन आइकॉन के शॉर्टकट की मदद से, उपयोगकर्ता आपके ऐप्लिकेशन में सामान्य टास्क तुरंत शुरू कर सकते हैं. उदाहरण के लिए, नया ट्वीट लिखना, मैसेज भेजना या अपनी सूचनाएं देखना. वे Android के लिए Chrome में समर्थित हैं.

Android पर ऐप्लिकेशन आइकॉन को दबाकर रखकर, ये शॉर्टकट इस्तेमाल किए जा सकते हैं. अपने PWA में शॉर्टकट जोड़ना आसान है. इसके लिए, अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में नई shortcuts प्रॉपर्टी बनाएं, शॉर्टकट के बारे में बताएं, और अपने आइकॉन जोड़ें.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

पूरी जानकारी के लिए, ऐप्लिकेशन के शॉर्टकट की मदद से तेज़ी से काम करना लेख पढ़ें.

वेब ऐनिमेशन एपीआई

Chrome 84, वेब ऐनिमेशन एपीआई में ऐसी कई सुविधाएं जोड़ता है जो पहले कभी काम नहीं करतीं.

  • animation.ready और animation.finished का वादा किया गया है.
  • ब्राउज़र अब पुराने ऐनिमेशन को हटा सकता है और उन्हें साफ़ कर सकता है. इससे मेमोरी बचती है और परफ़ॉर्मेंस बेहतर होती है.
  • साथ ही, अब add और accumulate विकल्पों की मदद से, कॉम्पोज़िट मोड का इस्तेमाल करके ऐनिमेशन को जोड़ा जा सकता है.

मैं यहां सभी सुधारों के साथ इंसाफ़ नहीं कर सकती या यहां अच्छे उदाहरण देती हूं. इस बारे में पूरी जानकारी के लिए, Chromium 84 में Web Animations API में किए गए सुधार देखें.

Content indexing API

अगर आपका कॉन्टेंट इंटरनेट कनेक्शन के बिना उपलब्ध है. लेकिन उपयोगकर्ता को इसके बारे में पता नहीं है? क्या यह वाकई में उपलब्ध है? खोज में एक समस्या है!

Content Indexing API की मदद से, ऑफ़लाइन उपलब्ध कॉन्टेंट के लिए यूआरएल और मेटाडेटा जोड़ा जा सकता है. इस एपीआई को हाल ही में ओरिजनल ट्रायल से बाहर किया गया है. उस मेटाडेटा का इस्तेमाल करके, कॉन्टेंट को उपयोगकर्ता को दिखाया जाता है. इससे कॉन्टेंट को खोजने में आसानी होती है.

इंडेक्स में कॉन्टेंट जोड़ने के लिए, सेवा वर्कर रजिस्टरेशन पर index.add() को कॉल करें और कॉन्टेंट के बारे में ज़रूरी मेटाडेटा दें.


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

क्या आपको यह देखना है कि आपकी इंडेक्स में पहले से क्या है? सर्विस वर्कर रजिस्ट्रेशन के लिए, index.getAll() को कॉल करें.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

पूरी जानकारी के लिए, Content Indexing API की मदद से, ऑफ़लाइन काम करने वाले पेजों को इंडेक्स करना लेख पढ़ें.

Wake lock API

Betty Crocker की वेबसाइट पर, 'स्क्रीन चालू रखने वाला लॉक' लागू किया गया.

मुझे खाना बनाना पसंद है. हालांकि, रेसिपी के हिसाब से खाना बनाते समय, स्क्रीन सेवर चालू होने पर मुझे बहुत परेशानी होती है! वेक लॉक एपीआई की मदद से, साइटें Chrome 84 में अपने ऑरिजिन ट्रायल के बाद, स्क्रीन को बंद और लॉक होने से रोकने के लिए वेक लॉक का अनुरोध कर सकती हैं.

असल में, Betty Crocker की वेबसाइट आज इसका इस्तेमाल कर रही है. साथ ही, web.dev पर एक केस स्टडी पब्लिश की है, जिसमें खरीदारी के इंटेंट के इंडिकेटर में 300% की बढ़ोतरी दिख रही है.

वेक लॉक पाने के लिए, navigator.wakeLock.request() को कॉल करें. यह WakeLockSentinel ऑब्जेक्ट दिखाता है, जिसका इस्तेमाल वेक लॉक को "रिलीज़" करने के लिए किया जाता है.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

हालांकि, इसमें और भी चीज़ें शामिल हैं. इसलिए, Screen Wake Lock API की मदद से डिवाइस की स्क्रीन चालू रखना लेख पढ़ें. हालांकि, कम से कम अब मेरी स्क्रीन पर आटा नहीं पड़ेगा!

ऑरिजिन ट्रायल

मुझे दो नए ऑरिजिन ट्रायल के बारे में बताना है. अगर आपने ऑरिजिन ट्रायल का इस्तेमाल पहले कभी नहीं किया है, तो Chrome के ऑरिजिन ट्रायल का इस्तेमाल शुरू करने का तरीका देखें.

डिवाइस कुछ समय से इस्तेमाल में न होने की पहचान करने की सुविधा

जब कोई उपयोगकर्ता कुछ समय तक कोई गतिविधि नहीं करता है, तो Idle Detection API आपको इसकी सूचना देता है. इससे पता चलता है कि वह उपयोगकर्ता शायद अपने कंप्यूटर से दूर है. यह चैट ऐप्लिकेशन या सोशल नेटवर्किंग साइट जैसी चीज़ों के लिए, उपयोगकर्ताओं को यह बताने के लिए बढ़िया है कि उनके संपर्क उपलब्ध हैं या नहीं.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

एपीआई के बारे में ज़्यादा जानने के लिए, इनऐक्टिव उपयोगकर्ताओं का पता लगाने का तरीका लेख पढ़ें. यहां आपको यह भी पता चलेगा कि फ़िलहाल इस एपीआई को कैसे इस्तेमाल किया जा सकता है.

वेब असेंबली एसआईएमडी

इसके बाद, Web Assembly SIMD एक ऑरिजिन ट्रायल शुरू करता है. यह ऐसी कार्रवाइयों की जानकारी देता है जो हार्डवेयर में आम तौर पर मिलने वाले SIMD निर्देशों को मैप करती हैं. SIMD ऑपरेशन का इस्तेमाल परफ़ॉर्मेंस को बेहतर बनाने के लिए किया जाता है, खास तौर पर मल्टीमीडिया ऐप्लिकेशन में.

WebAssembly SIMD के बारे में ज़्यादा जानने के लिए, WebAssembly SIMD की मदद से तेज़ी से काम करने वाले पैरलल ऐप्लिकेशन लेख पढ़ें.

अन्य डेटा

Chrome 84 में कई अहम अपडेट हैं. हालांकि, हम कुछ और अहम अपडेट के बारे में बताना चाहते हैं.

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

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

सदस्यता लें

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

मैं पीट लेपेज हूं और मुझे हेयर कट अभी भी चाहिए, लेकिन जैसे ही Chrome 85 रिलीज़ होगा, मैं आपको बताने वाली हूं -- Chrome में नया क्या है!