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

Mari Viana

Minh Le

Thomas Steiner

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

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

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

সাধারণ <permission> থেকে নির্দিষ্ট <geolocation> পর্যন্ত

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

ধারণাটির বৈধতা

আমরা ক্রোম ১২৬ থেকে ১৪৩ পর্যন্ত জেনেরিক <permission> এলিমেন্টের জন্য একটি অরিজিন ট্রায়াল চালিয়েছিলাম। এই ট্রায়ালের উদ্দেশ্য ছিল এই অনুমানটি পরীক্ষা করা যে, একটি ডেডিকেটেড ও প্রাসঙ্গিক বাটন ব্যবহারকারীর আস্থা এবং সিদ্ধান্ত গ্রহণ ক্ষমতাকে উন্নত করবে।

এই উৎস পরীক্ষার ফলাফল এই মূল ধারণাটির বৈধতাকে সমর্থন করেছে:

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

ডিজাইনের পুনঃসংজ্ঞা

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

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

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

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

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

<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 : "precise" বা "approximate" মান গ্রহণ করে, যা স্ট্যান্ডার্ড enableHighAccuracy অপশনের অনুরূপ।
• watch : watchPosition() সাথে সামঞ্জস্য রেখে আচরণ পরিবর্তন করে, ব্যবহারকারী নড়াচড়া করার সাথে সাথে ক্রমাগত ইভেন্ট পাঠাতে থাকে।
• position : DOM এলিমেন্টের একটি পঠনযোগ্য প্রপার্টি, যা উপলব্ধ হলে GeolocationPosition অবজেক্টটি ফেরত দেয়।
• error : একটি পঠনযোগ্য প্রপার্টি যা অনুরোধ ব্যর্থ হলে GeolocationPositionError ফেরত দেয়।

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

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

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

প্রগতিশীল উন্নয়ন কৌশল

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

এলিমেন্টটি এমনভাবে ডিজাইন করা হয়েছে যাতে এটি স্বাভাবিকভাবে কাজ করতে পারে। যে ব্রাউজারগুলো <geolocation> এলিমেন্ট সমর্থন করে না, তারা এটিকে একটি HTMLUnknownElement হিসেবে গণ্য করবে। গুরুত্বপূর্ণ বিষয় হলো, যদি ব্রাউজারটি এলিমেন্টটি সমর্থন করে, তবে এটি এর চাইল্ড এলিমেন্টগুলো রেন্ডার করবে না। এর ফলে সমর্থিত এবং অসমর্থিত উভয় ব্রাউজারের জন্যই এইচটিএমএল কোডটি পরিচ্ছন্নভাবে লেখা যায়।

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

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

<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> (ড্যাশটি লক্ষ্য করুন) দিয়ে প্রতিস্থাপন করে, যা সাধারণ জাভাস্ক্রিপ্ট জিওলোকেশন এপিআই দ্বারা সমর্থিত। যদি ব্রাউজারটি <geolocation> এলিমেন্ট সমর্থন করে, তবে পলিফিলটি কিছুই করে না। এই পলিফিল ডেমোটি দেখুন যা পলিফিলটির কার্যকারিতা প্রদর্শন করে। সোর্স কোডটি গিটহাবে রয়েছে।

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 এলিমেন্ট ব্যবহার করে কীভাবে আরও উন্নত পারফরম্যান্সযুক্ত লোকেশন রিট্রায়াল সিনারিও বাস্তবায়ন করবেন, তা দেখার জন্য আমরা অধীর আগ্রহে অপেক্ষা করছি। এটি এমন সব সক্ষমতা-ভিত্তিক এলিমেন্টের দিকে একটি পরিবর্তনকে নির্দেশ করে, যা আজকের দিনে ব্যবহারকারীরা বাস্তবে যেভাবে ওয়েব ব্যবহার করেন, তার সঙ্গে মানানসই করে তৈরি করা হয়েছে।

অন্যান্য পারমিশন ব্যবহারের ক্ষেত্রে, ক্রোম ১৪৪ থেকে আপনি <usermedia> HTML এলিমেন্টের অরিজিন ট্রায়ালে যোগ দিতে পারেন, যা ক্যামেরা এবং মাইক্রোফোনের ক্ষেত্রেও একই ধরনের ব্যবহারিক সুবিধা নিয়ে আসে।

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

• ক্রোম প্ল্যাটফর্ম স্ট্যাটাসে <geolocation> এলিমেন্ট
• ভূ-অবস্থান এইচটিএমএল উপাদানের ব্যাখ্যা
• ডেমো পৃষ্ঠা
• মোজিলা স্ট্যান্ডার্ড পজিশন
• ওয়েবকিট স্ট্যান্ডার্ড পজিশন

কৃতজ্ঞতা স্বীকার

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