Chrome 68 में नया

Pete LePage

इसके अलावा, और भी बहुत कुछ है!

मेरा नाम पीट लेपेज है. आइए, जानें कि 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;
});

जब उपयोगकर्ता 'इंस्टॉल करें' बटन पर क्लिक करता है, तो सेव किए गए prompt() इवेंट पर beforeinstallprompt कॉल करें. इसके बाद, 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 एक छोटा-सा जानकारी वाला बार दिखाएगा. ऐसा तब होगा, जब कोई उपयोगकर्ता पहली बार ऐसी साइट पर जाएगा जो होम स्क्रीन पर जोड़ने की ज़रूरी शर्तें पूरी करती है. खारिज करने के बाद, मिनी-इंफ़ोबार कुछ समय के लिए फिर से नहीं दिखेगा.

होम स्क्रीन पर ऐप्लिकेशन के व्यवहार में बदलाव करने के लिए के बारे में पूरी जानकारी दी गई है. इसमें, इस्तेमाल किए जा सकने वाले कोड सैंपल वगैरह की जानकारी भी शामिल है.

पेज लाइफ़साइकल एपीआई

जब किसी उपयोगकर्ता के पास कई टैब खुले होते हैं, तो मेमोरी, सीपीयू, बैटरी, और नेटवर्क जैसे ज़रूरी रिसॉर्स का ज़्यादा इस्तेमाल हो सकता है. इससे, उपयोगकर्ता को खराब अनुभव मिलता है.

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

उदाहरण के लिए, अगर किसी उपयोगकर्ता का टैब कुछ समय से बैकग्राउंड में है, तो ब्राउज़र, संसाधनों को बचाने के लिए उस पेज पर स्क्रिप्ट के एक्ज़ीक्यूशन को निलंबित कर सकता है. ऐसा करने से पहले, यह 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);

कोड सैंपल, सलाह वगैरह के साथ-साथ बहुत ज़्यादा जानकारी के लिए, Pill की Page Lifecycle API से जुड़ी पोस्ट देखें. GitHub पर स्पेसिफ़िकेशन और एक्सप्लेनर दस्तावेज़ देखा जा सकता है.

पेमेंट हैंडलर एपीआई

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

सेलर के तौर पर, किसी मौजूदा वेब-आधारित पेमेंट ऐप्लिकेशन को जोड़ना उतना ही आसान है जितना कि 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' }
  }
});

अगर पेमेंट के लिए चुने गए तरीके को मैनेज करने वाला कोई सेवा वर्कर इंस्टॉल है, तो वह पेमेंट के अनुरोध वाले यूज़र इंटरफ़ेस (यूआई) में दिखेगा. साथ ही, उपयोगकर्ता उससे पेमेंट कर सकता है.

एइजी ने एक शानदार पोस्ट लिखी है. इसमें, कारोबारी या कंपनी की साइटों और पेमेंट हैंडलर के लिए, इसे लागू करने का तरीका बताया गया है.

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

ये डेवलपर के लिए Chrome 68 में किए गए कुछ बदलाव हैं. हालांकि, अब इसमें और भी बदलाव किए गए हैं.

DevTools में नई सुविधा

Chrome 68 में DevTools के लिए जो नई सुविधाएं जोड़ी गई हैं, उनके बारे में जानने के लिए Chrome DevTools में नई सुविधाएं देखें.

सदस्यता लें

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

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