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 में Web Animations API में कई ऐसी सुविधाएं जोड़ी गई हैं जो पहले काम नहीं करती थीं.

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

मैं यहां सभी सुधारों के साथ काम नहीं कर सकता या मैं यहां अच्छे उदाहरण नहीं दे सकता. इसलिए, पूरी जानकारी के लिए Chromium 84 में वेब ऐनिमेशन एपीआई में किए गए सुधार देखें.

कॉन्टेंट इंडेक्स करने का एपीआई

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

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

इंडेक्स में कॉन्टेंट जोड़ने के लिए, सर्विस वर्कर रजिस्ट्रेशन पर 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.
}

पूरी जानकारी के लिए, कॉन्टेंट इंडेक्स करने वाले एपीआई की मदद से, ऑफ़लाइन पेजों को इंडेक्स करने की सुविधा वाले पेजों को इंडेक्स करना देखें.

वेक लॉक एपीआई

Betty Crocker की वेबसाइट पर वेक लॉक की सुविधा लागू करना.

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

दरअसल, बेटी क्रोकर की वेबसाइट पर आज इसका इस्तेमाल हो रहा है और उसने web.dev पर एक केस स्टडी पब्लिश की है. इसमें, खरीदारी की इच्छा दिखाने वाले इंडिकेटर में 300% की बढ़ोतरी दिखाई गई है.

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


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

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

बेशक, इसके अलावा इसमें कुछ और भी है. इसलिए, स्क्रीन वेक लॉक एपीआई की मदद से जागें, लेकिन कम से कम मेरी स्क्रीन पर अब आटा घुल नहीं पाएंगे!

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

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

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

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

// 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,
});

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

वेब असेंबली सिमD

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

WebAssembly सिमडी के बारे में ज़्यादा जानने के लिए, WebAssembly सिमD के साथ काम करने वाले और तेज़ ऐप्लिकेशन देखें.

अन्य डेटा

Chrome 84 बड़ा है, लेकिन मैं इसके बारे में कुछ अन्य ज़रूरी अपडेट के बारे में बताना चाहता हूं.

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

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

सदस्यता लें

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

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