একটি ডাইনামিক ওয়েব এপ্লিকেশন এর ক্ষেত্রে সকল কনটেন্ট অ্যাজাক্স ব্যবহার করে ডাইনামিক ভাবে লোড করা হয় যেখানে পেজ এবং পেজের কনটেন্ট পরিবর্তন হয় কিন্ত ব্রাউজার পেজ রিলোড হয় না। এরকম অ্যাপ্লিকেশন এর মধ্যে অনেক অ্যাপ্লিকেশনে দেখা যায় অ্যাপ্লিকেশনে ডেটা লোড চলাকালীন ইন্টারনেট ডিসকানেক্ট হয়ে গেলে ইউজারকে জানিয়ে দেওয়া হয় যে তার ইন্টারনেট ডিসকানেক্ট হয়ে গেছে। তো চাইলে আপনিও আপনার সাইটে কিংবা অ্যাপ্লিকেশনে এরকম নোটিফাই সিস্টেম করতে পারেন। আজকের পোস্টে ইন্টারনেট কানেকশন না থাকলে কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে ইউজারকে নোটিফাই করবেন সে বিষয়ে আলোচনা করবো। তাহলে চলুন জাম্প করা যাক মূল পোস্টে।
HTML
<div class="notify hide">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.92,5.51h0L3.71,2.29A1,1,0,0,0,2.29,3.71L4.56,6A15.21,15.21,0,0,0,1.4,8.39a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.29A13.07,13.07,0,0,1,6.05,7.46L7.54,9a10.78,10.78,0,0,0-3.32,2.27,1,1,0,1,0,1.42,1.4,8.8,8.8,0,0,1,3.45-2.12l1.62,1.61a7.07,7.07,0,0,0-3.66,1.94,1,1,0,1,0,1.42,1.4A5,5,0,0,1,12,14a4.13,4.13,0,0,1,.63.05l7.66,7.66a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM12,16a3,3,0,1,0,3,3A3,3,0,0,0,12,16Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,12,20ZM22.61,8.39A15,15,0,0,0,10.29,4.1a1,1,0,1,0,.22,2A13.07,13.07,0,0,1,21.2,9.81a1,1,0,0,0,1.41-1.42Zm-4.25,4.24a1,1,0,0,0,1.42-1.4,10.75,10.75,0,0,0-4.84-2.82,1,1,0,1,0-.52,1.92A8.94,8.94,0,0,1,18.36,12.63Z"/></svg>
<p>No Internet Connection!</p>
</div> CSS
.notify {
width: 300px;
height: 60px;
padding: 0 30px;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 17px;
color: gray;
position: fixed;
bottom: 50px;
right: 20px;
border-bottom: 3px solid #e5e5e5;
border-radius: 10px;
transition: all 0.2s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}
.notify svg {
height: 40px;
fill: gray;
}
.notify.hide {
visibility: hidden;
right: -370px
}JavaScript
notify = document.querySelector(".notify");
window.onload = ()=>{
function checkInternet(){
let request = new XMLHttpRequest();
request.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
request.onload = ()=>{
if(request.status == 200 && request.status < 300){
notify.classList.add("hide");
}else{
offline();
}
}
request.onerror = ()=>{
offline();
}
request.send();
}
function offline(){
notify.classList.remove("hide");
}
setInterval(()=>{
checkInternet();
}, 100);
}Download Project
তো পোস্ট মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।