একটি নতুন HTML <অনুমতি> এর জন্য একটি মূল ট্রায়াল উপাদান

Thomas Steiner

ওয়েব অ্যাপ্লিকেশানগুলিতে অবস্থান অ্যাক্সেসের মতো শক্তিশালী বৈশিষ্ট্যগুলি ব্যবহার করার জন্য অনুমতি চাওয়ার জন্য অনেকগুলি প্রয়োজনীয় পদ্ধতি রয়েছে৷ এই পদ্ধতিগুলি বেশ কয়েকটি চ্যালেঞ্জের সাথে আসে, যে কারণে Chrome অনুমতি দল একটি নতুন ঘোষণামূলক পদ্ধতি নিয়ে পরীক্ষা করছে: একটি উত্সর্গীকৃত HTML <permission> উপাদান৷ এই উপাদানটি Chrome 126 থেকে অরিজিন ট্রায়ালে রয়েছে এবং শেষ পর্যন্ত আমরা এটিকে মানসম্মত করার আশা করি।

অনুমতির অনুরোধের জন্য অপরিহার্য পদ্ধতি

যখন ওয়েব অ্যাপগুলির শক্তিশালী বৈশিষ্ট্যগুলিতে অ্যাক্সেসের প্রয়োজন হয়, তখন তাদের অনুমতি চাইতে হবে৷ উদাহরণ স্বরূপ, যখন Google Maps-এর জন্য জিওলোকেশন API ব্যবহার করে ব্যবহারকারীর অবস্থানের প্রয়োজন হয়, তখন ব্রাউজারগুলি ব্যবহারকারীকে অনুরোধ করবে, প্রায়ই সেই সিদ্ধান্তটি সঞ্চয় করার বিকল্প সহ। এটি পারমিশন স্পেসিফিকেশনে একটি সুনির্দিষ্ট ধারণা ।

প্রথম ব্যবহারে স্পষ্টভাবে অনুরোধ করুন বনাম স্পষ্টভাবে আগে থেকে অনুরোধ করুন

জিওলোকেশন এপিআই একটি শক্তিশালী এপিআই এবং এটি প্রথম ব্যবহারের পদ্ধতির উপর নিহিতভাবে জিজ্ঞাসা করার উপর নির্ভর করে। উদাহরণস্বরূপ, যখন একটি অ্যাপ navigator.geolocation.getCurrentPosition() পদ্ধতিতে কল করে, প্রথম কলে অনুমতি প্রম্পট স্বয়ংক্রিয়ভাবে পপ আপ হয়। আরেকটি উদাহরণ হল navigator.mediaDevices.getUserMedia() ।

অন্যান্য এপিআই, যেমন নোটিফিকেশন এপিআই বা ডিভাইস ওরিয়েন্টেশন এবং মোশন এপিআই , সাধারণত Notification.requestPermission() বা DeviceMotionEvent.requestPermission() এর মতো স্ট্যাটিক পদ্ধতির মাধ্যমে অনুমতির অনুরোধ করার একটি সুস্পষ্ট উপায় থাকে।

দ্রষ্টব্য: ঐতিহাসিকভাবে, অনুমতি পাওয়ার আরেকটি উপায়ের পরিকল্পনা ছিল, যেমন একটি সুস্পষ্ট navigator.permissions.request() পদ্ধতি, কিন্তু স্পেসিফিকেশনের সংগ্রহস্থলে ইস্যু #83 -এ আলোচনার পরে এটি অনুমতি API থেকে সরিয়ে দেওয়া হয়েছিল। এই পদ্ধতিগুলির মধ্যে "সঠিক" পদ্ধতির প্রশ্ন (ব্যবহারের উপর স্পষ্টভাবে অনুরোধ করা এবং স্পষ্টভাবে অনুমতির অনুরোধ করা) একটি স্পষ্ট উত্তর ছাড়াই একটি আলোচিত বিষয়।

অনুমতি চাওয়ার জন্য অপরিহার্য পদ্ধতির সাথে চ্যালেঞ্জ

অনুমতি স্প্যাম

অতীতে, ওয়েবসাইটগুলি navigator.mediaDevices.getUserMedia() বা Notification.requestPermission() এর মতো পদ্ধতিগুলিকে কল করতে পারত, তবে একটি ওয়েবসাইট লোড হওয়ার সাথে সাথে navigator.geolocation.getCurrentPosition() কেও কল করতে পারত। ব্যবহারকারী ওয়েবসাইটের সাথে ইন্টারঅ্যাক্ট করার আগে একটি অনুমতি প্রম্পট পপ আপ হবে। এটি কখনও কখনও অনুমতি স্প্যাম হিসাবে বর্ণনা করা হয় এবং উভয় পন্থাকে প্রভাবিত করে, প্রথম ব্যবহারে স্পষ্টভাবে অনুরোধ করার পাশাপাশি স্পষ্টভাবে অনুরোধ করা।

ব্রাউজার প্রশমন এবং ব্যবহারকারী অঙ্গভঙ্গি প্রয়োজনীয়তা

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

আরেকটি প্রশমন হল প্রম্পট অপব্যবহার প্রশমন যোগ করা, যেমন শুরু করার জন্য সম্পূর্ণরূপে অবরুদ্ধ বৈশিষ্ট্যগুলি, বা একটি নন-মডেল, কম অনুপ্রবেশকারী পদ্ধতিতে অনুমতি প্রম্পট দেখানো।

অনুমতি প্রাসঙ্গিককরণ

আরেকটি চ্যালেঞ্জ, বিশেষ করে বড় স্ক্রিনে, অনুমতি প্রম্পটটি যেভাবে প্রদর্শিত হয় তা হল: মৃত্যুর রেখার উপরে, অর্থাৎ, অ্যাপটি যে ব্রাউজার উইন্ডোতে আঁকতে পারে তার বাইরে। ব্যবহারকারীরা তাদের ব্রাউজার উইন্ডোর শীর্ষে থাকা প্রম্পটটি মিস করবেন যখন তারা কেবল উইন্ডোর নীচে একটি বোতামে ক্লিক করবেন তা শোনার কথা নয়। যখন ব্রাউজার স্প্যাম প্রশমিত হয় তখন এই সমস্যাটি প্রায়ই বেড়ে যায়।

কোন সহজ পূর্বাবস্থায়ন

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

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

একটি ঘোষণামূলক <permission> উপাদান

এই পোস্টে বর্ণিত চ্যালেঞ্জ মোকাবেলা করার জন্য, Chrome অনুমতি দল একটি নতুন HTML উপাদান, <permission> -এর জন্য একটি অরিজিন ট্রায়াল চালু করেছে। এই উপাদানটি বিকাশকারীদের ঘোষণামূলকভাবে ওয়েবসাইটগুলিতে উপলব্ধ শক্তিশালী বৈশিষ্ট্যগুলির একটি উপসেট ব্যবহার করার অনুমতি দিতে দেয়৷ এর সহজতম আকারে, আপনি নিম্নলিখিত উদাহরণ হিসাবে এটি ব্যবহার করেন:

<permission type="camera" />

দ্রষ্টব্য: পৃষ্ঠা এমবেডেড পারমিশন কন্ট্রোল (PEPC, উচ্চারিত "PEP-C") হল বৃহত্তর হোলিস্টিক প্রোগ্রামের নাম যাতে বিষয়বস্তু এলাকায় আরও নিয়ন্ত্রণ এম্বেড করা যায়। এই কারণে আপনি মাঝে মাঝে দেখতে পারেন যে লোকেরা <permission> কে PEPC হিসাবে উল্লেখ করে।

এটি এখনও সক্রিয়ভাবে বিতর্ক করা হচ্ছে যে <permission> একটি অকার্যকর উপাদান হওয়া উচিত কিনা। ভ্যায়েড এলিমেন্ট হল এইচটিএমএল-এর একটি স্ব-ক্লোজিং এলিমেন্ট যার কোনো চাইল্ড নোড থাকতে পারে না, যার মানে এইচটিএমএল-এ এর শেষ ট্যাগ নাও থাকতে পারে।

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

type অ্যাট্রিবিউটে আপনার অনুরোধ করা অনুমতিগুলির একটি স্থান-বিচ্ছিন্ন তালিকা রয়েছে। এই লেখার সময়, অনুমোদিত মানগুলি হল 'camera' , 'microphone' , এবং camera microphone (স্পেস দ্বারা পৃথক)। এই উপাদানটি ডিফল্টরূপে বেয়ারবোন ব্যবহারকারী এজেন্ট স্টাইলিং সহ বোতামগুলির অনুরূপ রেন্ডার করে।

type-ext অ্যাট্রিবিউট

কিছু অনুমতির জন্য যা অতিরিক্ত প্যারামিটারের জন্য অনুমতি দেয়, type-ext অ্যাট্রিবিউট স্থান-বিচ্ছিন্ন কী-মান জোড়া গ্রহণ করে, যেমন, ভূ-অবস্থান অনুমতির জন্য precise:true ।

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

বোতামের পাঠ্যটি ব্রাউজার দ্বারা সরবরাহ করা হয়েছে এবং এটি সামঞ্জস্যপূর্ণ হওয়ার জন্য বোঝানো হয়েছে, তাই এটি সরাসরি কাস্টমাইজ করা যাবে না। ব্রাউজার নথির উত্তরাধিকারসূত্রে প্রাপ্ত ভাষা বা প্যারেন্ট এলিমেন্ট চেইন বা একটি ঐচ্ছিক lang এট্রিবিউটের উপর ভিত্তি করে পাঠ্যের ভাষা পরিবর্তন করে। এর মানে হল যে ডেভেলপারদের নিজেরাই <permission> উপাদান স্থানীয়করণ করতে হবে না। যদি <permission> উপাদানটি উৎপত্তি ট্রায়ালের পর্যায় অতিক্রম করে, নমনীয়তা বাড়ানোর জন্য প্রতিটি অনুমতি প্রকারের জন্য বেশ কয়েকটি স্ট্রিং বা আইকন সমর্থিত হতে পারে। আপনি যদি <permission> উপাদান ব্যবহার করতে আগ্রহী হন এবং একটি নির্দিষ্ট স্ট্রিং বা আইকনের প্রয়োজন হয়, তাহলে যোগাযোগ করুন !

দ্রষ্টব্য: অরিজিন ট্রায়ালের সময়, lang অ্যাট্রিবিউটটি সমর্থিত হবে না। পরিবর্তে, ব্রাউজারটি যে ভাষাতে সেট করা আছে সেটি ব্যবহার করা হবে।

আচরণ

ব্যবহারকারী যখন <permission> উপাদানের সাথে ইন্টারঅ্যাক্ট করে, তখন তারা বিভিন্ন ধাপে ঘুরতে পারে:

• যদি তারা আগে একটি বৈশিষ্ট্যের অনুমতি না দিয়ে থাকে, তাহলে তারা প্রতিটি দর্শনে এটির অনুমতি দিতে পারে, বা বর্তমান দর্শনের জন্য অনুমতি দিতে পারে।

  

• যদি তারা আগে এই বৈশিষ্ট্যটির অনুমতি দিয়ে থাকে তবে তারা এটিকে অনুমতি দেওয়া চালিয়ে যেতে পারে বা এটির অনুমতি দেওয়া বন্ধ করতে পারে।

  

• যদি তারা আগে একটি বৈশিষ্ট্য অস্বীকৃত করে থাকে, তাহলে তারা এটির অনুমতি না দেওয়া চালিয়ে যেতে পারে বা এইবার অনুমতি দিতে পারে।

  

<permission> উপাদানের পাঠ্য স্বয়ংক্রিয়ভাবে স্থিতির উপর ভিত্তি করে আপডেট হয়। উদাহরণস্বরূপ, যদি একটি বৈশিষ্ট্য ব্যবহার করার অনুমতি দেওয়া হয়, তবে পাঠ্যটি পরিবর্তন করে বলে যে বৈশিষ্ট্যটি অনুমোদিত। প্রথমে অনুমতি দেওয়ার প্রয়োজন হলে, পাঠ্য পরিবর্তন করে ব্যবহারকারীকে বৈশিষ্ট্যটি ব্যবহার করার জন্য আমন্ত্রণ জানানো হয়। দুটি অবস্থা দেখতে নিচের স্ক্রিনশটের সাথে আগের স্ক্রিনশটের তুলনা করুন।

সিএসএস ডিজাইন

শক্তিশালী ক্ষমতা অ্যাক্সেস করার জন্য ব্যবহারকারীরা সহজেই বোতামটিকে একটি পৃষ্ঠ হিসাবে চিনতে পারে তা নিশ্চিত করার জন্য, <permission> উপাদানটির স্টাইলিং সীমাবদ্ধ। যদি স্টাইলিং বিধিনিষেধগুলি আপনার ব্যবহারের ক্ষেত্রে কাজ না করে, আমরা কীভাবে এবং কেন তা জানতে চাই ! যদিও সমস্ত স্টাইলিং প্রয়োজন মিটমাট করা যায় না, আমরা অরিজিন ট্রায়ালের পরে <permission> উপাদানটির আরও স্টাইলিং করার অনুমতি দেওয়ার নিরাপদ উপায় আবিষ্কার করার আশা করছি। নিম্নলিখিত সারণীতে কিছু বৈশিষ্ট্যের বিশদ বিবরণ রয়েছে যেগুলির উপর বিধিনিষেধ বা বিশেষ নিয়ম প্রযোজ্য। কোনো নিয়ম লঙ্ঘন করা হলে, <permission> উপাদানটি নিষ্ক্রিয় করা হবে এবং এর সাথে ইন্টারঅ্যাক্ট করা যাবে না। এটির সাথে ইন্টারঅ্যাক্ট করার যেকোনো প্রচেষ্টার ফলে জাভাস্ক্রিপ্টের সাথে ধরা যেতে পারে এমন ব্যতিক্রম হবে। ত্রুটি বার্তায় শনাক্ত লঙ্ঘন সম্পর্কে আরও বিশদ থাকবে।

সম্পত্তি	নিয়ম
color , background-color	যথাক্রমে পাঠ্য এবং পটভূমির রঙ সেট করতে ব্যবহার করা যেতে পারে। দুটি রঙের মধ্যে বৈসাদৃশ্য স্পষ্টভাবে সুস্পষ্ট পাঠ্যের জন্য যথেষ্ট হওয়া প্রয়োজন (কমপক্ষে 3 এর বৈসাদৃশ্য অনুপাত)। আলফা চ্যানেল 1 হতে হবে।
font-size , zoom	small এবং xxxlarge এর সমমানের মধ্যে সেট করতে হবে। উপাদানটি অন্যথায় নিষ্ক্রিয় করা হবে। font-size কম্পিউট করার সময় জুম বিবেচনা করা হবে।
outline-offset	নেতিবাচক মান 0 এ সংশোধন করা হবে।
margin (সমস্ত)	নেতিবাচক মান 0 এ সংশোধন করা হবে।
font-weight	200 এর নিচের মান 200 এ সংশোধন করা হবে।
font-style	normal এবং italic ব্যতীত অন্য মানগুলিকে সংশোধন করে normal করা হবে।
word-spacing	0.5em এর বেশি মান 0.5em এ সংশোধন করা হবে। 0 নিচের মান 0 এ সংশোধন করা হবে।
display	inline-block ছাড়া অন্য মান এবং inline-block জন্য none সংশোধন করা হবে না।
letter-spacing	0.2em এর বেশি মান 0.2em এ সংশোধন করা হবে। -0.05em এর নিচের মানগুলিকে -0.05em এ সংশোধন করা হবে।
min-height	1em এর একটি ডিফল্ট মান থাকবে। প্রদান করা হলে, ডিফল্ট এবং প্রদত্ত মানগুলির মধ্যে সর্বাধিক গণনা করা মান বিবেচনা করা হবে৷
max-height	3em এর একটি ডিফল্ট মান থাকবে। প্রদান করা হলে, ডিফল্ট এবং প্রদত্ত মানগুলির মধ্যে ন্যূনতম গণনা করা মান বিবেচনা করা হবে।
min-width	fit-content একটি ডিফল্ট মান থাকবে। প্রদান করা হলে, ডিফল্ট এবং প্রদত্ত মানগুলির মধ্যে সর্বাধিক গণনা করা মান বিবেচনা করা হবে৷
max-width	তিনগুণ fit-content একটি ডিফল্ট মান থাকবে। প্রদান করা হলে, ডিফল্ট এবং প্রদত্ত মানগুলির মধ্যে ন্যূনতম গণনা করা মান বিবেচনা করা হবে।
padding-top	height auto সেট করা থাকলে শুধুমাত্র কার্যকর হবে৷ এই ক্ষেত্রে, 1em এর বেশি মান 1em এ সংশোধন করা হবে এবং padding-bottom padding-top মান সেট করা হবে।
padding-left	width auto সেট করা থাকলে শুধুমাত্র কার্যকর হবে৷ এই ক্ষেত্রে, 5em এর বেশি মানগুলি 5em এ সংশোধন করা হবে এবং padding-right padding-left.
transform	ভিজ্যুয়াল এফেক্ট বিকৃত করার অনুমতি দেওয়া হবে না। আপাতত, আমরা শুধুমাত্র 2D অনুবাদ এবং আনুপাতিক আপ-স্কেলিং গ্রহণ করি।

নিম্নলিখিত CSS বৈশিষ্ট্য স্বাভাবিক হিসাবে ব্যবহার করা যেতে পারে:

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name aspect-ratio
• border (এবং সমস্ত border-* বৈশিষ্ট্য)
• clear
• color-scheme
• contain
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-*
• flex-*
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline-* ( outline-offset জন্য আগে উল্লেখ করা ব্যতিক্রম সহ)
• overflow-anchor
• overscroll-behavior-*
• page
• position
• position-anchor
• content-visibility
• right
• scroll-margin-*
• scroll-padding-*
• text-spacing-trim
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

অতিরিক্তভাবে, সমস্ত যৌক্তিকভাবে সমতুল্য বৈশিষ্ট্য ব্যবহার করা যেতে পারে (উদাহরণস্বরূপ, inline-size width সমতুল্য), তাদের সমতুল্যের মতো একই নিয়ম অনুসরণ করে।

ছদ্ম-শ্রেণী

দুটি বিশেষ ছদ্ম-শ্রেণী রয়েছে যা রাজ্যের উপর ভিত্তি করে <permission> উপাদানটিকে স্টাইল করার অনুমতি দেয়:

• :granted : অনুমতি দেওয়া হলে :granted ছদ্ম-শ্রেণী বিশেষ স্টাইলিং করার অনুমতি দেয়।
• :invalid : :invalid ছদ্ম-শ্রেণি বিশেষ স্টাইল করার অনুমতি দেয় যখন উপাদানটি একটি অবৈধ অবস্থায় থাকে, উদাহরণস্বরূপ, যখন এটি একটি ক্রস-অরিজিন আইফ্রেমে পরিবেশিত হয়।

দ্রষ্টব্য: অরিজিন ট্রায়ালের সময়, :invalid ছদ্ম-শ্রেণী সমর্থিত হবে না।

permission {
  background-color: green;
}

permission:granted {
  background-color: light-green;
}

/* Not supported during the origin trial. */
permission:invalid {
  background-color: gray;
}

জাভাস্ক্রিপ্ট ইভেন্ট

<permission> উপাদানটি পারমিশন এপিআই এর সাথে একসাথে ব্যবহার করার জন্য বোঝানো হয়েছে। এখানে বেশ কয়েকটি ইভেন্ট রয়েছে যা শোনা যেতে পারে:

• onpromptdismiss : এই ইভেন্টটি বরখাস্ত করা হয় যখন উপাদান দ্বারা ট্রিগার করা অনুমতি প্রম্পট ব্যবহারকারীর দ্বারা বাতিল করা হয় (উদাহরণস্বরূপ বন্ধ বোতামে ক্লিক করে বা প্রম্পটের বাইরে ক্লিক করে)।

  দ্রষ্টব্য: অরিজিন ট্রায়ালের সময়, এটিকে বলা হবে ondismiss , কিন্তু চূড়ান্ত নাম হবে onpromptdismiss । আপনি 'ondismiss' in HTMLPermissionElement.prototype ব্যবহার করে সমর্থিত ইভেন্টের নাম বৈশিষ্ট্য-শনাক্ত করতে পারেন।

• onpromptaction : এই ইভেন্টটি তখন বরখাস্ত হয় যখন এলিমেন্ট দ্বারা ট্রিগার করা অনুমতি প্রম্পটটি ব্যবহারকারীর দ্বারা প্রম্পটে কিছু পদক্ষেপ নেওয়ার দ্বারা সমাধান করা হয়। এর মানে এই নয় যে অনুমতির অবস্থা পরিবর্তিত হয়েছে, ব্যবহারকারী এমন একটি পদক্ষেপ নিয়ে থাকতে পারে যা স্থিতাবস্থা বজায় রাখে (যেমন অনুমতি দেওয়া চালিয়ে যাওয়া)।

  দ্রষ্টব্য: অরিজিন ট্রায়ালের সময়, এটিকে বলা হবে onresolve , কিন্তু চূড়ান্ত নাম হবে onpromptaction । আপনি 'onresolve' in HTMLPermissionElement.prototype ব্যবহার করে সমর্থিত ইভেন্টের নামটি বৈশিষ্ট্য-শনাক্ত করতে পারেন।

• onvalidationstatuschange : যখন উপাদানটি "valid" থেকে "invalid" এ স্যুইচ করে তখন এই ইভেন্টটি বরখাস্ত হয়। উপাদানটি "valid" বলে বিবেচিত হয় যখন ব্রাউজারটি সিগন্যালের অখণ্ডতা বিশ্বাস করে যদি ব্যবহারকারী এটিতে ক্লিক করে এবং অন্যথায় "invalid" , উদাহরণস্বরূপ, যখন উপাদানটি অন্যান্য HTML সামগ্রী দ্বারা আংশিকভাবে বন্ধ থাকে৷

দ্রষ্টব্য: মূল বিচার চলাকালীন, এই ইভেন্টটি বরখাস্ত করা হবে না।

আপনি এই ইভেন্টগুলির জন্য সরাসরি HTML কোডে ( <permission type="…" onpromptdismiss="alert('The prompt was dismissed');" /> ), অথবা <permission> এ addEventListener() ব্যবহার করে ইভেন্ট শ্রোতাদের নিবন্ধন করতে পারেন। উপাদান, নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });

  // Run the initial check.
  if (permissionStatus.state === "granted") {
    useCamera();
  }
</script>

বৈশিষ্ট্য সনাক্তকরণ

যদি একটি ব্রাউজার একটি এইচটিএমএল উপাদান সমর্থন না করে, এটি এটি প্রদর্শন করবে না। এর মানে হল যে যদি আপনার HTML কোডে <permission> উপাদান থাকে, ব্রাউজার এটি না জানলে কিছুই হবে না। আপনি এখনও JavaScript ব্যবহার করে সমর্থন সনাক্ত করতে চাইতে পারেন, উদাহরণস্বরূপ, একটি নিয়মিত <button> -এর একটি ক্লিকের মাধ্যমে ট্রিগার করা একটি অনুমতি প্রম্পট তৈরি করতে।

if ('HTMLPermissionElement' in window) {
  // The `<permission>` element is supported.
}

মূল বিচার

প্রকৃত ব্যবহারকারীদের সাথে আপনার সাইটে <permission> উপাদানটি ব্যবহার করে দেখতে, অরিজিন ট্রায়ালের জন্য সাইন আপ করুন । অরিজিন ট্রায়াল ব্যবহার করার জন্য আপনার সাইটকে কীভাবে প্রস্তুত করতে হয় তার নির্দেশাবলীর জন্য মূল ট্রায়ালের সাথে শুরু করুন পড়ুন। অরিজিন ট্রায়াল Chrome 126 থেকে 131 (ফেব্রুয়ারি 19, 2025) পর্যন্ত চলবে।

ডেমো

ডেমোটি অন্বেষণ করুন এবং গিটহাবে সোর্স কোডটি দেখুন। এখানে একটি সমর্থনকারী ব্রাউজারে অভিজ্ঞতার একটি স্ক্রিনশট রয়েছে৷

প্রতিক্রিয়া

আপনার ব্যবহারের ক্ষেত্রে <permission> কীভাবে কাজ করে তা আমরা আপনার কাছ থেকে শুনতে চাই। সংগ্রহস্থলের যেকোন একটি ইস্যুতে বিনা দ্বিধায় সাড়া দিন বা একটি নতুন ফাইল করুন। <permission> উপাদানের জন্য রেপোতে সর্বজনীন সংকেত আমাদের এবং অন্যান্য ব্রাউজারকে জানাবে যে আপনি এতে আগ্রহী।

FAQ

• পারমিশন এপিআই এর সাথে পেয়ার করা নিয়মিত <button> থেকে এটি কীভাবে ভাল? একটি <button> ক্লিক একটি ব্যবহারকারীর অঙ্গভঙ্গি, কিন্তু ব্রাউজারগুলির কাছে এটি যাচাই করার কোন উপায় নেই যে এটি অনুমতি চাওয়ার অনুরোধের সাথে সংযুক্ত। ব্যবহারকারী যদি <permission> এ ক্লিক করে থাকেন, তাহলে ব্রাউজার নিশ্চিত হতে পারে যে ক্লিকটি অনুমতির অনুরোধের সাথে সম্পর্কিত। এটি ব্রাউজারটিকে প্রবাহকে সহজতর করার অনুমতি দেয় যা অন্যথায় অনেক বেশি ঝুঁকিপূর্ণ হবে। উদাহরণস্বরূপ, ব্যবহারকারীকে সহজেই একটি অনুমতির ব্লকিং পূর্বাবস্থায় ফিরিয়ে আনার অনুমতি দেওয়া।
• অন্য ব্রাউজার যদি <permission> উপাদান সমর্থন না করে? <permission> উপাদানটি একটি প্রগতিশীল বর্ধন হিসাবে ব্যবহার করা যেতে পারে। অ-সমর্থক ব্রাউজারগুলিতে, একটি ক্লাসিক অনুমতি প্রবাহ ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, একটি নিয়মিত <button> ক্লিকের উপর ভিত্তি করে। অনুমতি দল একটি পলিফিল কাজ করছে. GitHub রেপো প্রস্তুত হলে তা সূচিত করার জন্য তারকাচিহ্নিত করুন।
• এই অন্যান্য ব্রাউজার বিক্রেতাদের সাথে আলোচনা করা হয়েছিল? একটি ব্রেকআউট সেশনে 2023 সালে W3C TPAC-তে <permission> উপাদানটি সক্রিয়ভাবে আলোচনা করা হয়েছিল। আপনি পাবলিক সেশন নোট পড়তে পারেন. ক্রোম টিম উভয় বিক্রেতার কাছ থেকে আনুষ্ঠানিক স্ট্যান্ডার্ড পজিশনও চেয়েছে, সম্পর্কিত লিঙ্ক বিভাগ দেখুন। <permission> উপাদানটি অন্যান্য ব্রাউজারগুলির সাথে আলোচনার একটি চলমান বিষয় এবং আমরা এটিকে প্রমিত করার আশা করছি।
• এই আসলে একটি অকার্যকর উপাদান হওয়া উচিত? এটি এখনও সক্রিয়ভাবে বিতর্ক করা হচ্ছে যে <permission> একটি অকার্যকর উপাদান হওয়া উচিত কিনা। আপনার মতামত থাকলে, ইস্যুতে চিম ইন করুন।

সম্পর্কিত লিংক

• ব্যাখ্যাকারী
• ওয়েবকিট স্ট্যান্ডার্ড অবস্থান
• মজিলা স্ট্যান্ডার্ড পজিশন

স্বীকৃতি

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