Chrome 102 এ নতুন

পিট লেপেজ

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

  • ইনস্টল করা PWA গুলি ফাইল হ্যান্ডলার হিসাবে নিবন্ধন করতে পারে, যা ব্যবহারকারীদের জন্য ডিস্ক থেকে সরাসরি ফাইলগুলি খুলতে সহজ করে তোলে।
  • inert বৈশিষ্ট্য আপনাকে DOM এর অংশগুলিকে জড় হিসাবে চিহ্নিত করতে দেয়।
  • ন্যাভিগেশন API একক পৃষ্ঠার অ্যাপগুলির জন্য নেভিগেশন এবং URL-এ আপডেটগুলি পরিচালনা করা সহজ করে তোলে
  • এবং আরো অনেক আছে.

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

ফাইল হ্যান্ডলিং API

ফাইল হ্যান্ডলিং এপিআই ইনস্টল করা পিডব্লিউএ-কে ফাইল হ্যান্ডলার হিসেবে ওএস-এর সাথে নিবন্ধন করার অনুমতি দেয়। একবার নিবন্ধিত হলে, একজন ব্যবহারকারী ইনস্টল করা PWA দিয়ে ফাইল খুলতে ক্লিক করতে পারেন। এটি PWA গুলির জন্য উপযুক্ত যেগুলি ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করে, উদাহরণস্বরূপ, ইমেজ এডিটর, IDE, টেক্সট এডিটর ইত্যাদি।

আপনার PWA-তে ফাইল হ্যান্ডলিং কার্যকারিতা যোগ করতে, আপনাকে আপনার ওয়েব অ্যাপ ম্যানিফেস্ট আপডেট করতে হবে, আপনার PWA যে ধরনের ফাইলগুলি পরিচালনা করতে পারে তার বিবরণ সহ একটি file_handlers অ্যারে যোগ করতে হবে। আপনাকে খোলার জন্য URL, মাইমের ধরন, ফাইলের প্রকারের জন্য একটি আইকন এবং লঞ্চের ধরন নির্দিষ্ট করতে হবে। লঞ্চের ধরনটি নির্ধারণ করে যে একাধিক ফাইল একটি একক ক্লায়েন্টে খোলা হবে নাকি একাধিক ক্লায়েন্টে।

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

তারপর, PWA চালু হলে সেই ফাইলগুলি অ্যাক্সেস করতে, আপনাকে launchQueue অবজেক্টের জন্য একটি ভোক্তা নির্দিষ্ট করতে হবে। ভোক্তাদের দ্বারা পরিচালনা না করা পর্যন্ত লঞ্চগুলি সারিবদ্ধ থাকে৷

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

সমস্ত বিবরণের জন্য ইনস্টল করা ওয়েব অ্যাপ্লিকেশনগুলিকে ফাইল হ্যান্ডলার হতে দিন ।

inert সম্পত্তি

inert বৈশিষ্ট্য হল একটি বিশ্বব্যাপী HTML বৈশিষ্ট্য যা ব্রাউজারকে একটি উপাদানের জন্য ব্যবহারকারীর ইনপুট ইভেন্টগুলিকে উপেক্ষা করতে বলে, যার মধ্যে ফোকাস ইভেন্ট এবং সহায়ক প্রযুক্তির ইভেন্টগুলি রয়েছে৷

UI তৈরি করার সময় এটি কার্যকর হতে পারে। উদাহরণস্বরূপ, একটি মোডাল ডায়ালগ দিয়ে, আপনি মোডালের ভিতরে ফোকাসটিকে "ফাঁদ" করতে চান যখন এটি দৃশ্যমান হয়। অথবা, একটি ড্রয়ারের জন্য যা ব্যবহারকারীর কাছে সর্বদা দৃশ্যমান নয়, inert যোগ করা নিশ্চিত করে যে ড্রয়ারটি অফস্ক্রিন থাকাকালীন, একটি কীবোর্ড ব্যবহারকারী ঘটনাক্রমে এটির সাথে যোগাযোগ করতে পারে না।

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

এখানে, দ্বিতীয় <div> উপাদানে inert ঘোষণা করা হয়েছে, তাই এর মধ্যে থাকা সমস্ত বিষয়বস্তু, যার মধ্যে রয়েছে <button> এবং <label> , ফোকাস পেতে বা ক্লিক করা যাবে না।

inert Chrome 102 সমর্থিত, এবং Firefox এবং Safari উভয় ক্ষেত্রেই আসছে।

আরো বিস্তারিত জানার জন্য introducing inert দেখুন।

অনেক ওয়েব অ্যাপ পৃষ্ঠা নেভিগেশন ছাড়াই URL আপডেট করার ক্ষমতার উপর নির্ভর করে। আজ, আমরা হিস্ট্রি এপিআই ব্যবহার করি, কিন্তু এটি ক্লাঙ্কি এবং সবসময় প্রত্যাশিতভাবে কাজ করে না। ইতিহাস API এর রুক্ষ প্রান্তগুলি প্যাচ করার চেষ্টা করার পরিবর্তে, ন্যাভিগেশন API সম্পূর্ণরূপে এই স্থানটি ওভারহল করে।

ন্যাভিগেশন API ব্যবহার করতে, গ্লোবাল navigation অবজেক্টে একটি navigate লিসেনার যোগ করুন।

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

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

আধুনিক ক্লায়েন্ট-সাইড রাউটিং দেখুন: সম্পূর্ণ বিবরণের জন্য নেভিগেশন API এবং একটি ডেমো যা আপনি চেষ্টা করে দেখতে পারেন।

এবং আরো!

অবশ্যই আরো অনেক আছে.

  • নতুন স্যানিটাইজার API-এর লক্ষ্য একটি পৃষ্ঠায় নিরাপদে ঢোকানোর জন্য নির্বিচারে স্ট্রিংগুলির জন্য একটি শক্তিশালী প্রসেসর তৈরি করা।
  • hidden=until-found বৈশিষ্ট্যটি ব্রাউজারকে লুকানো অঞ্চলে পাঠ্য অনুসন্ধান করা সম্ভব করে তোলে এবং যদি একটি মিল পাওয়া যায় তবে সেই বিভাগটি প্রকাশ করে।

আরও পড়া

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

সাবস্ক্রাইব

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

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