Chrome 84-এ নতুন

পিট লেপেজ

Chrome 84 এখন স্থিতিশীল হতে শুরু করছে।

আপনার যা জানা দরকার তা এখানে:

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

অ্যাপ আইকন শর্টকাট

Twitter এর PWA এর জন্য অ্যাপ আইকন শর্টকাট

অ্যাপ আইকন শর্টকাট ব্যবহারকারীদের জন্য আপনার অ্যাপের মধ্যে সাধারণ কাজগুলি দ্রুত শুরু করা সহজ করে তোলে। উদাহরণস্বরূপ, একটি নতুন টুইট রচনা করুন, একটি বার্তা পাঠান বা তাদের বিজ্ঞপ্তিগুলি দেখুন৷ এগুলি অ্যান্ড্রয়েডের জন্য ক্রোমে সমর্থিত৷

এই শর্টকাটগুলি অ্যান্ড্রয়েডে অ্যাপ আইকনটি দীর্ঘক্ষণ টিপে দিয়ে আমন্ত্রণ জানানো হয়৷ আপনার PWA-তে একটি শর্টকাট যোগ করা সহজ, আপনার ওয়েব অ্যাপ ম্যানিফেস্টে একটি নতুন shortcuts বৈশিষ্ট্য তৈরি করুন, শর্টকাট বর্ণনা করুন এবং আপনার আইকন যোগ করুন। 


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

সম্পূর্ণ বিশদ বিবরণের জন্য অ্যাপ শর্টকাট দিয়ে জিনিসগুলি দ্রুত সম্পন্ন করা দেখুন।

ওয়েব অ্যানিমেশন API

ক্রোম 84 ওয়েব অ্যানিমেশন এপিআই-তে পূর্বে অসমর্থিত বেশ কয়েকটি বৈশিষ্ট্য যুক্ত করেছে।

  • animation.ready এবং animation.finished প্রতিশ্রুতি দেওয়া হয়েছে।
  • ব্রাউজারটি এখন পুরানো অ্যানিমেশনগুলি পরিষ্কার এবং মুছে ফেলতে পারে, মেমরি সংরক্ষণ করতে এবং কর্মক্ষমতা উন্নত করতে পারে।
  • এবং আপনি এখন কম্পোজিট মোড ব্যবহার করে অ্যানিমেশনগুলিকে একত্রিত করতে পারেন - add এবং accumulate বিকল্পগুলির সাথে৷

আমি কেবল সমস্ত উন্নতির প্রতি ন্যায়বিচার করতে পারি না বা এখানে ভাল উদাহরণ দিতে পারি না, তাই সম্পূর্ণ বিবরণের জন্য Chromium 84-এ ওয়েব অ্যানিমেশন API উন্নতিগুলি দেখুন।

কন্টেন্ট ইন্ডেক্সিং API

যদি আপনার বিষয়বস্তু নেটওয়ার্ক সংযোগ ছাড়াই পাওয়া যায়। কিন্তু ব্যবহারকারী এটা সম্পর্কে জানেন না? এটা সত্যিই উপলব্ধ? একটি আবিষ্কার সমস্যা আছে!

কন্টেন্ট ইন্ডেক্সিং এপিআই-এর সাহায্যে, যা সবেমাত্র আসল ট্রায়াল থেকে স্নাতক হয়েছে, আপনি অফলাইনে উপলব্ধ সামগ্রীর জন্য URL এবং মেটাডেটা যোগ করতে পারেন। সেই মেটাডেটা ব্যবহার করে, বিষয়বস্তুটি ব্যবহারকারীর কাছে প্রদর্শিত হয়, আবিষ্কারযোগ্যতা উন্নত করে।

সূচীতে বিষয়বস্তু যোগ করতে, পরিষেবা কর্মী নিবন্ধনে index.add() কল করুন এবং সামগ্রী সম্পর্কে প্রয়োজনীয় মেটাডেটা প্রদান করুন। 


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

আপনার সূচকে ইতিমধ্যে কী আছে তা দেখতে চান? পরিষেবা কর্মী নিবন্ধনের জন্য index.getAll() এ কল করুন।

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

সম্পূর্ণ বিবরণের জন্য সামগ্রী ইন্ডেক্সিং API এর সাথে আপনার অফলাইন-সক্ষম পৃষ্ঠাগুলিকে ইন্ডেক্স করা দেখুন৷

ওয়েক লক এপিআই

বেটি ক্রোকার ওয়েবসাইটে ওয়েক লক বাস্তবায়ন।

আমি রান্না করতে পছন্দ করি, কিন্তু একটি রেসিপি অনুসরণ করার সময় আমি এটি অত্যন্ত হতাশাজনক বলে মনে করি, এবং স্ক্রিন সেভার শুরু হয়! ওয়েক লক এপিআই-এর সাথে, যা ক্রোম 84-এ এর অরিজিন ট্রায়াল থেকেও স্নাতক হয়, সাইটগুলি স্ক্রীনটিকে ম্লান হওয়া এবং লক করা থেকে বিরত রাখতে একটি ওয়েক লকের অনুরোধ করতে পারে৷

প্রকৃতপক্ষে, বেটি ক্রোকার ওয়েবসাইটটি আজ এটি ব্যবহার করছে, এবং web.dev-এ একটি কেস স্টাডি প্রকাশ করেছে যা ক্রয়ের অভিপ্রায় সূচকে 300% বৃদ্ধি দেখাচ্ছে৷

একটি ওয়েক লক পেতে, navigator.wakeLock.request() এ কল করুন, এটি একটি WakeLockSentinel অবজেক্ট প্রদান করে, যা ওয়েক লকটিকে "মুক্ত" করতে ব্যবহৃত হয়। 


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

অবশ্যই, এর পরে আরও কিছু আছে, তাই স্ক্রীন ওয়েক লক এপিআই এর সাথে জাগ্রত থাকুন চেক আউট করুন, তবে অন্তত আমার স্ক্রিনটি আর ময়দায় আচ্ছাদিত হবে না!

অরিজিন ট্রায়াল

আমি কল করতে চাই দুটি নতুন মূল ট্রায়াল আছে. আপনি যদি অরিজিন ট্রায়ালে নতুন হয়ে থাকেন, তাহলে Chrome এর অরিজিন ট্রায়াল দিয়ে শুরু করা দেখুন।

নিষ্ক্রিয় সনাক্তকরণ

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

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

এপিআই সম্পর্কে আরও জানতে নিষ্ক্রিয় ব্যবহারকারীদের সনাক্ত করুন নিষ্ক্রিয় শনাক্তকরণ API দেখুন, এবং কীভাবে আপনি আজ এটির সাথে পরীক্ষা শুরু করতে পারেন।

ওয়েব সমাবেশ SIMD

এবং ওয়েব অ্যাসেম্বলি সিমডি একটি অরিজিন ট্রায়াল শুরু করে। এটি হার্ডওয়্যারে সাধারণভাবে উপলব্ধ SIMD নির্দেশাবলীতে ম্যাপ করে এমন ক্রিয়াকলাপগুলি প্রবর্তন করে। বিশেষ করে মাল্টিমিডিয়া অ্যাপ্লিকেশনে কর্মক্ষমতা উন্নত করতে SIMD অপারেশন ব্যবহার করা হয়।

WebAssembly SIMD সম্পর্কে আরও জানতে, WebAssembly SIMD-এর সাথে দ্রুত, সমান্তরাল অ্যাপ্লিকেশনগুলি দেখুন।

এবং আরো

Chrome 84 বড়, কিন্তু কিছু অন্যান্য গুরুত্বপূর্ণ আপডেট আছে যা আমি উল্লেখ করতে চাই।

  • আমরা SameSite কুকি পরিবর্তনগুলির ক্রমান্বয়ে রোলআউট পুনরায় শুরু করছি৷
  • অপমানজনক অনুমতি অনুরোধ, বা অপমানজনক বিজ্ঞপ্তি সহ সাইটগুলি স্বয়ংক্রিয়ভাবে আমাদের শান্ত বিজ্ঞপ্তি UI তে নথিভুক্ত হবে৷
  • QuicTransport- এর জন্য একটি নতুন অরিজিন ট্রায়াল আছে।

আরও পড়া

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

সদস্যতা

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

আমি পিট লেপেজ, এবং আমার এখনও চুল কাটা দরকার , কিন্তু Chrome 85 প্রকাশিত হওয়ার সাথে সাথেই আমি আপনাকে বলতে এখানে থাকব -- Chrome-এ নতুন কী আছে!