Chrome 76-এ নতুন

পিট লেপেজ

Chrome 76-এ, আমরা এর জন্য সমর্থন যোগ করেছি:

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

PWA Omnibox ইনস্টল বোতাম

Chrome 76-এ, আমরা ব্যবহারকারীদের জন্য ডেস্কটপে প্রগ্রেসিভ ওয়েব অ্যাপ ইনস্টল করা সহজ করে দিচ্ছি, অ্যাড্রেস বারে একটি ইনস্টল বোতাম যোগ করে, যাকে কখনও কখনও omnibox বলা হয়৷

যদি আপনার সাইটটি প্রগতিশীল ওয়েব অ্যাপ ইনস্টল করার মানদণ্ড পূরণ করে, তাহলে 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);
});

আপনার UI আপডেট করতে ভুলবেন না - ব্যবহারকারীদের জানাতে আপনার PWA ইনস্টল করা যেতে পারে। আপনার প্রগতিশীল ওয়েব অ্যাপের ইনস্টলেশনের প্রচারের জন্য আমাদের সুপারিশকৃত সেরা অনুশীলনের জন্য PWA ইনস্টলেশন প্রচারের নিদর্শনগুলি দেখুন।

WebAPK-তে দ্রুত আপডেট

যখন একটি প্রগতিশীল ওয়েব অ্যাপ Android এ ইনস্টল করা হয়, Chrome স্বয়ংক্রিয়ভাবে একটি ওয়েব APK অনুরোধ করে এবং ইনস্টল করে। এটি ইনস্টল হওয়ার পর, Chrome পর্যায়ক্রমে ওয়েব অ্যাপ ম্যানিফেস্ট পরিবর্তন হয়েছে কিনা তা পরীক্ষা করে, হয়ত আপনি আইকন, রঙ আপডেট করেছেন বা অ্যাপের নাম পরিবর্তন করেছেন, একটি নতুন WebAPK প্রয়োজন কিনা তা দেখতে।

Chrome 76 থেকে শুরু করে, Chrome আরও ঘন ঘন ম্যানিফেস্ট পরীক্ষা করবে; প্রতি তিন দিনের পরিবর্তে প্রতিদিন পরীক্ষা করা হচ্ছে। যদি কোনো মূল বৈশিষ্ট্য পরিবর্তিত হয়ে থাকে, তাহলে শিরোনাম, আইকন এবং অন্যান্য বৈশিষ্ট্যগুলি আপ টু ডেট আছে তা নিশ্চিত করে Chrome একটি নতুন WebAPK অনুরোধ করবে এবং ইনস্টল করবে৷

সম্পূর্ণ বিবরণের জন্য আরও ঘন ঘন WebAPK আপডেট করা দেখুন।

ডার্ক মোড

অনেক অপারেটিং সিস্টেম এখন ডার্ক মোড বা ডার্ক থিম সমর্থন করে।

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

অ্যাসিঙ্ক ক্লিপবোর্ড API-এ চিত্র সমর্থন

এবং, আমরা অ্যাসিঙ্ক্রোনাস ক্লিপবোর্ড এপিআই-তে চিত্রগুলির জন্য সমর্থন যোগ করেছি, এটিকে প্রোগ্রাম্যাটিকভাবে ছবিগুলি অনুলিপি এবং আটকানো সহজ করে তোলে৷

আরও পড়া

এটি শুধুমাত্র কিছু গুরুত্বপূর্ণ হাইলাইট কভার করে, Chrome 76-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷

সদস্যতা

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

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