ব্রাউজার সাপোর্ট

ইউজারের অবস্থান নির্ণয়ের জন্য এইচটিএমএল জিওলোকেশন এপিআই ব্যবহার করা হয়।

এখানে ক্লিক করুন

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৫.০, ইন্টারনেট এক্সপ্লোরার ৯.০, ফায়ারফক্স ৩.৫, সাফারি ৫.০ এবং অপেরা ১৬.০ ভার্সন থেকে জিওলোকেশন সাপোর্ট করে।

ক্রোম ৪৯.০ ভার্সন পর্যন্ত http সাইটগুলোতেও ইউজারের অবস্থান জানার রিকুয়েস্ট কাজ করে, ভার্সন ৫০.০ থেকে শুধুমাত্র https সাইটগুলোর জন্য কাজ করে।

getCurrentPosition() মেথডের রিটার্নকৃত ডেটা

getCurrentPosition() মেথড সফল হলে যেসকল প্রোপার্টি রিটার্ন হয় তার একটি লিস্ট দেওয়া হলোঃ

ইউজারের অবস্থান নির্ণয়

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

এইচটিএমএল জিওলোকেশন এর ব্যবহার

getCurrentPosition() মেথডের মাধ্যমে ইউজারের অবস্থান পাওয়া যায়।

kt_satt_skill_example_id=1707

উদাহরণের ব্যাখ্যাঃ

• প্রথমে if কন্ডিশনের মাধ্যমে জিওলোকেশন সাপোর্ট চেক করা হয়
• যদি সাপোর্ট করে তাহলে getCurrentPosition() মেথডটি রান হবে, অন্যথায় ব্যবহারকারীকে অ্যালার্ট দেওয়া হয় আপনার ব্রাউজার জিওলোকেশন সাপোর্ট করেনা
• যদি getCurrentPosition() মেথডটি সফল হয় তাহলে এটি showPosition ফাংশনকে স্থানাংক অবজেক্ট রিটার্ন করে
• showPosition() ফাংশনের মাধ্যমে অক্ষাংশ এবং দ্রাঘিমাংশ ডকুমেন্টে দেখানো হয়।

এরর এবং অননুমোদন নিয়ন্ত্রন পদ্ধতি

getCurrentPosition() মেথড ইউজারের অবস্থান নির্ণয় করতে অথবা কোন এরর ঘটলে এই ফাংশনটি রান হবেঃ

kt_satt_skill_example_id=1713

স্ক্রিপ্টের মাধ্যমে অবস্থান প্রদর্শন

আমরা গুগল ম্যাপের সাহায্যে ইউজারের অবস্থান প্রদর্শন করতে পারিঃ

kt_satt_skill_example_id=1714

জিওলোকেশন অবজেক্ট - অন্যান্য মেথড

watchPosition() - এই মেথডের মাধ্যমে ইউজারের বর্তমান অবস্থান নির্ণয় করা যায় এবং স্থান পরিবর্তন করলে তার আপডেটও পাওয়া যায়

clearWatch() - এর মাধ্যমে watchPosition() মেথডকে স্থগিত রাখা হয়

নিচের উদাহরনে watchPosition() মেথড এর ব্যবহার দেখানো হয়েছেঃ

kt_satt_skill_example_id=1716

ড্রাগ এবং ড্রপ মানে হচ্ছে একটি অবজেক্টকে এক স্থান থেকে টেনে অন্য স্থানে নিয়ে যাওয়া। এইচটিএমএল(৫) এর স্ট্যান্ডার্ড অনুযায়ী সকল এলিমেন্টকে ড্রাগ এবং ড্রপ করা যাবে।

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ৯.০, ফায়ারফক্স ৩.৫, সাফারি ৬.০ এবং অপেরা ১২.০ ভার্সন থেকে ড্রাগ এবং ড্রপ সাপোর্ট করে।

এইচটিএমএল ড্র্যাগ এবং ড্রপ উদাহরণ

উদাহরণ

kt_satt_skill_example_id=1727

উদাহরণের বর্ণনা

সর্বপ্রথম একটি এলিমেন্টকে ড্রাগ করার ক্ষমতা দেওয়ার জন্য ঐ এলিমেন্টে draggable এট্রিবিউটের ভ্যালু true সেট করতে হবেঃ

< img draggable="true" >

ondragstart এবং setData()

উপরের উদাহরণে, ondragstart এট্রিবিউট drag(event) নামে একটি ফাংশনকে কল করে ডেটা ড্রাগ করার ক্ষমতা নির্ধারণ করে।

dataTransfer.setData() মেথড ডেটার টাইপ এবং ভ্যালু সেট করেঃ

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

এই ক্ষেত্রে, ডেটা টাইপ "text" সেট করা হয়েছে এবং ড্রাগ করার যোগ্য এলিমেন্টের আইডিকে("drag1") আমরা টার্গেট হিসেবে সেট করেছি।

ondragover ইভেন্ট

ডিফল্টভাবে, কোন এলিমেন্ট/ডেটাকে অন্য এলিমেন্টের উপর রাখা যায় না। একটি এলিমেন্টকে কোন এলিমেন্টের উপর রাখতে হলে প্রথমে তার ডিফল্ট হ্যান্ডলিংকে রোধ করতে হবে।

আমরা event.preventDefault() মেথড ব্যবহার করে এটি করতে পারি। এই মেথডকে আমরা ondragover ইভেন্টে কল করতে পারি, ondragover ইভেন্টটি ডেটাকে ড্রপ করার স্থান নির্দেশ করে।

event.preventDefault()

ondrop ইভেন্ট

ড্রাগ করা ডেটাকে আমরা যখন একটি এলিমেন্টের উপর রাখি তখন একটি ইভেন্ট ঘটে, এর নাম drop ইভেন্ট। এই ইভেন্ট ঘটলে ondrop এট্রিবিউট drop(event) নামের একটি ফাংশনকে কল করেঃ

function drop(ev){
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
}

এখানে preventDefault() মেথডের মাধ্যমে ব্রাউজারের ডিফল্ট হ্যান্ডলিংকে রোধ করা হয়েছে। ব্রাউজারে কোন ডেটাকে ড্রপ করা হলে ডিফল্টভাবে এটি লিংক হিসেবে নতুন উইন্ডোতে ওপেন হয়। dataTransfer.getData() মেথডের মাধ্যমে ড্রাগ করা ডেটাকে পাওয়া যায়। এই মেথড setData() মেথডে সেট করা একই টাইপের ডেটাকে পাবে। সবশেষে ড্রাগকৃত এলিমেন্টকে ড্রপ এলিমেন্টে যোগ করা হয়।

দুইটি DIV এলিমেন্টের মধ্যে ড্রাগ এবং ড্রপ

kt_satt_skill_example_id=1731

লোকাল স্টোরেজের সাহায্যে ওয়েব এপ্লিকেশন ইউজারের ব্রাউজারে ডেটা সংরক্ষণ করতে পারে।

এইচটিএমএল(৫) এর পূর্বে এপ্লিকেশন ডেটা সংরক্ষণের জন্য কুকিজ ব্যবহার করা হতো। কুকিজ ব্যবহারে একটি সাইটের জন্য সর্বোচ্চ ৫ এমবি পর্যন্ত ডেটা স্টোর করা যেত(ব্রাউজারভেদে ভিন্ন হতে পারে)

লোকাল স্টোরেজ ৫ এমবি থেকে অনেক বেশি ডেটা সংরক্ষণ করতে পারে। লোকালস্টোরেজ ডোমেইন এবং প্রোটোকল অনুসারে তৈরি হয়, একই উৎসের সকল পেজ ডেটা সংরক্ষণ এবং স্টোর করতে পারে।

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ৮.০, ফায়ারফক্স ৩.৫, সাফারি ৪.০ এবং অপেরা ১১.৫ ভার্সন থেকে স্টোরেজ সাপোর্ট করে।

এইচটিএমএল লোকাল স্টোরেজ অবজেক্ট

ক্লায়েন্ট সাইটে ডেটা স্টোর করার জন্য এইচটিএমএল লোকাল স্টোরেজে দুইটি অবজেক্ট রয়েছেঃ

• window.localStorage - মেয়াদ ছাড়া ডেটা সংরক্ষণ করে
• window.sessionStorage - একটি সেশনের জন্য ডেটা সংরক্ষণ করে(ব্রাউজারের ট্যাব বন্ধ করলেই ডেটা মুছে ফেলবে)

লোকাল স্টোরেজ ব্যবহারের পূর্বে ব্রাউজার লোকালস্টোরেজ ও সেশনস্টোরেজ সাপোর্ট করে কিনা দেখে নিতে হবেঃ

if (typeof(Storage) !== "undefined") {
    // Code here...
}
   else {
    // Sorry!No Web Storage support...
}

localStorage অবজেক্ট

localStorage অবজেক্টে ডেটা সংরক্ষণের পর এটি আপনি সবসময় ব্যবহার করতে পারবেন। ব্রাউজার বন্ধ করে দিলেও ডেটা ডিলেট হবে না। এটি পরবর্তী যেকোন সময় এক্সেস করা যাবে।

kt_satt_skill_example_id=1739

উদাহরণের বর্ণনাঃ

• লোকালস্টোরেজের name এবং value এর জোড়া তৈরি করুন। যেমনঃ name="lastname" এবং value="Aziz"
• "lastname" এর ভ্যালু এক্সেস করে id="result" যুক্ত এলিমেন্টে রাখুন।

উপরের উদাহরণটি নিচের মত করেও লেখা যায়ঃ

localStorage.lastname = "Rahman";
document.getElementById("result").innerHTML =
localStorage.lastname;

লোকালস্টোরেজের "lastname" আইটেমকে ডিলেট করার পদ্ধতিঃ

localStorage.removeItem("lastname");

বিঃদ্রঃ Name/value জোড়া সবসময় স্ট্রিং আকারে স্টোর করা হয়।

নিচে একটি কাউন্টারের সাহায্যে লোকালস্টোরেজের উদাহরণ দেওয়া হলোঃ

উদাহরণ

kt_satt_skill_example_id=1741

sessionStorage অবজেক্ট

sessionStorage অবজেক্ট ব্রাউজারে শুধুমাত্র একটি সেশনের জন্য ডেটা স্টোর করে। এর অর্থ, ব্রাউজারের ট্যাব বন্ধ করে দিলে ডেটাও ডিলেট হয়ে যাবে।

নিচের উদাহরণে একটি কাউন্টারের সাহায্যে সেশনস্টোরেজ বুঝানো হয়েছেঃ

উদাহরণ

kt_satt_skill_example_id=1743

এপ্লিকেশন ক্যাশ ওয়েব স্ট্যান্ডার্ড থেকে বাদ দেওয়া হয়েছে। যদিও কিছু ব্রাউজারে এখনো সাপোর্ট করে, এটি ব্যবহার থেকে বিরত থাকুন।

এর পরিবর্তে Service Workers ব্যবহার করুন।

এইচটিএমএল(৫) ক্যাশ মানে হচ্ছে একটি ওয়েব এপ্লিকেশনকে ক্যাশ করা এবং ইন্টারনেট কানেকশন ছাড়াই একে এক্সেস করা।

এপ্লিকেশন ক্যাশের তিনটি সুবিধাঃ

1. অফলাইন ব্রাউজিং - ইউজার অফলাইনে থাকলেও এপ্লিকেশনটি ব্যবহার করতে পারবে
2. গতি - ক্যাশড ডেটা দ্রুত লোড হয়
3. সার্ভার লোড কমিয়ে আনে - ব্রাউজার শুধুমাত্র আপডেটেড/চেঞ্জড ডেটা ডাউনলোড করবে

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ১০.০, ফায়ারফক্স ৩.৫, সাফারি ৪.০ এবং অপেরা ১১.৫ ভার্সন থেকে এপ্লিকেশন ক্যাশ সাপোর্ট করে।

এইচটিএমএল ক্যাশ ম্যানিফেস্ট

নিচের উদাহরণটিতে ক্যাশ ম্যানিফেস্টসহ একটি এইচটিএমএল ডকুমেন্ট দেখানো হলোঃ

উদাহরণ

kt_satt_skill_example_id=1753

ক্যাশ ম্যানিফেস্ট বেসিক

এপ্লিকেশন ক্যাশ চালু করার জন্য আপনাকে manifest এট্রিবিউটটি ডকুমেন্টের ট্যাগে ব্যবহার করতে হবেঃ

< html manifest="demo.appcache" >

আমরা যেসকল পেজকে ক্যাশ করতে চাই সেসকল পেজে manifest এট্রিবিউটটি ব্যবহার করবো। .appcache হচ্ছে মেনিফেস্ট ফাইলের এক্সটেশন। মেনিফেস্ট ফাইলের মিডিয়া টাইপ হচ্ছে "text/cache-manifest"

মেনিফেস্ট ফাইল

মেনিফেস্ট ফাইল সাধারণ একটি টেক্সট ফাইল, যার মধ্যে ব্রাউজারের ক্যাশ করার নির্দেশিকা দেওয়া থাকে।

মেনিফেস্ট ফাইলের তিনটি সেকশন আছেঃ

• CACHE MANIFEST - প্রথমবার ডাউনলোড হবার পর এই হেডারের নিচের ফাইলগুলোকে ক্যাশ করা হবে
• NETWORK - এই হেডারের নিচের ফাইলগুলোর জন্য সার্ভার কানেকশন লাগে এবং এরা কখনই ক্যাশড হবে না
• FALLBACK - এই হেডারের নিচের ফাইলগুলো কোন পেজ এক্সেস করা না গেলে ফলব্যাক পেজ হিসেবে কাজ করে

CACHE MANIFEST

প্রথমে CACHE MANIFEST লাইনটি অবশ্যই লিখতে হবেঃ

CACHE MANIFEST
/main.css
/satt.gif
/main.js

উপরের মেনিফেস্ট ফাইলে তিনটি ফাইল আছেঃ একটি সিএসএস ফাইল, একটি GIF ইমেজ এবং একটি জাভাস্ক্রিপ্ট ফাইল। মেনিফেস্ট ফাইলটি লোড হলে ব্রাউজার ওয়েবসাইট থেকে তিনটি ফাইল ডাউনলোড করে নিবে। পরবর্তীতে ইন্টারনেট কানেকশন ছাড়াও এই ফাইলগুলোকে এক্সেস করা যাবে।

NETWORK

নিচের NETWORK সেকশন বুঝায় "login.php" ফাইলকে কখনই ক্যাশ করা যাবে না। তার মানে এই ফাইলটি ইন্টারনেট কানেকশন ছাড়া এক্সেস করা যাবে নাঃ

NETWORK:
login.php

একটি এস্টেরিক সাইন দ্বারা অন্যান্য সকল ফাইলের জন্য ইন্টারনেট কানেকশন লাগবে বুঝাতে ব্যবহার হয়ঃ

NETWORK:
*

FALLBACK

নিচের FALLBACK সেকশন দিয়ে বুঝায় যদি ইন্টারনেট কানেকশন না থাকে তবে "offline.html" সকল পেজের ফলব্যাক পেজ হিসেবে কাজ করবেঃ

FALLBACK:
/offline.html

ক্যাশ আপডেট

নিচের যেকোন একটি ঘটনা না ঘটলে ক্যাশ করা ফাইলটি আপডেট হয় নাঃ

• ইউজার ব্রাউজার ক্যাশ মুছে দিলে
• মেনিফেস্ট ফাইল পরিবর্তন করা হলে
• এপ্লিকেশন যদি প্রোগ্রামেটিক্যালি আপডেট হয়

একটি সম্পূর্ণ ক্যাশ মেনিফেস্ট ফাইল

CACHE MANIFEST
# 2017-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/offline.html

পেজের অন্যান্য কার্যক্রমে ব্যাঘাত না ঘটিয়ে এবং অন্যান্য স্ক্রিপ্টের থেকে আলাদাভাবে একটি জাভাস্ক্রিপ্ট ব্যাকগ্রাউন্ডে রান হওয়াকে ওয়েব ওয়ার্কার বলে। ব্যাকগ্রাউন্ডে ওয়েব ওয়ার্কার রান হওয়ার সময় আপনি পেজে নিজের অন্যান্য কাজ করতে পারবেন।

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ১০.০, ফায়ারফক্স ৩.৫, সাফারি ৪.০ এবং অপেরা ১১.৫ ভার্সন থেকে ওয়েব ওয়ার্কার সাপোর্ট করে।

ওয়েব ওয়ার্কার সাপোর্ট যাচাই

ব্যবহারকারীর ব্রাউজারে ওয়েব ওয়ার্কার সাপোর্ট করে কিনা যাচাই করার একটি সহজ পদ্ধতিঃ

if (typeof(Worker) !== "undefined") {
    // কোড...
	}
	else {
    // দুঃখিত! ওয়েব ওয়ার্কার সাপোর্ট করে না..
	}

একটি ওয়েব ওয়ার্কার ফাইল তৈরি

আমরা "test_workers.js" নামক ফাইলের স্ক্রিপ্টের মাধ্যমে গননা করবোঃ

var i = 0;

function timedCount()
{
      
   i = i + 1;
      
   postMessage(i);
      
   setTimeout("timedCount()",1000);
}

timedCount();

ওয়েব ওয়ার্কার অবজেক্ট তৈরি

নিচের কোডে প্রথমে ওয়ার্কার অবজেক্ট তৈরি আছে কিনা যাচাই করা হয়েছে, যদি ওয়ার্কার অবজেক্ট না থাকে তবে ওয়ার্কার অবজেক্ট তৈরি করা হয়েছেঃ

if (typeof(w) == "undefined") {
    w = new Worker("test_workers.js");
	}

আমরা ওয়েব ওয়ার্কার অবজেক্টে "onmessage" ইভেন্টলিসেনার যুক্ত করে দিব ওয়েব ওয়ার্কার থেকে মেসেজ গ্রহণ এবং প্রেরণের জন্যঃ

w.onmessage = function(event){
    document.getElementById("output").innerHTML = event.data;
	};

ওয়েব ওয়ার্কার থেকে মেসেজ পোস্ট করার পর ইভেন্টলিসেনারের ফাংশনটি এক্সিকিউট হয় এবং ওয়েব ওয়ার্কারের ডেটা event.data তে জমা হয়।

ওয়েব ওয়ার্কার বন্ধ করা

ওয়েব ওয়ার্কার অবজেক্ট তৈরি করার পর এটি সবসময় মেসেজ পেতে থাকবে যতক্ষন পর্যন্ত একে বন্ধ না করা হবে। ওয়েব ওয়ার্কারের কাজ বন্ধ করার জন্য terminate() মেথডটি ব্যবহার করা হয়ঃ

w.terminate();

ওয়েব ওয়ার্কার পুনঃব্যবহার

আপনি যদি ওয়েব ওয়ার্কারের ভেরিয়েবল অ-সংজ্ঞায়িত ধার্য করেন, সেক্ষেত্রে আপনি কোড পুনরায় ব্যবহার করতে পারেন, ওয়েব ওয়ার্কার বিনষ্ট করার পরেও:

w = undefined;

সম্পূর্ণ ওয়েব ওয়ার্কারের উদাহরণ

আমরা ইতিমধ্যে .js ফাইলে ওয়েব ওয়ার্কার কোড দেখেছি। নীচে এইচটিএমএল পেজের জন্য কোড:

উদাহরণ

kt_satt_skill_example_id=1754

এইচটিএমএল(৫) SSE হচ্ছে একটি ওয়েব পেজকে সার্ভার থেকে পাঠানো তথ্যের মাধ্যমে স্বয়ংক্রিয়ভাবে আপডেট করা। ফেসবুক/টুইটার আপডেট, নিউজফিড, খেলার ফলাফল প্রদর্শনের জন্য SSE ব্যবহার হয়।

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৬.০, ফায়ারফক্স ৬.০, সাফারি ৫.০ এবং অপেরা ১১.৫ ভার্সন থেকে SSE সাপোর্ট করে। ইন্টারনেট এক্সপ্লোরারে এটি সাপোর্ট করে না।

SSE এর উদাহরণ

সার্ভার থেকে নোটিফিকেশন পাওয়ার জন্য EventSource অবজেক্ট ব্যবহার করা হয়ঃ

উদাহরণ

kt_satt_skill_example_id=1757

প্রথমে যে পেজ থেকে আপডেট আসবে সে পেজের URL ব্যবহার করে একটি EventSource অবজেক্ট তৈরি করি। প্রতিবার আপডেট গ্রহণের পর onmessage ইভেন্ট ঘটে এবং onmessage ইভেন্ট ঘটলে একটি ফাংশন রান হয়। ফাংশনটি id="result" যুক্ত এলিমেন্টে ডেটা আউটপুট দেয়।

SSE সাপোর্ট চেক

কিছু অতিরিক্ত কোড যোগ করে আমরা ব্রাউজারে SSE সাপোর্ট করে কিনা যাচাই করে নিতে পারিঃ

if(typeof(EventSource) !== "undefined") {
    // কোড...
}
else {
    //দুঃখিত! SSE সাপোর্ট করে না..
}

সার্ভার-সাইড কোডের উদাহরণ

আপনি "Content-Type" হেডারকে "text/event-stream" এবং "Cache-Control" হেডারকে "no-cache" সেট করতে হবে। নিচে একটি ফাইলের উদাহরণ দেওয়া হলোঃ

অন্যান্য ইভেন্ট

EventSource অবজেক্টের অন্যান্য ইভেন্ট নিচে দেওয়া হলোঃ