Chrome 79-এ নতুন

পিট লেপেজ

Chrome 79 এখন চালু হচ্ছে!

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

মাস্কেবল আইকন

আপনি যদি অ্যান্ড্রয়েড O বা তার পরে চালাচ্ছেন, এবং আপনি একটি প্রগতিশীল ওয়েব অ্যাপ ইনস্টল করেছেন, আপনি সম্ভবত আইকনের চারপাশে বিরক্তিকর সাদা বৃত্ত লক্ষ্য করেছেন।

সৌভাগ্যক্রমে, Chrome 79 এখন ইনস্টল করা প্রগ্রেসিভ ওয়েব অ্যাপের জন্য মাস্কযোগ্য আইকনগুলিকে সমর্থন করে৷ আপনাকে নিরাপদ অঞ্চলের মধ্যে ফিট করার জন্য আপনার আইকনটি ডিজাইন করতে হবে - মূলত ক্যানভাসের 80% ব্যাস সহ একটি বৃত্ত৷

তারপর, ওয়েব অ্যাপ ম্যানিফেস্টে, আপনাকে আইকনে একটি নতুন purpose প্রপার্টি যোগ করতে হবে এবং এর মানটিকে maskable সেট করতে হবে। 


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

টাইগার ওকস-এর CSS ট্রিকস-এর উপর একটি দুর্দান্ত পোস্ট রয়েছে - মাস্কেবল আইকন: সমস্ত বিবরণ সহ আপনার PWA-এর জন্য অ্যান্ড্রয়েড অ্যাডাপ্টিভ আইকন , এবং আপনার আইকনগুলি ফিট হবে তা নিশ্চিত করতে আপনি পরীক্ষা করার জন্য একটি দুর্দান্ত সরঞ্জাম ব্যবহার করতে পারেন।

ওয়েব এক্সআর

আপনি এখন WebXR ডিভাইস API-এর সাহায্যে স্মার্টফোন এবং হেড-মাউন্ট করা ডিসপ্লেগুলির জন্য নিমগ্ন অভিজ্ঞতা তৈরি করতে পারেন।

WebXR নিমগ্ন অভিজ্ঞতার একটি সম্পূর্ণ বর্ণালী সক্ষম করে। অগমেন্টেড রিয়েলিটি ব্যবহার করা থেকে শুরু করে ভার্চুয়াল রিয়েলিটি গেমস এবং 360 ডিগ্রি মুভি এবং আরও অনেক কিছু কেনার আগে আপনার বাড়িতে নতুন পালঙ্ক দেখতে কেমন হতে পারে তা দেখতে।

নতুন API দিয়ে শুরু করতে, ভার্চুয়াল রিয়েলিটি কামস টু দ্য ওয়েব পড়ুন।

নতুন উৎপত্তি ট্রায়াল

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

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

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

ওয়েব ডেভেলপারদের জন্য অরিজিন ট্রায়াল গাইডে অরিজিন ট্রায়াল সম্পর্কে আরও তথ্য রয়েছে৷ আপনি সক্রিয় অরিজিন ট্রায়ালগুলির একটি তালিকা দেখতে পারেন এবং Chrome অরিজিন ট্রায়াল পৃষ্ঠায় তাদের জন্য সাইন আপ করতে পারেন৷

ওয়েক লক

Google স্লাইড সম্পর্কে আমার সবচেয়ে বড় পোষা প্রাণীর মধ্যে একটি হল যে আপনি যদি একটি একক স্লাইডে ডেকটি খুব বেশিক্ষণ খোলা রাখেন, তাহলে স্ক্রিনসেভারটি ঢুকে যায়৷ আপনি চালিয়ে যাওয়ার আগে, আপনাকে আপনার কম্পিউটার আনলক করতে হবে৷ উঃ

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

একটি ওয়েক লকের অনুরোধ করতে, আপনাকে navigator.wakeLock.request() কল করতে হবে এবং WakeLockSentinel অবজেক্টটি সংরক্ষণ করতে হবে যা এটি ফেরত দেয়।

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

ব্যবহারকারী পৃষ্ঠা থেকে দূরে নেভিগেট না হওয়া পর্যন্ত লকটি রক্ষণাবেক্ষণ করা হয়, অথবা আপনি আগে সংরক্ষিত WakeLockSentinel অবজেক্টে release কল করেন।

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

আরও বিশদ বিবরণ রয়েছে web.dev/wakelock এ।

rendersubtree অ্যাট্রিবিউট

এমন সময় আছে যখন আপনি DOM-এর অংশ অবিলম্বে রেন্ডার করতে চান না। উদাহরণস্বরূপ, প্রচুর পরিমাণে সামগ্রী সহ স্ক্রলার, বা ট্যাবযুক্ত UI যেখানে যেকোন সময়ে শুধুমাত্র কিছু বিষয়বস্তু দৃশ্যমান।

নতুন rendersubtree অ্যাট্রিবিউট ব্রাউজারকে বলে যে এটি সেই সাবট্রি রেন্ডারিং এড়িয়ে যেতে পারে। এটি ব্রাউজারটিকে বাকি পৃষ্ঠা প্রক্রিয়াকরণে আরও বেশি সময় ব্যয় করতে দেয়, কার্যক্ষমতা বৃদ্ধি করে।

যখন rendersubtree invisible সেট করা হয়, তখন উপাদানটির বিষয়বস্তু আঁকা বা হিট-টেস্ট করা হয় না, রেন্ডারিং অপ্টিমাইজেশানের জন্য অনুমতি দেয়।

rendersubtree activatable তে পরিবর্তন করা, invisible অ্যাট্রিবিউটটি সরিয়ে এবং বিষয়বস্তু রেন্ডার করে বিষয়বস্তুকে দৃশ্যমান করে।

ক্রোম ডেভ সামিট 2019

আপনি যদি ক্রোম ডেভ সামিট মিস করেন, তবে সমস্ত আলোচনা আমাদের YouTube চ্যানেলে রয়েছে৷

আমাদের দলের নতুন সদস্য Surjiko সহ আলোচনার মধ্যে যে সমস্ত মজার জিনিস চলেছিল তার সাথে জেকের একটি দুর্দান্ত টুইটার থ্রেডও রয়েছে৷

আরও পড়া

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

সদস্যতা

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

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