- Android पर होम स्क्रीन पर जोड़ें में बदलाव हो रहा है, ताकि आपको ज़्यादा कंट्रोल दिया जा सके.
- Page Lifecycle API से आपको पता चलता है कि आपका टैब कब निलंबित या वापस लाया गया है.
- पेमेंट हैंडलर एपीआई भी वेब पर काम करने वाले पेमेंट ऐप्लिकेशन के लिए, पेमेंट के अनुरोध से जुड़े अनुभव को बेहतर बनाने में मदद करता है.
इनके अलावा और भी बहुत कुछ है!
मेरा नाम पीट लेपेज है. आइए, विस्तार से जानें और देखें कि Chrome 68 में डेवलपर के लिए नया क्या है!
क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची देखें.
होम स्क्रीन पर जोड़े गए बदलाव
अगर आपकी साइट होम स्क्रीन पर जोड़ें सुविधा को पूरा करती है, तो Chrome अब होम स्क्रीन पर जोड़ें बैनर नहीं दिखाएगा. इसके बजाय, आपके पास यह कंट्रोल होता है कि उपयोगकर्ता को अनुरोध कब और कैसे करना है.
उपयोगकर्ता को सूचना देने के लिए, beforeinstallprompt इवेंट सुनें. इसके बाद, इवेंट को सेव करें. साथ ही, यह बताने के लिए
अपने ऐप्लिकेशन में कोई बटन या यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ें कि इसे इंस्टॉल किया जा सकता है.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
जब लोग 'इंस्टॉल करें' बटन पर क्लिक करते हैं, तब सेव किए गए
beforeinstallprompt इवेंट पर prompt() को कॉल करें. इसके बाद, Chrome, होम स्क्रीन पर जोड़ें वाला डायलॉग बॉक्स दिखाता है.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(handleInstall);
});
जब कोई उपयोगकर्ता पहली बार किसी ऐसी साइट पर जाता है जो होम स्क्रीन पर जोड़ें की शर्तें पूरी करती है, तो Chrome आपको अपनी साइट अपडेट करने का समय देने के लिए मिनी-इन्फ़ोबार दिखाएगा. खारिज करने के बाद, मिनी-इंफ़ोबार कुछ समय के लिए फिर से नहीं दिखेगा.
होम स्क्रीन पर दिखने वाले व्यवहार में बदलाव की पूरी जानकारी मिलती है. इसमें इस्तेमाल किए जा सकने वाले कोड सैंपल वगैरह की पूरी जानकारी शामिल होती है.
पेज लाइफ़साइकल एपीआई
जब किसी उपयोगकर्ता के डिवाइस पर बहुत ज़्यादा टैब काम करते हैं, तब मेमोरी, सीपीयू, बैटरी, और नेटवर्क जैसे अहम रिसॉर्स की सदस्यता ली जा सकती है. इससे उपयोगकर्ताओं को खराब अनुभव मिलता है.
अगर आपकी साइट बैकग्राउंड में चल रही है, तो संसाधनों के संरक्षण के लिए सिस्टम उसे निलंबित कर सकता है. नए Page Lifecycle API की मदद से, अब इन इवेंट को सुना जा सकता है और उनके जवाब दिए जा सकते हैं.
उदाहरण के लिए, अगर किसी उपयोगकर्ता के पास कुछ समय के लिए बैकग्राउंड में कोई टैब है, तो ब्राउज़र
संसाधनों को बचाने के लिए उस पेज पर स्क्रिप्ट का निष्पादन निलंबित कर सकता है.
ऐसा करने से पहले, यह freeze इवेंट ट्रिगर करेगा. इससे, खुले हुए
IndexedDB या नेटवर्क कनेक्शन को बंद किया जा सकेगा. इसके अलावा, सेव न किए गए व्यू की स्थिति को भी सेव किया जा सकेगा. इसके बाद, जब उपयोगकर्ता
टैब को फिर से फ़ोकस करता है, तो resume इवेंट ट्रिगर हो जाता है. इससे, बंद हो चुकी किसी भी चीज़ को फिर से शुरू किया जा सकता है.
const prepareForFreeze = () => {
// Close any open IndexedDB connections.
// Release any web locks.
// Stop timers or polling.
};
const reInitializeApp = () => {
// Restore IndexedDB connections.
// Re-acquire any needed web locks.
// Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);
कोड के सैंपल, सलाह वगैरह के साथ-साथ, बहुत सारी जानकारी पाने के लिए, Phil का Page Lifecycle API देखें. आपको GitHub पर spec और पूरी जानकारी देने वाला दस्तावेज़ मिल सकता है.
पेमेंट हैंडलर एपीआई
Payment अनुरोध API, पैसे स्वीकार करने का एक ऐसा तरीका है जो स्टैंडर्ड पर आधारित है. पेमेंट हैंडलर एपीआई, वेब पर काम करने वाले पेमेंट ऐप्लिकेशन को चालू करके, पेमेंट के अनुरोध तक पहुंच बढ़ाता है, ताकि पेमेंट के अनुरोध से जुड़े अनुभव में ही पेमेंट किया जा सके.
एक सेलर के तौर पर, वेब पर काम करने वाले मौजूदा पेमेंट ऐप्लिकेशन को जोड़ना, supportedMethods प्रॉपर्टी में एंट्री जोड़ने जितना ही आसान है.
const request = new PaymentRequest([{
// Your custom payment method identifier comes here
supportedMethods: 'https://bobpay.xyz/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
अगर कोई सर्विस वर्कर इंस्टॉल किया जाता है, जो बताए गए पेमेंट के तरीके को हैंडल कर सकता है, तो वह पेमेंट के अनुरोध के यूज़र इंटरफ़ेस (यूआई) में दिखेगा और उपयोगकर्ता इससे पेमेंट कर सकता है.
Eiji ने एक बढ़िया पोस्ट डाली है, जिसमें उसे व्यापारी/कंपनी की साइटों और पेमेंट हैंडलर के लिए इसे लागू करने का तरीका बताया गया है.
और ज़्यादा!
डेवलपर के लिए Chrome 68 में हुए ये कुछ बदलाव हैं, बेशक, और भी बहुत से बदलाव हैं.
iframeमें एम्बेड किए गए कॉन्टेंट को किसी अलग ऑरिजिन पर जाने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है.- Chrome 1 के बाद से,
grabऔरgrabbingके लिए, सीएसएसcursorकी वैल्यू प्रीफ़िक्स कर दी गई हैं. अब हम, स्टैंडर्ड और बिना प्रीफ़िक्स वाली वैल्यू के साथ काम करते हैं. आखिर में. - और - यह बहुत बड़ा है! किसी सर्विस वर्कर को अपडेट का अनुरोध करते समय, एचटीटीपी कैश मेमोरी को अब अनदेखा कर दिया जाता है. इससे, Chrome को स्पेसिफ़िकेशन और अन्य ब्राउज़र के साथ इनलाइन लाने में मदद मिलती है.
DevTools में नया है
Chrome DevTools में नया देखना न भूलें. इससे, आपको यह जानने में मदद मिलेगी कि Chrome 68 में DevTools के लिए नया क्या है.
सदस्यता लें
इसके बाद, हमारे YouTube चैनल पर सदस्यता लें बटन पर क्लिक करें. जब भी हम नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना दी जाएगी.
मैं हूं पीट लेपेज और Chrome 69 के रिलीज़ होते ही, मैं आपको बताऊंगी -- Chrome में नया क्या है!