Chrome 76 में नया

Pete LePage

Chrome 76 में, हमने इनके लिए सहायता जोड़ी है:

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

PWA के ऑम्निबॉक्स में इंस्टॉल बटन

Chrome 76 में, हम उपयोगकर्ताओं के लिए डेस्कटॉप पर प्रगतिशील वेब ऐप्लिकेशन इंस्टॉल करना आसान बना रहे हैं. इसके लिए, हमने पता बार में इंस्टॉल बटन जोड़ा है. इसे कभी-कभी ऑमनीबॉक्स भी कहा जाता है.

अगर आपकी साइट प्रोग्रेसिव वेब ऐप्लिकेशन को इंस्टॉल करने से जुड़ी ज़रूरी शर्तों को पूरा करती है, तो Chrome, ऑमनीबॉक्स में 'इंस्टॉल करें' बटन दिखाएगा. इससे उपयोगकर्ता को पता चलेगा कि आपका PWA इंस्टॉल किया जा सकता है. अगर उपयोगकर्ता, इंस्टॉल करें बटन पर क्लिक करता है, तो यह beforeinstallprompt इवेंट पर prompt() को कॉल करने जैसा ही होता है. इससे, उपयोगकर्ता को इंस्टॉल करने का डायलॉग दिखता है, जिससे वह आपका PWA आसानी से इंस्टॉल कर पाता है.

पूरी जानकारी के लिए, डेस्कटॉप पर प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, पता बार से इंस्टॉल करने की सुविधा देखें.


PWA के मिनी-जानकारी बार पर ज़्यादा कंट्रोल

AirHorner के लिए, 'होम स्क्रीन पर जोड़ें' मिनी-इंफ़ोबार का उदाहरण

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

Chrome 76 से, beforeinstallprompt इवेंट पर preventDefault() को कॉल करने से, मिनी-जानकारी बार दिखना बंद हो जाएगा.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

अपने यूज़र इंटरफ़ेस (यूआई) को ज़रूर अपडेट करें, ताकि उपयोगकर्ताओं को यह पता चल सके कि आपका PWA इंस्टॉल किया जा सकता है. PWA इंस्टॉलेशन का प्रमोशन करने के पैटर्न देखें. यहां आपको, प्रोग्रेसिव वेब ऐप्लिकेशन के इंस्टॉलेशन का प्रमोशन करने के सबसे सही तरीके के बारे में बताया गया है.

वेबएपीके को तेज़ी से अपडेट करना

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

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

पूरी जानकारी के लिए, WebAPKs को ज़्यादा बार अपडेट करना देखें.

गहरे रंग वाला मोड

कई ऑपरेटिंग सिस्टम में अब गहरे रंग वाला मोड या गहरे रंग वाली थीम की सुविधा काम करती है.

prefers-color-scheme मीडिया क्वेरी की मदद से, अपनी साइट के लुक और स्टाइल में बदलाव किया जा सकता है, ताकि वह उपयोगकर्ता के पसंदीदा मोड से मेल खा सके.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

टॉम ने web.dev पर नमस्ते अंधेरा, मेरे पुराने दोस्त नाम का एक बेहतरीन लेख लिखा है. इसमें आपको इस बारे में पूरी जानकारी मिलेगी. साथ ही, लाइट और डार्क मोड, दोनों के साथ काम करने वाली स्टाइल शीट बनाने के बारे में सलाह भी मिलेगी.

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

डेवलपर के लिए, Chrome 76 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव हैं.

Promise.allSettled()

मुझे Promise.allSettled() के बारे में बहुत खुशी हो रही है. यह Promise.all() से मिलता-जुलता है. हालांकि, यह रिटर्न करने से पहले, सभी वादे पूरे होने तक इंतज़ार करता है.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

ब्लॉब को पढ़ना आसान हो गया है

Blob को तीन नए तरीकों से आसानी से पढ़ा जा सकता है: text(), arrayBuffer(), और stream(). इसका मतलब है कि अब हमें फ़ाइल रीडर के लिए कोई रैपर बनाने की ज़रूरत नहीं है!

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

एसिंक्रोनस क्लिपबोर्ड एपीआई में इमेज की सुविधा

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

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

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

सदस्यता लें

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

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