Chrome 80 এ নতুন

Chrome 80 এখন রোল আউট হচ্ছে, এবং ডেভেলপারদের জন্য এতে এক টন নতুন জিনিস রয়েছে!

এর জন্য সমর্থন আছে:

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

মডিউল কর্মীরা

মডিউল ওয়ার্কারস, ওয়েব কর্মীদের জন্য একটি নতুন মোড - জাভাস্ক্রিপ্ট মডিউলগুলির কর্মক্ষমতা এবং কর্মক্ষমতা সুবিধা সহ। ওয়ার্কার কনস্ট্রাক্টর একটি নতুন {type: "module"} বিকল্প গ্রহণ করে, যা <script type="module"> মেলানোর জন্য স্ক্রিপ্টগুলি লোড করা এবং চালানোর পদ্ধতি পরিবর্তন করে

const worker = new Worker('worker.js', {
  type: 'module'
});

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

ঐচ্ছিক চেইনিং

একটি বস্তুর গভীরভাবে নেস্টেড বৈশিষ্ট্যগুলি পড়ার চেষ্টা করা ত্রুটি-প্রবণ হতে পারে, বিশেষত যদি এমন একটি সুযোগ থাকে যে কিছু মূল্যায়ন নাও হতে পারে।

// Error prone-version, could throw.
const nameLength = db.user.name.length;

এগিয়ে যাওয়ার আগে প্রতিটি মান চেক করা সহজে একটি গভীরভাবে নেস্টেড if বিবৃতিতে পরিণত হয়, অথবা একটি try / catch ব্লকের প্রয়োজন হয়।

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 ঐচ্ছিক চেইনিং নামে একটি নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্যের জন্য সমর্থন যোগ করে। ঐচ্ছিক চেইনিংয়ের সাথে, যদি বৈশিষ্ট্যগুলির মধ্যে একটি ত্রুটি ছুঁড়ে দেওয়ার পরিবর্তে একটি নাল বা অনির্ধারিত প্রদান করে, তবে পুরো জিনিসটি কেবল অনির্ধারিতভাবে ফিরে আসে।

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

সমস্ত বিবরণের জন্য v8 ব্লগে ঐচ্ছিক চেইনিং ব্লগ পোস্টটি দেখুন!

অরিজিন ট্রায়াল স্নাতক

তিনটি নতুন ক্ষমতা রয়েছে যা অরিজিন ট্রায়াল থেকে স্নাতক হয়ে স্থিতিশীল হয়েছে, যেগুলিকে টোকেন ছাড়াই যেকোনো সাইট ব্যবহার করার অনুমতি দেয়৷

পর্যায়ক্রমিক পটভূমি সিঙ্ক

প্রথমত, পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্ক , এটি পর্যায়ক্রমে পটভূমিতে ডেটা সিঙ্ক্রোনাইজ করে, যাতে কোনও ব্যবহারকারী যখন আপনার ইনস্টল করা PWA খোলে, তাদের কাছে সর্বদা নতুন ডেটা থাকে।

যোগাযোগ পিকার

এর পরে, যোগাযোগ পিকার API , একটি অন-ডিমান্ড API যা ব্যবহারকারীদের তাদের পরিচিতি তালিকা থেকে এন্ট্রি নির্বাচন করতে এবং একটি ওয়েবসাইটের সাথে নির্বাচিত এন্ট্রিগুলির সীমিত বিবরণ ভাগ করতে দেয়৷

এটি ব্যবহারকারীদের শুধুমাত্র তারা যা চায় তা শেয়ার করতে দেয়, যখন তারা চায় এবং ব্যবহারকারীদের কাছে তাদের বন্ধু এবং পরিবারের সাথে যোগাযোগ করা সহজ করে তোলে।

এবং পরিশেষে, Get Installed Related Apps পদ্ধতিটি আপনার ওয়েব অ্যাপটিকে ব্যবহারকারীর ডিভাইসে আপনার নেটিভ অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করার অনুমতি দেয়।

আপনার নেটিভ অ্যাপ ইন্সটল না থাকলে আপনার PWA-এর ইন্সটলেশন প্রচার করা হবে কিনা তা সিদ্ধান্ত নেওয়ার জন্য সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে একটি। অথবা, আপনি একটি অ্যাপের কিছু কার্যকারিতা অক্ষম করতে চাইতে পারেন যদি এটি অন্য অ্যাপ দ্বারা সরবরাহ করা হয়।

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

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

আপনি কীভাবে আপনার PWA-তে ক্যাশে করা সামগ্রী সম্পর্কে ব্যবহারকারীদের জানাবেন? এখানে একটি আবিষ্কার সমস্যা আছে. তারা কি আপনার অ্যাপ খুলতে জানবে? বা কি সামগ্রী পাওয়া যায়?

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

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

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

একবার সূচকটি জনবহুল হয়ে গেলে, এটি Android এর ডাউনলোড পৃষ্ঠার জন্য Chrome-এর একটি নিবেদিত এলাকায় দেখানো হয়৷ সম্পূর্ণ বিশদ বিবরণের জন্য web.dev-এ বিষয়বস্তু সূচীকরণ API-এর সাথে আপনার অফলাইন-সক্ষম পৃষ্ঠাগুলিকে ইন্ডেক্স করা জেফের পোস্টটি দেখুন৷

বিজ্ঞপ্তি ট্রিগার

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

নোটিফিকেশন ট্রিগার আপনাকে আগে থেকেই বিজ্ঞপ্তির সময়সূচী করতে দেয়, যাতে অপারেটিং সিস্টেম সঠিক সময়ে নোটিফিকেশন ডেলিভারি করে - এমনকি নেটওয়ার্ক কানেক্টিভিটি না থাকলেও বা ডিভাইসটি ব্যাটারি সেভার মোডে থাকে।

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

একটি বিজ্ঞপ্তির সময়সূচী করতে, পরিষেবা কর্মী নিবন্ধনের উপর showNotification কল করুন৷ বিজ্ঞপ্তির বিকল্পগুলিতে, TimestampTrigger সাথে একটি showTrigger প্রপার্টি যোগ করুন। তারপর, যখন সময় আসবে, ব্রাউজার বিজ্ঞপ্তিটি দেখাবে।

অরিজিন ট্রায়ালটি Chrome 83 এর মাধ্যমে চালানোর পরিকল্পনা করা হয়েছে, তাই সম্পূর্ণ বিবরণের জন্য web.dev-এ টমের বিজ্ঞপ্তি ট্রিগার পোস্টটি দেখুন।

অন্যান্য মূল ট্রায়াল

ক্রোম 80 এ শুরু হওয়া আরও কয়েকটি মূল ট্রায়াল রয়েছে:

  • ওয়েব সিরিয়াল
  • ফাইল হ্যান্ডলার হিসাবে নিবন্ধন করার জন্য PWA-এর ক্ষমতা
  • পরিচিতি বাছাইকারীর জন্য নতুন বৈশিষ্ট্য

চেক করুন অরিজিন ট্রায়ালে বৈশিষ্ট্যের সম্পূর্ণ তালিকার জন্য।

এবং আরো

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

  • আপনি এখন #:~:text=something ব্যবহার করে একটি পৃষ্ঠার পাঠ্য খণ্ডের সাথে সরাসরি লিঙ্ক করতে পারেন। ক্রোম স্ক্রোল করবে এবং সেই টেক্সট ফ্র্যাগমেন্টের প্রথম উদাহরণটিকে হাইলাইট করবে। যেমন https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • display: minimal-ui ইনস্টল করা PWA এর শিরোনাম বারে একটি ব্যাক এবং রিলোড বোতাম যোগ করে।
  • এবং ক্রোম এখন ফেভিকন হিসাবে SVG ছবিগুলিকে সমর্থন করে৷

আরও পড়া

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

সাবস্ক্রাইব

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

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