এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

<ভূ-অবস্থান> HTML উপাদানের সাথে পরিচয় করিয়ে দেওয়া হচ্ছে

Mari Viana

Minh Le

Thomas Steiner

প্রকাশিত: ১৩ জানুয়ারী, ২০২৬

Chrome 144 থেকে আপনি নতুন <geolocation> HTML উপাদান ব্যবহার করতে পারেন। এই উপাদানটি সাইটগুলি ব্যবহারকারীর অবস্থান ডেটা কীভাবে অনুরোধ করে তার একটি বড় পরিবর্তনের প্রতিনিধিত্ব করে - স্ক্রিপ্ট-ট্রিগার করা অনুমতি থেকে সরে যাওয়া একটি ঘোষণামূলক, ব্যবহারকারী-কর্ম-ভিত্তিক অভিজ্ঞতার দিকে পরিচালিত করে। এটি অনুমতির অবস্থা এবং ত্রুটিগুলি পরিচালনা করার জন্য প্রয়োজনীয় বয়লারপ্লেট কোড হ্রাস করে এবং ব্যবহারকারীর অভিপ্রায়ের একটি শক্তিশালী সংকেত প্রদান করে, যা ব্রাউজার হস্তক্ষেপ (যেমন নীরব ব্লক) এড়াতে সাহায্য করে।

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

জেনেরিক `<permission>` থেকে নির্দিষ্ট `<geolocation>` পর্যন্ত

<geolocation> উপাদানটি হল Page-Embedded Permission Control উদ্যোগের সর্বশেষ বিবর্তন, যেখানে এটি প্রাথমিকভাবে একটি জেনেরিক <permission> উপাদান হিসেবে প্রস্তাব করা হয়েছিল যার একটি type অ্যাট্রিবিউট রয়েছে ( মূল ব্যাখ্যাকারী দেখুন)। টাইপ অ্যাট্রিবিউটের মান (উদাহরণস্বরূপ, "geolocation" ) অনুরোধকৃত অনুমতির ধরণ নির্ধারণ করবে। উদাহরণস্বরূপ, প্রাথমিক প্রস্তাবে ক্যামেরা, মাইক্রোফোন এবং ভূ-অবস্থানের মতো মান অন্তর্ভুক্ত রয়েছে।

ধারণার বৈধতা

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

এই অরিজিন ট্রায়ালের ফলাফলগুলি এই মূল ধারণার বৈধতাকে সমর্থন করেছে:

জুম ব্যবহারকারীদের পুনরুদ্ধারের মাধ্যমে গাইড করার জন্য এই উপাদানটি ব্যবহার করে ক্যামেরা বা মাইক্রোফোন ক্যাপচার ত্রুটি (যেমন সিস্টেম-লেভেল ব্লকার) ৪৬.৯% হ্রাস পেয়েছে বলে জানিয়েছে।
Immobiliare.it সফল ভূ-অবস্থান প্রবাহে ২০% বৃদ্ধি পেয়েছে।
ZapImóveis ব্যবহারকারীদের "পূর্বে অবরুদ্ধ" অবস্থা থেকে পুনরুদ্ধারের ক্ষেত্রে ৫৪.৪% সাফল্যের হার লক্ষ্য করেছে যখন উপাদানটি উপস্থাপন করা হয়েছিল।

নকশার পুনঃসংজ্ঞা

ধারণাটি সফল প্রমাণিত হলেও, বাস্তবায়নের জন্য পরিমার্জন প্রয়োজন ছিল। ব্রাউজার বিক্রেতাদের কাছ থেকে প্রতিক্রিয়া - যার মধ্যে রয়েছে অ্যাপল (সাফারি/ওয়েবকিট) এবং মজিলা (ফায়ারফক্স) - ইঙ্গিত দেয় যে "এক-আকার-সকলের জন্য উপযুক্ত" উপাদানটি অনন্য ক্ষমতা আচরণের ক্ষেত্রে উল্লেখযোগ্য জটিলতা তৈরি করেছে।

ফলস্বরূপ, আমরা একটি জেনেরিক অনুমতি নিয়ন্ত্রণ থেকে লক্ষ্যবস্তু, ক্ষমতা-নির্দিষ্ট উপাদানগুলিতে রূপান্তরিত হয়েছি ( WICG আলোচনা দেখুন)। <geolocation> উপাদানটি এই বিশেষায়িত নিয়ন্ত্রণগুলির মধ্যে প্রথম চালু করা হয়েছে। এর পরে, আমরা একটি ডেডিকেটেড <usermedia> উপাদান (ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেসের জন্য) তৈরি করছি, যার নিজস্ব পৃথক অরিজিন ট্রায়াল রয়েছে।

মূল প্রস্তাবনার বিপরীতে, যা অনুমতির অবস্থা (অর্থাৎ অনুমতি দিন বা অস্বীকার করুন) পরিচালনার উপর দৃষ্টি নিবদ্ধ করেছিল, এই নতুন উপাদানগুলি ডেটা মধ্যস্থতাকারী হিসাবে কাজ করে, বেশিরভাগ ব্যবহারের ক্ষেত্রে সরাসরি জাভাস্ক্রিপ্ট API কল করার প্রয়োজনীয়তা কার্যকরভাবে প্রতিস্থাপন করে।

এই টেবিলটি জিওলোকেশন জাভাস্ক্রিপ্ট এপিআই, `<permission>` এলিমেন্ট এবং নতুন `<geolocation>` এলিমেন্টের মধ্যে পার্থক্য বর্ণনা করে।
বৈশিষ্ট্য	জিওলোকেশন জেএস এপিআই	HTML এলিমেন্ট	HTML এলিমেন্ট
অনুমতি প্রম্পটের জন্য ইভেন্ট ট্রিগার করা হচ্ছে	আবশ্যকীয় স্ক্রিপ্ট এক্সিকিউশন ( `getCurrentPosition` )	ব্যবহারকারী ব্রাউজার-নিয়ন্ত্রিত উপাদান	ব্যবহারকারী ব্রাউজার-নিয়ন্ত্রিত উপাদান
ব্রাউজারের ভূমিকা	রাজ্যের উপর ভিত্তি করে প্রম্পট সিদ্ধান্ত নেয়	অনুমতি মধ্যস্থতাকারী হিসেবে কাজ করে	ডেটা মধ্যস্থতাকারী হিসেবে কাজ করে
সাইটের দায়িত্ব	জাভাস্ক্রিপ্ট এপিআই ম্যানুয়ালি কল করুন, কলব্যাক পরিচালনা করুন এবং অনুমতি ত্রুটি পরিচালনা করুন	অনুমতি মঞ্জুর হয়ে গেলে `geolocation` API বাস্তবায়ন করুন	`location` ইভেন্ট শুনুন
মূল লক্ষ্য	বেসিক লোকেশন অ্যাক্সেস	অনুমতি অনুরোধ	অনুমতির অনুরোধ এবং অবস্থান অ্যাক্সেস

`<geolocation>` এলিমেন্ট কেন ব্যবহার করবেন?

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

<geolocation> উপাদানটি ব্যবহারকারীর অনুরোধগুলি কঠোরভাবে শুরু করার মাধ্যমে প্রসঙ্গ ব্যবধানের সমস্যার সমাধান করে। এই মডেলটি তিনটি স্বতন্ত্র সুবিধা প্রদান করে:

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

বাস্তবায়ন

এলিমেন্টটি ইন্টিগ্রেট করার জন্য জাভাস্ক্রিপ্ট এপিআই-এর তুলনায় উল্লেখযোগ্যভাবে কম বয়লারপ্লেট প্রয়োজন হয়। কলব্যাক এবং এরর স্টেট ম্যানুয়ালি পরিচালনা করার পরিবর্তে, ডেভেলপাররা পৃষ্ঠায় ট্যাগটি যোগ করতে পারেন এবং onlocation ইভেন্টটি শুনতে পারেন।

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

মূল বৈশিষ্ট্য এবং বৈশিষ্ট্য

autolocate : উপাদানটি লোড হওয়ার সময় স্বয়ংক্রিয়ভাবে অবস্থান পুনরুদ্ধারের চেষ্টা করুন, তবে কেবলমাত্র যদি বর্তমান অনুমতির অবস্থা ইতিমধ্যেই এটির অনুমতি দেয় (অপ্রত্যাশিত প্রম্পট প্রতিরোধ করে)।
accuracymode : স্ট্যান্ডার্ড enableHighAccuracy বিকল্পের সাথে সঙ্গতিপূর্ণ "precise" বা "approximate" এর একটি মান গ্রহণ করে।
watch : watchPosition() এর সাথে মানানসই আচরণ পরিবর্তন করে, ব্যবহারকারীর নড়াচড়ার সাথে সাথে ক্রমাগত ইভেন্টগুলি চালায়।
position : DOM উপাদানের উপর একটি পঠনযোগ্য বৈশিষ্ট্য যা GeolocationPosition অবজেক্টটি উপলব্ধ হলে ফেরত দেয়।
error : অনুরোধ ব্যর্থ হলে একটি পঠনযোগ্য সম্পত্তি যা একটি GeolocationPositionError ফেরত দেয়।

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

স্টাইলিং সীমাবদ্ধতা

ব্যবহারকারীর আস্থা নিশ্চিত করতে এবং প্রতারণামূলক ডিজাইন প্যাটার্ন প্রতিরোধ করতে, <geolocation> উপাদানটি পূর্ববর্তী <permission> উপাদান পরীক্ষার মতো নির্দিষ্ট স্টাইলিং বিধিনিষেধ প্রয়োগ করে। আপনি তাদের সাইটের থিমের সাথে মেলে বোতামটি কাস্টমাইজ করতে পারেন, তবে ব্রাউজারটি বেশ কয়েকটি রক্ষণাবেক্ষণ প্রয়োগ করে:

স্পষ্টতা: অনুমতির অনুরোধ সর্বদা পঠনযোগ্য তা নিশ্চিত করার জন্য পর্যাপ্ত বৈসাদৃশ্য (সাধারণত কমপক্ষে 3:1 অনুপাত) জন্য পাঠ্য এবং পটভূমির রঙ পরীক্ষা করা হয়। অতিরিক্তভাবে, উপাদানটি প্রতারণামূলকভাবে স্বচ্ছ না হওয়ার জন্য আলফা চ্যানেল (অস্বচ্ছতা) 1 এ সেট করতে হবে।
আকার এবং ব্যবধান: এই উপাদানটি প্রস্থ, উচ্চতা এবং ফন্টের আকারের জন্য সর্বনিম্ন এবং সর্বাধিক সীমা নির্ধারণ করে। উপাদানটি দৃশ্যত অস্পষ্ট হওয়া বা প্রতারণামূলকভাবে অন্যান্য সামগ্রীকে ওভারল্যাপ করা থেকে বিরত রাখার জন্য নেতিবাচক মার্জিন বা আউটলাইন অফসেটগুলি অক্ষম করা হয়েছে।
ভিজ্যুয়াল ইন্টিগ্রিটি: বিকৃত প্রভাব সীমিত—উদাহরণস্বরূপ, ট্রান্সফর্ম শুধুমাত্র 2D অনুবাদ এবং আনুপাতিক স্কেলিং সমর্থন করে।
CSS pseudo-classes: এই উপাদানটি স্টেট-ভিত্তিক স্টাইলিং সমর্থন করে, যেমন :granted (যখন অনুমতি সক্রিয় থাকে)।

প্রগতিশীল বর্ধন কৌশল

আমরা বুঝতে পারি যে নতুন HTML উপাদানগুলিকে মানসম্মত করা একটি ধীরে ধীরে প্রক্রিয়া। তবে, ডেভেলপাররা আজই অন্যান্য ব্রাউজারের ব্যবহারকারীদের জন্য সামঞ্জস্যতা ভঙ্গ না করে <geolocation> উপাদানটি গ্রহণ করতে পারেন।

এই এলিমেন্টটি সুন্দরভাবে ডিগ্রেড করার জন্য ডিজাইন করা হয়েছে। যেসব ব্রাউজার <geolocation> এলিমেন্ট সমর্থন করে না তারা এটিকে [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) হিসেবে বিবেচনা করবে। গুরুত্বপূর্ণ বিষয় হল, যদি ব্রাউজারটি এলিমেন্টটিকে সমর্থন করে, তাহলে এটি চিলড্রেন রেন্ডার করবে না। এটি সমর্থিত এবং অসমর্থিত উভয় ব্রাউজারেই HTML পরিষ্কারভাবে লেখার সুযোগ করে দেয়।

কাস্টম ফলব্যাক প্যাটার্ন

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

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

পলিফিল

আপনি npm থেকে একটি পলিফিল ইনস্টল করতে পারেন যা স্বচ্ছভাবে এবং স্বয়ংক্রিয়ভাবে <geolocation> এর সমস্ত ঘটনাকে একটি কাস্টম উপাদান দিয়ে প্রতিস্থাপন করে <geo-location> (ড্যাশটি লক্ষ্য করুন) যা নিয়মিত JavaScript Geolocation API দ্বারা সমর্থিত। যদি ব্রাউজার <geolocation> উপাদান সমর্থন করে, তাহলে পলিফিলটি কেবল কিছুই করে না। এই ডেমোটি দেখুন যা পলিফিলটি কার্যকরভাবে দেখায়। সোর্স কোডটি GitHub-এ রয়েছে।

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

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

আরও জটিল যুক্তির জন্য, আপনি ইন্টারফেস ব্যবহার করে প্রোগ্রাম্যাটিকভাবে সমর্থন সনাক্ত করতে পারেন:

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

শেষ করা

নতুন <geolocation> HTML উপাদান ব্যবহার করে ডেভেলপাররা কীভাবে আরও কার্যকর অবস্থান পুনঃপরীক্ষার দৃশ্যকল্প বাস্তবায়ন করবে তা দেখে আমরা উত্তেজিত। এটি সক্ষমতা-নির্দিষ্ট উপাদানগুলির দিকে একটি পরিবর্তনের প্রতিনিধিত্ব করে যা ব্যবহারকারীরা আজ কীভাবে ওয়েব ব্যবহার করে তার উপর নির্ভর করে তৈরি করা হয়েছে।

অন্যান্য অনুমতি ব্যবহারের ক্ষেত্রে, Chrome 144 থেকে আপনি <usermedia> HTML element origin trial এ যোগ দিতে পারেন, যা ক্যামেরা এবং মাইক্রোফোনে একই রকম এরগনোমিক সুবিধা নিয়ে আসে।

স্বীকৃতি

এই নথিটি অ্যান্ডি পাইকু, গিলবার্তো কোচি এবং র‍্যাচেল অ্যান্ড্রু পর্যালোচনা করেছেন।