Chrome 76 में नया

पीट लीपेज
पीट लीपेज
Twitter GitHub Glitch Mastodon होम पेज

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 इंस्टॉल करने के तरीके को प्रमोट करने के पैटर्न देखें. यहां आपको प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने को प्रमोट करने के सबसे सही तरीके बताए गए हैं.

WebAPK के तेज़ अपडेट

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

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

पूरी जानकारी के लिए वेबAPK को बार-बार अपडेट करना देखें.

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

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

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

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

हमने एसिंक्रोनस Clipboard एपीआई में इमेज के लिए सुविधा जोड़ी है. इससे इमेज को प्रोग्राम के हिसाब से कॉपी करना आसान हो गया है.

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

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

सदस्यता लें

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

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