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