Chrome 76 में, हमने इनके लिए सहायता जोड़ी है:
prefers-color-schemeमीडिया क्वेरी, जिसकी मदद से वेबसाइटों पर डार्क मोड लागू किया जा सकता है.- ओमनीबॉक्स में इंस्टॉल बटन, ताकि डेस्कटॉप पर प्रोग्रेसिव वेब ऐप्लिकेशन को आसानी से इंस्टॉल किया जा सके.
- मोबाइल पर प्रोग्रेसिव वेब ऐप्लिकेशन पर, मिनी-इंफ़ोबार को दिखने से रोकना.
- वेबएपीके के अपडेट ज़्यादा बार मिलते हैं.
- इसके अलावा, और भी कई सुविधाएं हैं.
मैं पीट लेपेज हूं. चलिए, इसके बारे में जानते हैं और देखते हैं कि Chrome 76 में डेवलपर के लिए नया क्या है!
PWA के ऑम्निबॉक्स में इंस्टॉल बटन
Chrome 76 में, हम उपयोगकर्ताओं के लिए डेस्कटॉप पर प्रगतिशील वेब ऐप्लिकेशन इंस्टॉल करना आसान बना रहे हैं. इसके लिए, हमने पता बार में इंस्टॉल बटन जोड़ा है. इसे कभी-कभी ऑमनीबॉक्स भी कहा जाता है.
अगर आपकी साइट प्रोग्रेसिव वेब ऐप्लिकेशन को इंस्टॉल करने से जुड़ी ज़रूरी शर्तों को पूरा करती है, तो Chrome, ऑमनीबॉक्स में 'इंस्टॉल करें' बटन दिखाएगा. इससे उपयोगकर्ता को पता चलेगा कि आपका PWA इंस्टॉल किया जा सकता है. अगर उपयोगकर्ता 'इंस्टॉल करें' बटन पर क्लिक करता है, तो यह ठीक वैसे ही
होता है जैसे beforeinstallprompt इवेंट में prompt() को कॉल करता है.
यह इंस्टॉल करने का डायलॉग दिखाता है, जिससे उपयोगकर्ता के लिए आपका PWA इंस्टॉल करना आसान हो जाता है.
पूरी जानकारी के लिए, डेस्कटॉप पर प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, पता बार से इंस्टॉल करने की सुविधा देखें.
PWA के मिनी-जानकारी बार पर ज़्यादा कंट्रोल
मोबाइल पर, अगर उपयोगकर्ता प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने की ज़रूरी शर्तें पूरी करता है, तो पहली बार आपकी साइट पर आने पर 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 इंस्टॉलेशन का प्रमोशन करने के पैटर्न देखें. इसमें, प्रोग्रेसिव वेब ऐप्लिकेशन के इंस्टॉलेशन का प्रमोशन करने के सबसे सही तरीके बताए गए हैं.
WebAPKs के तेज़ी से अपडेट
जब 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 DevTools (76) में नया क्या है
- Chrome 76 में बंद की गई सुविधाएं और हटाई गई सुविधाएं
- Chrome 76 के लिए ChromeStatus.com के अपडेट
- Chrome 76 में JavaScript में नया क्या है
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
सदस्यता लें
आप हमारे वीडियो की अप-टू-डेट जानकारी पाना चाहते/चाहती हैं, फिर Chrome Developers के YouTube चैनल की सदस्यता लें. नया वीडियो लॉन्च होने पर, आपको ईमेल से सूचना मिलेगी.
मेरा नाम पीट लेपेज है. Chrome 77 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!