Chrome 96-এ নতুন

পিট লেপেজ

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

আমি পিট লেপেজ , অবশেষে স্টুডিওতে শুটিং করছি, চলুন ডুব দিয়ে দেখি Chrome 96-এ ডেভেলপারদের জন্য নতুন কী রয়েছে৷

PWA-এর জন্য ম্যানিফেস্ট id

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

এটি ইনস্টল করার অভিজ্ঞতা না ভেঙে সেই ক্ষেত্রগুলির যে কোনও একটিকে পরিবর্তন করা অসম্ভব করে তোলে। এখন, একটি নতুন ঐচ্ছিক id সম্পত্তি রয়েছে, যা আপনাকে আপনার PWA-এর জন্য ব্যবহৃত শনাক্তকারীকে স্পষ্টভাবে সংজ্ঞায়িত করতে দেয়।

ম্যানিফেস্টে id প্রপার্টি যোগ করলে start_url বা ম্যানিফেস্টের অবস্থানের উপর নির্ভরতা দূর হয় এবং সেই ক্ষেত্রগুলিকে আপডেট করা সম্ভব হয়।

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

ক্রোম 96 থেকে শুরু হওয়া ডেস্কটপ ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিতে id সম্পত্তির জন্য সমর্থন। মোবাইলের জন্য সমর্থন, যা বর্তমানে অনন্য আইডি হিসাবে ম্যানিফেস্ট ইউআরএল ব্যবহার করে, 2022 সালের প্রথমার্ধে অবতরণ করা উচিত।

DevTools গণনা করা অ্যাপ আইডি দেখাচ্ছে

আপনার যদি ইতিমধ্যেই উৎপাদনে একটি PWA থাকে এবং আপনি আপনার ম্যানিফেস্টে একটি id যোগ করতে চান, তাহলে আপনাকে ব্রাউজার দ্বারা নির্ধারিত আইডি ব্যবহার করতে হবে। আপনি ডেভ টুলস-এ অ্যাপ্লিকেশন প্যানেলের ম্যানিফেস্ট প্যানেলে id খুঁজে পেতে পারেন।

একটি একেবারে নতুন PWA-এর জন্য, আপনি আপনার পছন্দের যেকোনো স্ট্রিং মানতে id সেট করতে পারেন, কিন্তু মনে রাখবেন, আপনি ভবিষ্যতে এটি পরিবর্তন করতে পারবেন না, তাই বুদ্ধিমানের সাথে বেছে নিন।

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

আরও তথ্যের জন্য ওয়েব অ্যাপ ম্যানিফেস্ট আইডি সম্পত্তির সাথে অনন্যভাবে সনাক্তকারী PWAs দেখুন।

PWA-এর জন্য URL প্রোটোকল হ্যান্ডলার

একটি প্রোটোকল হ্যান্ডলার হিসাবে নিবন্ধন করতে ওয়েব অ্যাপগুলি navigator.registerProtocolHandler() ব্যবহার করতে পারে। উদাহরণস্বরূপ, Gmail mailto প্রোটোকল নিবন্ধন করতে পারে। তারপর যখন একজন ব্যবহারকারী mailto: উপসর্গ সহ একটি লিঙ্কে ক্লিক করেন, তখন Gmail খুলবে, ব্যবহারকারীর জন্য একটি ইমেল পাঠানো সহজ করে তোলে।

Chrome 96 থেকে শুরু করে, একটি PWA তার ইনস্টলেশনের অংশ হিসাবে একটি প্রোটোকল হ্যান্ডলার হিসাবে নিবন্ধন করতে পারে। আপনার PWA এর জন্য এটি করতে, আপনার ওয়েব অ্যাপ ম্যানিফেস্টে একটি protocol_handlers প্রপার্টি যোগ করুন, আপনি protocol পরিচালনা করতে চান তা নির্দিষ্ট করুন এবং ক্লিক করার সময় যে url খোলা উচিত তা উল্লেখ করুন।

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

এখানে কিছু বিধিনিষেধ রয়েছে, এবং আপনি শুধু কোনো প্রোটোকল নিবন্ধন করতে পারবেন না, তাই সম্পূর্ণ বিশদ বিবরণের জন্য PWA-এর জন্য URL প্রোটোকল হ্যান্ডলার নিবন্ধন দেখুন এবং কীভাবে আপনি আপনার নিজস্ব প্রোটোকল তৈরি করতে web+ সিনট্যাক্স ব্যবহার করতে পারেন!

অগ্রাধিকার ইঙ্গিত (মূল ট্রায়াল)

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

অগ্রাধিকার ইঙ্গিতগুলি একটি পরীক্ষামূলক বৈশিষ্ট্য, যা Chrome 96-এ শুরু হওয়া একটি অরিজিন ট্রায়াল হিসাবে উপলব্ধ, এবং মূল ওয়েব ভাইটালগুলিকে অপ্টিমাইজ করতে সাহায্য করতে পারে৷ importance বৈশিষ্ট্য আপনাকে সিএসএস, ফন্ট, স্ক্রিপ্ট, চিত্র এবং আইফ্রেমের মতো সম্পদের ধরনগুলির জন্য অগ্রাধিকার নির্দিষ্ট করতে দেয়।

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

উদাহরণস্বরূপ, এখানে Google Flights পৃষ্ঠা রয়েছে৷ সেই ব্যাকগ্রাউন্ড ইমেজ হল সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP)।

বড় ব্যাকগ্রাউন্ড ইমেজ সহ Google Flights-এর স্ক্রিনশট

এর সাথে লোড করা, এবং অগ্রাধিকার ইঙ্গিত ছাড়া দেখা যাক. ব্যাকগ্রাউন্ড ইমেজে অগ্রাধিকার high সেট করা হলে, LCP 2.6 সেকেন্ড থেকে 1.9 সেকেন্ডে নেমে আসে।

সমস্ত বিবরণের জন্য Fetch Priority API-এর সাথে অপ্টিমাইজ করা রিসোর্স লোডিং দেখুন, কীভাবে অরিজিন ট্রায়ালের জন্য নিবন্ধন করতে হয়, এবং কীভাবে এটি আপনার রেন্ডারিং কর্মক্ষমতা উন্নত করতে সাহায্য করতে পারে তার কিছু দুর্দান্ত উদাহরণ।

UA স্ট্রিং-এ Chrome 100 অনুকরণ করুন

পরের বছরের শুরুতে, আমরা Chrome 100 হিট করব, একটি তিন সংখ্যার সংস্করণ নম্বর৷ যেকোন কোড যা ভার্সন নম্বর চেক করে বা UA স্ট্রিং পার্স করে, তা নিশ্চিত করতে চেক করা উচিত যে এটি তিনটি ডিজিট পরিচালনা করে।

Chrome 96 থেকে শুরু করে, একটি নতুন পতাকা #force-major-version-to-100 রয়েছে যা বর্তমান সংস্করণ নম্বর 100-এ পরিবর্তন করবে, যাতে আপনি নিশ্চিত করতে পারেন যে সবকিছু প্রত্যাশা অনুযায়ী কাজ করে।

নতুন #force-major-version-to-100 অপশন হাইলাইট করছে Chrome পতাকা পৃষ্ঠা

বিশদ বিবরণের জন্য ব্যবহারকারী-এজেন্ট স্ট্রিং-এ Chrome প্রধান সংস্করণ 100-এ ফোর্স করুন দেখুন।

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

ক্রোম দেব সামিট একটি মোড়ক. ভিডিও এবং বিষয়বস্তু সব অনলাইন উপলব্ধ. ক্রোম ডেভ সামিট সাইটটি দেখুন, অথবা আপনি যদি মূল বক্তব্য বা লাইভস্ট্রিম মিস করেন, ক্রোম ডেভেলপারস ইউটিউব চ্যানেলে সিডিএস প্লেলিস্টটি দেখুন।

এবং আরো!

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

  • ব্যাক, ফরোয়ার্ড ক্যাশে - বা bfcache - এখন স্থিতিশীল অবস্থায় উপলব্ধ, এবং ক্রোমকে ফায়ারফক্স এবং সাফারি উভয়ের সাথে সঙ্গতিপূর্ণ করে।

আরও পড়া

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

সদস্যতা

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

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