Chrome 68-এ নতুন

পিট লেপেজ

এবং আরো অনেক আছে!

আমি পিট লেপেজ । চলুন ডুব দিয়ে দেখি Chrome 68-এ ডেভেলপারদের জন্য নতুন কী আছে!

পরিবর্তনের সম্পূর্ণ তালিকা চান? Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা দেখুন।

হোম স্ক্রীন পরিবর্তন যোগ করুন

যদি আপনার সাইট হোম স্ক্রীনে যোগ করার মানদণ্ড পূরণ করে, তাহলে Chrome আর হোম স্ক্রীন ব্যানারে যোগ দেখাবে না। পরিবর্তে, আপনি কখন এবং কীভাবে ব্যবহারকারীকে প্রম্পট করবেন তার নিয়ন্ত্রণে আছেন।

ব্যবহারকারীকে অনুরোধ জানাতে, beforeinstallprompt ইভেন্টের আগে শুনুন, তারপরে, ইভেন্টটি সংরক্ষণ করুন এবং এটি ইনস্টল করা যেতে পারে তা নির্দেশ করতে আপনার অ্যাপে একটি বোতাম বা অন্যান্য UI উপাদান যোগ করুন।

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() , ক্রোম তখন অ্যাড টু হোম স্ক্রীন ডায়ালগ দেখায়।


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

আপনার সাইট আপডেট করার জন্য আপনাকে সময় দিতে ক্রোম একটি মিনি-ইনফোবার দেখাবে যখন কোনো ব্যবহারকারী প্রথমবার কোনো সাইট ভিজিট করে যা হোম স্ক্রীনে যোগ করার মানদণ্ড পূরণ করে। একবার খারিজ হয়ে গেলে, মিনি-ইনফোবারটি কিছুক্ষণের জন্য আর দেখানো হবে না।

হোম স্ক্রীন আচরণে যোগ করার পরিবর্তনগুলির সম্পূর্ণ বিবরণ রয়েছে, আপনি ব্যবহার করতে পারেন এমন কোড নমুনা সহ এবং আরও অনেক কিছু।

পৃষ্ঠা জীবনচক্র API

যখন একজন ব্যবহারকারীর প্রচুর সংখ্যক ট্যাব চালু থাকে, তখন মেমরি, সিপিইউ, ব্যাটারি এবং নেটওয়ার্কের মতো গুরুত্বপূর্ণ সংস্থানগুলি ওভারসাবস্ক্রাইব হতে পারে, যা ব্যবহারকারীর খারাপ অভিজ্ঞতার দিকে পরিচালিত করে।

আপনার সাইট ব্যাকগ্রাউন্ডে চললে, রিসোর্স সংরক্ষণের জন্য সিস্টেম এটিকে স্থগিত করতে পারে। নতুন পেজ লাইফসাইকেল 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);

কোড নমুনা, টিপস এবং আরও অনেক কিছু সহ আরও অনেক বিশদ বিবরণের জন্য ফিলের পৃষ্ঠা লাইফসাইকেল API পোস্টটি দেখুন। আপনি GitHub এ স্পেস এবং একটি ব্যাখ্যাকারী ডক খুঁজে পেতে পারেন।

পেমেন্ট হ্যান্ডলার API

অর্থপ্রদানের অনুরোধ API হল অর্থপ্রদান গ্রহণ করার একটি উন্মুক্ত, মান-ভিত্তিক উপায়। পেমেন্ট হ্যান্ডলার 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' }
  }
});

নির্দিষ্ট অর্থপ্রদানের পদ্ধতিটি পরিচালনা করতে পারে এমন একজন পরিষেবা কর্মী যদি ইনস্টল করা থাকে, তাহলে এটি পেমেন্ট অনুরোধ UI-তে প্রদর্শিত হবে এবং ব্যবহারকারী এটি দিয়ে অর্থপ্রদান করতে পারবেন।

Eiji-এর একটি দুর্দান্ত পোস্ট রয়েছে যা দেখায় কিভাবে এটি মার্চেন্ট সাইট এবং পেমেন্ট হ্যান্ডলারদের জন্য প্রয়োগ করা যায়।

এবং আরো!

এইগুলি বিকাশকারীদের জন্য Chrome 68-এর কয়েকটি পরিবর্তন, অবশ্যই, আরও অনেক কিছু আছে।

DevTools-এ নতুন

Chrome 68-এ DevTools-এর জন্য নতুন কী আছে তা জানতে Chrome DevTools-এ নতুন চেক আউট করতে ভুলবেন না।

সাবস্ক্রাইব

তারপর, আমাদের YouTube চ্যানেলে সাবস্ক্রাইব বোতামে ক্লিক করুন, এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

আমি পিট লেপেজ, এবং Chrome 69 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব -- Chrome এ নতুন কি!