ডেস্কটপ প্রগতিশীল ওয়েব অ্যাপস

ডেস্কটপ প্রোগ্রেসিভ ওয়েব অ্যাপস (PWAs) হল একটি দুর্দান্ত ক্রস-প্ল্যাটফর্ম, ক্রস-ব্রাউজার উপায় যার মাধ্যমে আপনি ব্যবহারকারীর সুরক্ষা এবং গোপনীয়তাকে কেন্দ্র করে একটি নিরাপত্তা মডেল ব্যবহার করে অ্যাপ তৈরি করতে পারেন এবং ওয়েবের অন্তর্নিহিত লিঙ্কেবিলিটির সাথে বিল্ট-ইন শেয়ারিং পান। ডেস্কটপ-অ্যাপের মতো ক্ষমতা, নির্ভরযোগ্যতা এবং ইনস্টলেবিলিটি প্রদানের জন্য আধুনিক API ব্যবহার করে নতুন তৈরি করুন অথবা আপনার বিদ্যমান ওয়েব অ্যাপ উন্নত করুন। ChromeOS-এর জন্য আপনার ওয়েব অ্যাপ সরবরাহ করার জন্য PWAs হল সেরা উপায়।

ChromeOS-এ, ওয়েব প্ল্যাটফর্মের শক্তি সামনে এবং কেন্দ্রে থাকে; ওয়েব অ্যাপগুলি একটি মূল প্ল্যাটফর্ম বৈশিষ্ট্য। ইনস্টল করা PWA গুলি ChromeOS লঞ্চারে প্রদর্শিত হয়, শেল্ফে পিন করা যায় এবং বাকি OS-এর সাথে গভীরভাবে সংহত হয়।

PWA চেকলিস্ট পর্যালোচনা করে শুরু করুন এবং নিশ্চিত করুন যে আপনার ওয়েব অ্যাপটি মূল PWA চেকলিস্টটি পাস করেছে। আপনি একটি কাস্টম অফলাইন পৃষ্ঠা প্রদান করতে এবং আপনার অ্যাপটি ইনস্টলযোগ্য করতে PWABuilder ব্যবহার করতে পারেন। তারপর, ChromeOS-এ আপনার PWA-কে উজ্জ্বল করতে এই সুপারিশগুলি ব্যবহার করুন।

এটি ইনস্টলযোগ্য করুন

নিয়মিত ওয়েব অ্যাপের তুলনায় PWA-এর একটি বড় সুবিধা হলো, এগুলো ইনস্টল করার ক্ষমতা, ঠিক ঐতিহ্যবাহী ডেস্কটপ অ্যাপের মতোই। web.dev-এর Progressive Web App path-এ আপনার PWA ইনস্টলযোগ্য করার জন্য একটি বিভাগ রয়েছে; শুরু করার জন্য এটি ব্যবহার করুন। ChromeOS-এ PWA ইনস্টলযোগ্য হিসেবে চিহ্নিত করার জন্য, নিম্নলিখিত মানদণ্ডগুলি পূরণ করতে হবে, যা Lighthouse-এর ইনস্টলযোগ্য অডিট ব্যবহার করে পরীক্ষা করা যেতে পারে:

আইকনগুলি আপনার PWA-এর পরিচয়ের একটি গুরুত্বপূর্ণ অংশ, তাই নিশ্চিত করুন যে সেগুলি আকর্ষণীয় এবং অনন্য; এমনকি এতে স্বচ্ছতাও অন্তর্ভুক্ত থাকতে পারে! যেহেতু PWA-গুলির একটি কোডবেস থাকে যা সমস্ত প্ল্যাটফর্মে ভাগ করা হয়, তাই আপনার একটি মাস্কেবল আইকন উপলব্ধ থাকা নিশ্চিত করা উচিত। নিশ্চিত করুন যে আপনি এমন অপারেটিং সিস্টেমগুলির জন্যও সাধারণ আইকন অন্তর্ভুক্ত করেছেন যেগুলি মাস্কেবল আইকন সমর্থন করে না।

আপনার PWA ইনস্টল করার সাথে সাথে, এটি এখন লঞ্চার থেকে শেল্ফ পর্যন্ত ChromeOS জুড়ে দেখা যাবে। আপনার PWA ইনস্টল করা আপনার অ্যাপটিকে সত্যিই উজ্জ্বল করার জন্য কিছু অতিরিক্ত ক্ষমতাও উন্মুক্ত করে।

অফলাইনে কাজ করার বিষয়ে একটি নোট

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

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

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

স্পর্শযোগ্য করে তুলুন

প্রায় সব ChromeOS ডিভাইসই টাচ এবং অনেক স্টাইলাস সাপোর্ট করে, তাই আপনার অ্যাপটি যাতে সাধারণ কীবোর্ড এবং মাউসের পাশাপাশি উভয় ইনপুট দিয়েই নির্বিঘ্নে কাজ করে তা নিশ্চিত করতে হবে। পয়েন্টার ইভেন্ট API বিশেষভাবে এটি পরিচালনা করার জন্য ডিজাইন করা হয়েছে! কিছু মৌলিক পয়েন্টার-সম্পর্কিত ইভেন্ট যা আপনাকে সম্ভবত পরিবর্তন করতে হবে না, যেমন click ইভেন্ট। অন্যান্য ইভেন্ট, যেমন mouseup বা touchstart , তাদের পয়েন্টার ইভেন্ট প্রতিরূপে স্থানান্তরিত করা উচিত যাতে তারা যেকোনো ধরণের পয়েন্টারে নির্বিঘ্নে কাজ করতে পারে। আপনি চাইলে আলাদাভাবে বিভিন্ন ধরণের ইনপুট পরিচালনা করতে পারেন। স্পর্শকাতর ব্যবহারকারীর ইনপুটের উপর নির্ভরশীল অ্যাপ এবং গেমগুলির জন্য, পয়েন্টার ইভেন্ট API-তে স্থানান্তর করা ChromeOS ডিভাইসগুলিতে একটি বিশাল পার্থক্য আনবে।

ওয়েবে মসৃণ অঙ্কন

যদি আপনি এমন একটি অ্যাপ তৈরি করেন যেখানে ব্যবহারকারীরা আঙুল বা স্টাইলাস দিয়ে ছবি আঁকতে পারেন, তাহলে তাদের ইনপুট এবং আউটপুটের মধ্যে ল্যাটেন্সি এত দ্রুত রাখা যে তা সাবলীল মনে হবে, ঐতিহাসিকভাবে এটি কঠিন। ChromeOS-এর জন্য এই ধরণের ক্যানভাস API চালিত অ্যাপ তৈরি করার সময়, আমরা কম-লেটেন্সি রেন্ডারিং প্রদানের জন্য canvas.getContext() এর জন্য desynchronized hint ব্যবহার করার পরামর্শ দিই। ক্যানভাসের জন্য desynchronized hint ব্যবহার করতে, নিম্নলিখিতগুলি করুন: 

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

স্পর্শের জন্য নকশা বিবেচনা

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

  • স্ক্রিনের আকারের উপর ভিত্তি করে ইনপুট অনুমান করবেন না। পরিবর্তে, কীভাবে প্রতিক্রিয়া জানাবেন তা নির্ধারণ করার জন্য আদর্শভাবে ইনপুট সময় বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করুন। মনে রাখবেন, ChromeOS-এ, ব্যবহারকারীরা এক সেশনের মধ্যেই মাউস, টাচ এবং স্টাইলাসের মধ্যে নির্বিঘ্নে অদলবদল করতে পারেন এবং করতে পারেন।
  • নিশ্চিত করুন যে ব্যবহারকারী যে উপাদানগুলি স্পর্শ করবেন বলে আশা করছেন তার ন্যূনতম লক্ষ্য আকার যথেষ্ট বড় যাতে আশেপাশের উপাদানগুলি দুর্ঘটনাক্রমে আঘাত না পায়।
  • হোভারকে প্রগতিশীল বর্ধন হিসেবে বিবেচনা করুন এবং নিশ্চিত করুন যে স্পর্শ এবং স্টাইলাসের জন্য অন্যান্য উপায়ের মাধ্যমে (উদাহরণস্বরূপ, দীর্ঘক্ষণ চাপ বা ট্যাপ) মিথস্ক্রিয়া সম্পন্ন করা যেতে পারে।
  • টাচ ব্যবহারকারীরা আশা করেন যে তারা অন-স্ক্রিন উপাদানগুলির সাথে সরাসরি ইন্টারঅ্যাক্ট করতে পারবেন, উদাহরণস্বরূপ জুম ইন/আউট বোতাম ব্যবহার না করে ম্যাপে পিঞ্চ-টু-জুম করতে পারবেন। যেখানে উপযুক্ত সেখানে সাধারণ স্পর্শ অঙ্গভঙ্গি যোগ করা আপনার অ্যাপটিকে স্বাভাবিক অনুভূতি দিতে অনেক দূর এগিয়ে যেতে পারে।

সক্ষম করে তুলুন।

যদিও কিছু PWA ক্ষমতা সাধারণভাবে পরিচিত, যেমন Notifications API যা একটি ওয়েব অ্যাপকে প্ল্যাটফর্ম বিজ্ঞপ্তি গ্রহণ এবং প্রকাশ করতে দেয়, তবুও আপনার অ্যাপগুলিকে সুপারপাওয়ার করার জন্য ওয়েবে বেশ কয়েকটি নতুন এবং আসন্ন বৈশিষ্ট্য আসছে। Chromium Web Capabilities প্রকল্প , যা Project Fugu 🐡 নামেও পরিচিত, ওয়েবকে অনন্য করে তোলে এমন বিষয়গুলি সংরক্ষণ করে নতুন, শক্তিশালী ওয়েব মান সক্ষম করার একটি প্রচেষ্টা: এর ব্যবহারকারী-কেন্দ্রিক নিরাপত্তা, কম ঘর্ষণ এবং ক্রস-প্ল্যাটফর্ম সামঞ্জস্য।

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