ওয়েব অ্যাপ ম্যানিফেস্ট, পরিষেবা কর্মী, এবং পরিষেবা কর্মী ক্যাশে পরিদর্শন, সংশোধন এবং ডিবাগ করতে অ্যাপ্লিকেশন প্যানেল ব্যবহার করুন৷
প্রগ্রেসিভ ওয়েব অ্যাপস (PWAs) হল আধুনিক, উচ্চ মানের অ্যাপ্লিকেশন যা ওয়েব প্রযুক্তি ব্যবহার করে নির্মিত। পিডব্লিউএ iOS, অ্যান্ড্রয়েড এবং ডেস্কটপ অ্যাপ্লিকেশানগুলিতে অনুরূপ ক্ষমতা অফার করে। তারা হল:
- এমনকি অস্থির নেটওয়ার্ক পরিস্থিতিতেও নির্ভরযোগ্য।
- অপারেটিং সিস্টেমের সারফেস চালু করতে ইনস্টল করা যায়, যেমন Mac OS X-এ অ্যাপ্লিকেশন ফোল্ডার, Windows-এ স্টার্ট মেনু এবং Android এবং iOS-এ হোম স্ক্রীন।
- অ্যাক্টিভিটি সুইচার, ডিভাইস সার্চ ইঞ্জিন যেমন স্পটলাইট এবং বিষয়বস্তু শেয়ারিং শীটে দেখান।
এই নির্দেশিকাটি শুধুমাত্র অ্যাপ্লিকেশন প্যানেলের প্রগতিশীল ওয়েব অ্যাপ বৈশিষ্ট্যগুলি নিয়ে আলোচনা করে৷ আপনি যদি অন্যান্য প্যানে সাহায্যের জন্য খুঁজছেন, তাহলে এই গাইডের শেষ বিভাগটি দেখুন, অন্যান্য অ্যাপ্লিকেশন প্যানেল গাইড ।
সারাংশ
- আপনার ওয়েব অ্যাপ ম্যানিফেস্ট পরিদর্শন করতে ম্যানিফেস্ট ট্যাবটি ব্যবহার করুন৷
- পরিষেবা-কর্মী-সম্পর্কিত কাজের সম্পূর্ণ পরিসরের জন্য পরিষেবা কর্মী ট্যাব ব্যবহার করুন, যেমন কোনও পরিষেবা নিবন্ধনমুক্ত করা বা আপডেট করা, পুশ ইভেন্টগুলি অনুকরণ করা, অফলাইনে যাওয়া বা কোনও পরিষেবা কর্মীকে থামানো।
- ক্যাশে স্টোরেজ ট্যাব থেকে আপনার পরিষেবা কর্মী ক্যাশে দেখুন।
- একটি পরিষেবা কর্মীকে নিবন্ধনমুক্ত করুন এবং ক্লিয়ার স্টোরেজ ট্যাব থেকে একটি বোতাম ক্লিকের মাধ্যমে সমস্ত স্টোরেজ এবং ক্যাশে সাফ করুন।
ওয়েব অ্যাপ ম্যানিফেস্ট
আপনি যদি চান যে আপনার ব্যবহারকারীরা Mac OS X-এ তাদের অ্যাপ্লিকেশন ফোল্ডারে, Windows-এর স্টার্ট মেনু এবং Android এবং iOS-এর হোম স্ক্রীনে আপনার অ্যাপ যোগ করতে পারবে, তাহলে আপনার একটি ওয়েব অ্যাপ ম্যানিফেস্ট প্রয়োজন। ম্যানিফেস্টটি সংজ্ঞায়িত করে কিভাবে অ্যাপটি হোম স্ক্রিনে প্রদর্শিত হবে, হোম স্ক্রীন থেকে লঞ্চ করার সময় ব্যবহারকারীকে কোথায় নির্দেশ দিতে হবে এবং লঞ্চের সময় অ্যাপটি কেমন দেখায়।
একবার আপনার ম্যানিফেস্ট সেট আপ হয়ে গেলে, আপনি এটি পরিদর্শন করতে অ্যাপ্লিকেশন প্যানেলের ম্যানিফেস্ট ট্যাব ব্যবহার করতে পারেন৷
- ম্যানিফেস্ট উত্সটি দেখতে, অ্যাপ ম্যানিফেস্ট লেবেলের নীচের লিঙ্কে ক্লিক করুন ( উপরের স্ক্রিনশটে
manifest.webmanifest)৷ - পরিচয় এবং উপস্থাপনা বিভাগগুলি আরও ব্যবহারকারী-বান্ধব উপায়ে ম্যানিফেস্ট উত্স থেকে ক্ষেত্রগুলি প্রদর্শন করে৷
- প্রোটোকল হ্যান্ডলার বিভাগ আপনাকে একটি বোতামে ক্লিক করে আপনার PWA-এর URL প্রোটোকল হ্যান্ডলার নিবন্ধন পরীক্ষা করতে দেয়। আরও জানতে, পরীক্ষা URL প্রোটোকল হ্যান্ডলার নিবন্ধন দেখুন।
- আইকন বিভাগটি আপনার নির্দিষ্ট করা প্রতিটি আইকন প্রদর্শন করে এবং আপনাকে তাদের মুখোশ পরীক্ষা করতে দেয়।
- বিভাগগুলির শর্টকাট #N সেট আপনার সমস্ত শর্টকাট বস্তুর তথ্য প্রদর্শন করে।
- বিভাগের স্ক্রিনশট #N সেট আপনার অ্যাপের একটি সমৃদ্ধ ইনস্টলেশন UI এর জন্য স্ক্রিনশটগুলি প্রদর্শন করে।
উপরন্তু, যদি DevTools একটি ত্রুটির সম্মুখীন হয়, যেমন একটি আইকন যা লোড করা যায় না, ম্যানিফেস্ট ট্যাব ত্রুটি বর্ণনা করে একটি ইনস্টলেবিলিটি বিভাগ প্রদর্শন করে।
মাস্কযোগ্য আইকনগুলি দেখুন এবং পরীক্ষা করুন
ম্যানিফেস্ট ট্যাবের আইকন বিভাগটি আপনার অ্যাপ্লিকেশনের সমস্ত আইকন প্রদর্শন করে। এই বিভাগে, আপনি মাস্কযোগ্য আইকনগুলির জন্য নিরাপদ এলাকাগুলিও পরীক্ষা করতে পারেন, প্ল্যাটফর্মগুলির সাথে মানিয়ে নেওয়া আইকনগুলির বিন্যাস৷
আইকন ট্রিম করতে যাতে শুধুমাত্র ন্যূনতম নিরাপদ এলাকা দৃশ্যমান হয়, চেক করুন 
মাস্কযোগ্য আইকনগুলির জন্য শুধুমাত্র ন্যূনতম নিরাপদ এলাকা দেখান ৷
যদি আপনার সম্পূর্ণ লোগোটি নিরাপদ এলাকায় দৃশ্যমান হয়, তাহলে আপনি যেতে পারবেন।
ট্রিগার ইনস্টলেশন
ক্রোম আপনার PWA এর ইউজার ইন্টারফেসের মধ্যে সরাসরি ইন্সটলেশন চালু এবং প্রচার করা সম্ভব করে তোলে। কীভাবে আপনার নিজের অ্যাপ-মধ্যস্থ ইনস্টলেশন অভিজ্ঞতা প্রদান করবেন তা শিখুন।
আপনার PWA এর ইনস্টলেশন প্রবাহকে ট্রিগার করতে:
- Chrome এ PWA এর ল্যান্ডিং পৃষ্ঠা খুলুন।
উপরের ঠিকানা বারের ডান পাশে, ক্লিক করুন
ইনস্টল করুন । 
অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন.
অ্যাপ ইনস্টল করুন ফিচারটি মোবাইল ডিভাইসের জন্য ওয়ার্কফ্লো অনুকরণ করতে পারে না। DevTools ডিভাইস মোডে থাকা সত্ত্বেও কীভাবে ডেস্কটপ ক্রোম ব্রাউজার ঠিকানা বারে ইনস্টলেশন বোতামটি প্রদর্শন করে তা লক্ষ্য করুন। যাইহোক, যদি আপনি সফলভাবে আপনার অ্যাপটি আপনার ডেস্কটপে যোগ করতে পারেন, তাহলে এটি মোবাইলের জন্যও কাজ করবে।
আপনি যদি প্রকৃত মোবাইল অভিজ্ঞতা পরীক্ষা করতে চান, তাহলে আপনি দূরবর্তী ডিবাগিংয়ের মাধ্যমে একটি বাস্তব মোবাইল ডিভাইসকে DevTools-এর সাথে সংযুক্ত করতে পারেন। সংযুক্ত মোবাইল ডিভাইসে ইনস্টলেশন ট্রিগার করতে, খুলুন 
তিন-বিন্দু মেনু এবং ক্লিক করুন 
অ্যাপ ইনস্টল করুন ।
শর্টকাট পরিদর্শন করুন
অ্যাপ শর্টকাট আপনাকে ব্যবহারকারীদের প্রায়শই প্রয়োজন এমন কিছু সাধারণ ক্রিয়াকলাপে দ্রুত অ্যাক্সেস প্রদান করতে দেয়।
আপনার ম্যানিফেস্ট ফাইলে আপনার সংজ্ঞায়িত শর্টকাটগুলি পরিদর্শন করতে, ম্যানিফেস্ট ট্যাবের শর্টকাট #N বিভাগে স্ক্রোল করুন।
একটি সমৃদ্ধ ইনস্টলেশন UI এর জন্য স্ক্রিনশটগুলি পরিদর্শন করুন৷
যখন আপনি আপনার ম্যানিফেস্ট ফাইলে একটি বিবরণ এবং স্ক্রিনশটের একটি সেট যোগ করেন, তখন আপনার অ্যাপটি একটি সমৃদ্ধ ইনস্টলেশন ডায়ালগ পায়৷
স্ক্রিনশটগুলি পরিদর্শন করতে, ম্যানিফেস্ট ট্যাবের স্ক্রিনশট #N বিভাগে স্ক্রোল করুন৷
ইউআরএল প্রোটোকল হ্যান্ডলার রেজিস্ট্রেশন পরীক্ষা করুন
PWA গুলি এমন লিঙ্কগুলি পরিচালনা করতে পারে যা আরও সমন্বিত অভিজ্ঞতার জন্য একটি নির্দিষ্ট প্রোটোকল ব্যবহার করে। কিভাবে একটি হ্যান্ডলার তৈরি করতে হয় তা জানতে, PWA-এর জন্য URL প্রোটোকল হ্যান্ডলার নিবন্ধন দেখুন।
আপনার হ্যান্ডলার পরীক্ষা করতে:
- আপনার PWA এর ল্যান্ডিং পৃষ্ঠায় DevTools খুলুন । উদাহরণস্বরূপ, এই ডেমো PWA দেখুন।
- ডেমো পৃষ্ঠা থেকে, PWA ইনস্টল করুন এবং ইনস্টলেশনের পরে অ্যাপটি পুনরায় লোড করুন। ব্রাউজারটি এখন
web+coffeeপ্রোটোকলের জন্য একটি হ্যান্ডলার হিসাবে PWA-কে নিবন্ধিত করেছে। - অ্যাপ্লিকেশন > ম্যানিফেস্ট > প্রোটোকল হ্যান্ডলার বিভাগে, আপনি যে ইউআরএলটি হ্যান্ডলার পরীক্ষা করতে চান সেটি লিখুন এবং টেস্ট প্রোটোকল ক্লিক করুন।
এই উদাহরণে, হ্যান্ডলার americano,chai, এবংlatte-macchiatoপ্রক্রিয়া করতে পারে। - যখন Chrome আপনাকে জিজ্ঞাসা করে যে এটি অ্যাপটি খুলতে পারে কিনা, প্রোটোকল হ্যান্ডলার খুলুন ক্লিক করে নিশ্চিত করুন৷
- পরবর্তী ডায়ালগে, অ্যাপটিকে
web+coffeeলিঙ্কগুলি পরিচালনা করার অনুমতি দিন।
হ্যান্ডলার সফলভাবে লিঙ্কটি প্রক্রিয়া করলে, আপনি অ্যাপে খোলা কফি কাপের একটি ছবি দেখতে পাবেন।
সেবা কর্মীরা
ভবিষ্যতের ওয়েব প্ল্যাটফর্মে পরিষেবা কর্মীরা একটি মৌলিক প্রযুক্তি। এগুলি এমন স্ক্রিপ্ট যা ব্রাউজারটি পটভূমিতে চালায়, একটি ওয়েব পৃষ্ঠা থেকে আলাদা৷ এই স্ক্রিপ্টগুলি আপনাকে এমন বৈশিষ্ট্যগুলি অ্যাক্সেস করতে সক্ষম করে যেগুলির জন্য কোনও ওয়েব পৃষ্ঠা বা ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রয়োজন নেই, যেমন পুশ বিজ্ঞপ্তি, ব্যাকগ্রাউন্ড সিঙ্ক এবং অফলাইন অভিজ্ঞতা৷
সম্পর্কিত নির্দেশিকা:
অ্যাপ্লিকেশান প্যানেলে পরিষেবা কর্মী ট্যাবটি পরিষেবা কর্মীদের পরিদর্শন এবং ডিবাগ করার জন্য DevTools-এর প্রধান স্থান৷
- যদি একজন পরিষেবা কর্মী বর্তমানে খোলা পৃষ্ঠায় ইনস্টল করা থাকে, তাহলে আপনি এটি এই ট্যাবে তালিকাভুক্ত দেখতে পাবেন। উদাহরণস্বরূপ, উপরের স্ক্রিনশটে
https://airhorner.com/এর সুযোগের জন্য একজন পরিষেবা কর্মী ইনস্টল করা আছে। - দ
অফলাইন চেকবক্স DevToolsকে অফলাইন মোডে রাখে। এটি নেটওয়ার্ক প্যানেল থেকে উপলব্ধ অফলাইন মোড বা কমান্ড মেনুতে Go offlineবিকল্পের সমতুল্য। - দ
রিলোড চেকবক্সের আপডেট পরিষেবা কর্মীকে প্রতিটি পৃষ্ঠা লোডের উপর আপডেট করতে বাধ্য করে। - দ
নেটওয়ার্ক চেকবক্সের জন্য বাইপাস পরিষেবা কর্মীকে বাইপাস করে এবং অনুরোধ করা সংস্থানগুলির জন্য ব্রাউজারকে নেটওয়ার্কে যেতে বাধ্য করে৷ - নেটওয়ার্ক অনুরোধের লিঙ্ক আপনাকে পরিষেবা কর্মী সম্পর্কিত বাধাপ্রাপ্ত অনুরোধগুলির একটি তালিকা সহ নেটওয়ার্ক প্যানেলে নিয়ে যায় (
is:service-worker-interceptedফিল্টার)। - আপডেট লিঙ্ক নির্দিষ্ট পরিষেবা কর্মীর একটি এককালীন আপডেট সম্পাদন করে।
- পুশ বোতামটি পেলোড ছাড়াই একটি পুশ বিজ্ঞপ্তি অনুকরণ করে (একটি সুড়সুড়ি নামেও পরিচিত)।
- সিঙ্ক বোতামটি একটি পটভূমি সিঙ্ক ইভেন্টকে অনুকরণ করে।
- নিবন্ধনমুক্ত লিঙ্কটি নির্দিষ্ট পরিষেবা কর্মীকে নিবন্ধনমুক্ত করে। একটি পরিষেবা কর্মীকে নিবন্ধনমুক্ত করার উপায় এবং একটি একক বোতাম ক্লিকের মাধ্যমে স্টোরেজ এবং ক্যাশে মুছে ফেলার উপায়ের জন্য ক্লিয়ার স্টোরেজ দেখুন।
- সোর্স লাইন আপনাকে বলে যে বর্তমানে চলমান পরিষেবা কর্মী কখন ইনস্টল করা হয়েছিল। লিঙ্কটি পরিষেবা কর্মীর সোর্স ফাইলের নাম। লিঙ্কে ক্লিক করলে আপনাকে পরিষেবা কর্মীর উৎসে পাঠানো হবে।
- স্ট্যাটাস লাইন আপনাকে পরিষেবা কর্মীর অবস্থা বলে। এই লাইনের নম্বরটি (স্ক্রিনশটে
#16) নির্দেশ করে যে পরিষেবা কর্মী কতবার আপডেট করা হয়েছে। আপনি সক্ষম হলে
রিলোড চেকবক্সের আপডেট আপনি লক্ষ্য করবেন যে প্রতিটি পৃষ্ঠা লোডের সংখ্যা বৃদ্ধি পাচ্ছে। স্ট্যাটাসের পাশে আপনি একটি স্টার্ট লিঙ্ক দেখতে পাবেন (যদি পরিষেবা কর্মী বন্ধ থাকে) বা একটি স্টপ লিঙ্ক (যদি পরিষেবা কর্মী চলছে)। পরিষেবা কর্মীদের যে কোনও সময় ব্রাউজার দ্বারা বন্ধ এবং শুরু করার জন্য ডিজাইন করা হয়েছে৷ স্টপ লিঙ্কটি ব্যবহার করে আপনার পরিষেবা কর্মীকে স্পষ্টভাবে থামানো এটি অনুকরণ করতে পারে। আপনার পরিষেবা কর্মীকে থামানো হল আপনার কোড কীভাবে আচরণ করে তা পরীক্ষা করার একটি দুর্দান্ত উপায় যখন পরিষেবা কর্মী আবার ব্যাক আপ শুরু করে। ক্রমাগত গ্লোবাল স্টেট সম্পর্কে ত্রুটিপূর্ণ অনুমানের কারণে এটি প্রায়শই বাগ প্রকাশ করে। - ক্লায়েন্ট লাইন আপনাকে বলে যে পরিষেবা কর্মীর স্কোপ করা হয়েছে। আপনার একাধিক নিবন্ধিত পরিষেবা কর্মী থাকলে ফোকাস বোতামটি বেশিরভাগই কার্যকর। আপনি যদি কোনও পরিষেবা কর্মীর পাশের ফোকাস বোতামে ক্লিক করেন যা একটি ভিন্ন ট্যাবে চলছে, Chrome সেই ট্যাবে ফোকাস করে৷
আপডেট সাইকেল টেবিলটি আপনাকে পরিষেবা কর্মীদের কার্যকলাপ এবং তাদের অতিবাহিত সময়গুলি দেখায়, যেমন ইনস্টল, অপেক্ষা করুন এবং সক্রিয় করুন৷ প্রতিটি কার্যকলাপের সঠিক টাইমস্ট্যাম্প দেখতে, ক্লিক করুন
বোতামগুলি প্রসারিত করুন । 
আরও তথ্যের জন্য, পরিষেবা কর্মীর জীবনচক্র দেখুন।
যদি পরিষেবা কর্মী কোনও ত্রুটি ঘটায়, পরিষেবা কর্মী ট্যাবটি একটি দেখায়৷ 
উৎস লাইনের পাশে ত্রুটির সংখ্যা সহ ত্রুটি আইকন। নম্বর সহ লিঙ্কটি আপনাকে সমস্ত লগ করা ত্রুটি সহ কনসোলে নিয়ে যায়।
সমস্ত পরিষেবা কর্মীদের তথ্য দেখতে, পরিষেবা কর্মী ট্যাবের নীচে সমস্ত নিবন্ধন দেখুন ক্লিক করুন৷ এই লিঙ্কটি chrome://serviceworker-internals/?devtools এ নিয়ে যায় যেখানে আপনি আপনার পরিষেবা কর্মীদের আরও ডিবাগ করতে পারেন।
সেবা কর্মী ক্যাশে
ক্যাশে স্টোরেজ ট্যাবটি (পরিষেবা কর্মী) ক্যাশে API ব্যবহার করে ক্যাশে করা সম্পদগুলির একটি শুধুমাত্র-পঠনযোগ্য তালিকা প্রদান করে।
মনে রাখবেন যে আপনি প্রথমবার একটি ক্যাশে খুললে এবং এতে একটি সংস্থান যোগ করলে, DevTools পরিবর্তনটি সনাক্ত নাও করতে পারে। পৃষ্ঠাটি পুনরায় লোড করুন এবং আপনার ক্যাশে দেখতে হবে।
যদি আপনার কাছে দুই বা তার বেশি ক্যাশে খোলা থাকে, আপনি সেগুলি ক্যাশে স্টোরেজ ড্রপ-ডাউনের নীচে তালিকাভুক্ত দেখতে পাবেন।
কোটা ব্যবহার
ক্যাশে স্টোরেজ ট্যাবের মধ্যে কিছু প্রতিক্রিয়া " অস্বচ্ছ " হিসাবে পতাকাঙ্কিত হতে পারে। এটি একটি ভিন্ন উত্স থেকে পুনরুদ্ধার করা একটি প্রতিক্রিয়া বোঝায়, যেমন একটি CDN বা দূরবর্তী API থেকে, যখন CORS সক্ষম না থাকে৷
ক্রস-ডোমেন তথ্য ফাঁস এড়াতে, স্টোরেজ কোটা সীমা গণনা করার জন্য ব্যবহৃত একটি অস্বচ্ছ প্রতিক্রিয়ার আকারে উল্লেখযোগ্য প্যাডিং যোগ করা হয়েছে (যেমন একটি QuotaExceeded ব্যতিক্রম নিক্ষেপ করা হয়েছে কিনা) এবং navigator.storage API দ্বারা রিপোর্ট করা হয়েছে।
এই প্যাডিংয়ের বিবরণ ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হয়, কিন্তু Google Chrome-এর জন্য, এর মানে হল যে কোনও একক ক্যাশে করা অস্বচ্ছ প্রতিক্রিয়া সামগ্রিক স্টোরেজ ব্যবহারে অবদান রাখে এমন ন্যূনতম আকার হল প্রায় 7 মেগাবাইট । আপনি কতগুলি অস্বচ্ছ প্রতিক্রিয়া ক্যাশে করতে চান তা নির্ধারণ করার সময় আপনার এটি মনে রাখা উচিত, যেহেতু আপনি অস্বচ্ছ সম্পদের প্রকৃত আকারের উপর ভিত্তি করে আশা করতে পারেন তার চেয়ে খুব তাড়াতাড়ি স্টোরেজ কোটার সীমা অতিক্রম করতে পারেন।
সম্পর্কিত নির্দেশিকা:
- স্ট্যাক ওভারফ্লো: অস্বচ্ছ প্রতিক্রিয়াগুলির জন্য কোন সীমাবদ্ধতা প্রযোজ্য?
- ওয়ার্কবক্স: স্টোরেজ কোটা বোঝা
সঞ্চয়স্থান পরিষ্কার করুন
প্রগতিশীল ওয়েব অ্যাপস তৈরি করার সময় ক্লিয়ার স্টোরেজ ট্যাব একটি খুব দরকারী বৈশিষ্ট্য। এই ট্যাবটি আপনাকে পরিষেবা কর্মীদের নিবন্ধনমুক্ত করতে এবং একটি বোতাম ক্লিকের মাধ্যমে সমস্ত ক্যাশে এবং স্টোরেজ সাফ করতে দেয়। আরও জানতে নীচের বিভাগটি দেখুন।
সম্পর্কিত নির্দেশিকা:
অন্যান্য অ্যাপ্লিকেশন প্যানেল গাইড
অ্যাপ্লিকেশন প্যানেলের অন্যান্য প্যানেলে আরও সাহায্যের জন্য নীচের নির্দেশিকাগুলি দেখুন।
সম্পর্কিত নির্দেশিকা: