Chrome 73-এ নতুন

Pete LePage

Chrome 73-এ, আমরা এর জন্য সমর্থন যোগ করেছি:

• স্বাক্ষরিত HTTP এক্সচেঞ্জের মাধ্যমে সহজে বহনযোগ্য সামগ্রী তৈরি করা।
• গঠনযোগ্য শৈলী শীটগুলির সাথে গতিশীলভাবে শৈলী পরিবর্তন করা সহজ হয়ে ওঠে।
• প্রোগ্রেসিভ ওয়েব অ্যাপস-এর জন্য সমর্থন Mac-এ পৌঁছেছে, সমস্ত ডেস্কটপ এবং মোবাইল প্ল্যাটফর্মে PWA-এর জন্য সমর্থন নিয়ে আসছে, ওয়েবের মাধ্যমে বিতরণ করা ইনস্টলযোগ্য অ্যাপ তৈরি করা সহজ করে।

এবং আরো অনেক আছে!

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

লগ পরিবর্তন করুন

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

• Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
• Chrome 73-এর জন্য ChromeStatus.com আপডেট
• Chrome 73 বর্জন এবং অপসারণ
• Chrome 73 মিডিয়া আপডেট
• Chrome 73-এ JavaScript-এ নতুন কী আছে

প্রগতিশীল ওয়েব অ্যাপস সর্বত্র কাজ করে

প্রগতিশীল ওয়েব অ্যাপগুলি একটি ইনস্টলযোগ্য, অ্যাপের মতো অভিজ্ঞতা প্রদান করে, ওয়েবের মাধ্যমে সরাসরি তৈরি এবং বিতরণ করা হয়। Chrome 73-এ, আমরা macOS-এর জন্য সমর্থন যোগ করেছি, সমস্ত ডেস্কটপ প্ল্যাটফর্ম - ম্যাক, উইন্ডোজ, ChromeOS এবং Linux, সেইসাথে মোবাইল, ওয়েব অ্যাপ ডেভেলপমেন্টকে সহজ করে প্রগতিশীল ওয়েব অ্যাপের জন্য সমর্থন এনেছি।

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

ব্যবহারকারীরা Chrome এর প্রসঙ্গ মেনু থেকে আপনার PWA ইনস্টল করতে পারেন, অথবা আপনি beforeinstallprompt ইভেন্টটি ব্যবহার করে সরাসরি ইনস্টলেশন অভিজ্ঞতা প্রচার করতে পারেন। একবার ইনস্টল হয়ে গেলে, একটি PWA একটি নেটিভ অ্যাপ্লিকেশানের মতো আচরণ করার জন্য OS-এর সাথে একীভূত হয়: ব্যবহারকারীরা অন্যান্য অ্যাপের মতো একই জায়গা থেকে সেগুলি খুঁজে পান এবং চালু করেন, তারা তাদের নিজস্ব উইন্ডোতে চলে, তারা টাস্ক সুইচারে উপস্থিত হয়, তাদের আইকনগুলি বিজ্ঞপ্তি ব্যাজিং দেখাতে পারে, এবং তাই

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

আপনি যদি ইতিমধ্যেই একটি মোবাইল PWA তৈরি করছেন, তাহলে একটি ডেস্কটপ PWA আলাদা নয়। আসলে, আপনি যদি প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করে থাকেন, তাহলে আপনি সম্ভবত ইতিমধ্যেই যেতে পারবেন। আপনার একক কোডবেস ডেস্কটপ এবং মোবাইল জুড়ে কাজ করবে। আপনি যদি সবেমাত্র PWAs দিয়ে শুরু করেন, তাহলে সেগুলি তৈরি করা কতটা সহজ তা দেখে আপনি অবাক হবেন!

1. একটি ম্যানিফেস্ট যোগ করুন
2. আইকনগুলির একটি সেট তৈরি করুন
3. একজন বয়লারপ্লেট পরিষেবা কর্মী যোগ করুন

তারপর, সেখান থেকে পুনরাবৃত্তি করুন।

স্বাক্ষরিত HTTP এক্সচেঞ্জ

সাইনড এইচটিটিপি এক্সচেঞ্জ (SXG), ওয়েব প্যাকেজ নামে একটি উদীয়মান প্রযুক্তির অংশ এখন Chrome 73-এ উপলব্ধ৷ একটি স্বাক্ষরিত HTTP এক্সচেঞ্জ এটি "পোর্টেবল" সামগ্রী তৈরি করা সম্ভব করে যা অন্য পক্ষগুলি দ্বারা বিতরণ করা যেতে পারে, এবং এটি হল মূল দিক, এটি মূল সাইটের অখণ্ডতা এবং বৈশিষ্ট্য বজায় রাখে।

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

স্বাক্ষরিত এইচটিটিপি এক্সচেঞ্জগুলি ব্যবহারকারীদের জন্য দ্রুত সামগ্রী বিতরণ সক্ষম করে, আপনার শংসাপত্রের ব্যক্তিগত কী নিয়ন্ত্রণ না করেই একটি CDN-এর সুবিধাগুলি পাওয়া সম্ভব করে তোলে৷ এএমপি টিম এএমপি ইউআরএল উন্নত করতে এবং সার্চ ফলাফলে ক্লিকের গতি বাড়াতে Google সার্চ ফলাফল পৃষ্ঠাগুলিতে স্বাক্ষরিত HTTP এক্সচেঞ্জ ব্যবহার করার পরিকল্পনা করছে।

কিভাবে শুরু করবেন তার বিস্তারিত জানার জন্য কিনুকোর স্বাক্ষরিত HTTP এক্সচেঞ্জ পোস্ট দেখুন।

নির্মাণযোগ্য শৈলী শীট

নির্মাণযোগ্য স্টাইলশীট, Chrome 73-এ নতুন, আমাদেরকে পুনর্ব্যবহারযোগ্য শৈলী তৈরি এবং বিতরণ করার একটি নতুন উপায় দেয়, যা Shadow DOM ব্যবহার করার সময় বিশেষভাবে গুরুত্বপূর্ণ।

জাভাস্ক্রিপ্ট ব্যবহার করে স্টাইলশীট তৈরি করা সবসময় সম্ভব হয়েছে। document.createElement('style') ব্যবহার করে একটি <style> উপাদান তৈরি করুন। তারপর অন্তর্নিহিত CSSStyleSheet উদাহরণের একটি রেফারেন্স পেতে এর শীট সম্পত্তি অ্যাক্সেস করুন এবং শৈলী সেট করুন।

এই পদ্ধতি ব্যবহার করে স্টাইল শীট ফুলে যায়। আরও খারাপ, এটি স্টাইল না করা সামগ্রীর ফ্ল্যাশ ঘটায়। নির্মাণযোগ্য স্টাইলশীটগুলি ভাগ করা CSS শৈলীগুলিকে সংজ্ঞায়িত করা এবং প্রস্তুত করা সম্ভব করে এবং তারপর সেই শৈলীগুলিকে একাধিক শ্যাডো রুট বা নথিতে সহজেই এবং নকল ছাড়াই প্রয়োগ করে৷

একটি শেয়ার্ড CSSStyleSheet এর আপডেটগুলি সমস্ত রুটে প্রয়োগ করা হয় যেখানে এটি গৃহীত হয়েছে এবং শীটটি লোড হয়ে গেলে একটি স্টাইলশীট গ্রহণ করা দ্রুত এবং সিঙ্ক্রোনাস।

শুরু করা সহজ, CSSStyleSheet এর একটি নতুন উদাহরণ তৈরি করুন, তারপর স্টাইলশীট নিয়মগুলি আপডেট করতে replace বা replaceSync ব্যবহার করুন৷

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

জেসন মিলারের নির্মাণযোগ্য স্টাইলশীটগুলি দেখুন: আরও বিশদ বিবরণ এবং কোড নমুনার জন্য বিজোড় পুনর্ব্যবহারযোগ্য শৈলী পোস্ট!

এবং আরো!

এইগুলি বিকাশকারীদের জন্য Chrome 73-এর কয়েকটি পরিবর্তন, অবশ্যই, আরও অনেক কিছু আছে।

• matchAll() , স্ট্রিং প্রোটোটাইপে একটি নতুন নিয়মিত এক্সপ্রেশন ম্যাচিং পদ্ধতি, এবং সম্পূর্ণ মিল সম্বলিত একটি অ্যারে প্রদান করে।
• <link> উপাদানটি এখন imagesrcset সমর্থন করে এবং HTMLImageElement এর srcset এবং sizes বৈশিষ্ট্যগুলির সাথে মিল রাখার জন্য imagesizes বৈশিষ্ট্যগুলিকে সমর্থন করে।
• ব্লিঙ্কের শ্যাডো ব্লার ব্যাসার্ধ বাস্তবায়ন, এখন ফায়ারফক্স এবং সাফারির সাথে মেলে।
• Chrome-এর UI-এর জন্য ডার্ক মোড এখন Mac-এ সমর্থিত, এবং Windows সমর্থনের পথে। এছাড়াও, একটি CSS মিডিয়া ক্যোয়ারীতে কাজ আছে: prefers-color-scheme , যা ব্যবহারকারী সিস্টেমকে হালকা বা গাঢ় রঙের থিম ব্যবহার করার অনুরোধ করেছে কিনা তা সনাক্ত করতে ব্যবহার করা যেতে পারে। এর জন্য ট্র্যাকিং বাগ হল CSS prefers-color-scheme media বৈশিষ্ট্যের জন্য Chrome , এবং Firefox-এর জন্য সমর্থন যোগ করুন।

সাবস্ক্রাইব

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

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