আপনার PWA আরও একটি অ্যাপের মতো অনুভব করুন

আপনার প্রগ্রেসিভ ওয়েব অ্যাপটিকে একটি ওয়েবসাইটের মতো মনে না করে একটি "বাস্তব" অ্যাপের মতো করে তুলুন৷

টমাস স্টেইনার
টমাস স্টেইনার

আপনি যখন প্রগ্রেসিভ ওয়েব অ্যাপ বাজওয়ার্ড বিঙ্গো খেলবেন, তখন "PWAs শুধুমাত্র ওয়েবসাইট" এ সেট করা একটি নিরাপদ বাজি। মাইক্রোসফ্টের পিডব্লিউএ ডকুমেন্টেশন সম্মত , আমরা এটি এই সাইটেই বলি , এমনকি PWA মনোনীত ফ্রান্সেস বেরিম্যান এবং অ্যালেক্স রাসেলও তাই লিখেছেন । হ্যাঁ, পিডব্লিউএগুলি কেবলমাত্র ওয়েবসাইট, তবে সেগুলি এর চেয়েও বেশি। সঠিকভাবে করা হলে, একটি PWA একটি ওয়েবসাইটের মতো মনে হবে না, কিন্তু একটি "বাস্তব" অ্যাপের মতো। এখন এটি একটি বাস্তব অ্যাপ মত মনে মানে কি?

এই প্রশ্নের উত্তর দিতে, আমাকে একটি উদাহরণ হিসাবে Apple Podcasts অ্যাপ ব্যবহার করতে দিন। এটি ডেস্কটপে macOS এবং মোবাইলে iOS (এবং iPadOS যথাক্রমে) এ উপলব্ধ। পডকাস্ট একটি মিডিয়া অ্যাপ্লিকেশন হলেও, এর সাহায্যে আমি যে মূল ধারণাগুলি তুলে ধরছি তা অন্যান্য অ্যাপের ক্ষেত্রেও প্রযোজ্য।

একটি আইফোন এবং একটি ম্যাকবুক পাশাপাশি, উভয়ই পডকাস্ট অ্যাপ্লিকেশন চালাচ্ছে।
অ্যাপল পডকাস্ট আইফোনে এবং ম্যাকোসে ( উৎস )।

অফলাইনে চলতে সক্ষম

আপনি যদি একধাপ পিছিয়ে যান এবং আপনার মোবাইল ফোন বা ডেস্কটপ কম্পিউটারে থাকা প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনগুলির কথা ভাবেন, একটি জিনিস স্পষ্টভাবে দাঁড়িয়েছে: আপনি কখনই কিছুই পাবেন না। Podcasts অ্যাপে, আমি অফলাইনে থাকলেও সবসময় কিছু না কিছু থাকে। যখন কোনো নেটওয়ার্ক সংযোগ নেই, তখনও অ্যাপটি স্বাভাবিকভাবেই খোলে। টপ চার্ট বিভাগটি কোন বিষয়বস্তু দেখায় না, কিন্তু এর পরিবর্তে একটি পুনঃচেষ্টা বোতামের সাথে যুক্ত এখনই সংযোগ করা যাবে না বার্তায় ফিরে আসে। এটি সবচেয়ে স্বাগত জানানোর অভিজ্ঞতা নাও হতে পারে, তবে আমি কিছু পেয়েছি।

পডকাস্ট অ্যাপটি 'এখনই সংযোগ করতে পারে না' দেখাচ্ছে। কোনো নেটওয়ার্ক সংযোগ উপলব্ধ না হলে তথ্য বার্তা।
নেটওয়ার্ক সংযোগ ছাড়াই পডকাস্ট অ্যাপ।
ওয়েবে এটি কীভাবে করবেন

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

অফলাইন সামগ্রী উপলব্ধ এবং মিডিয়া প্লেযোগ্য

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

একটি পডকাস্ট চালানোর একটি ডাউনলোড করা পর্ব সহ পডকাস্ট অ্যাপ।
ডাউনলোড করা পডকাস্ট পর্বগুলি এমনকি নেটওয়ার্ক ছাড়াই চালানো যেতে পারে।
ওয়েবে এটি কীভাবে করবেন

পূর্বে ডাউনলোড করা মিডিয়া বিষয়বস্তু ক্যাশে থেকে পরিবেশন করা যেতে পারে, উদাহরণস্বরূপ ওয়ার্কবক্স লাইব্রেরি থেকে সার্ভ ক্যাশেড অডিও এবং ভিডিও রেসিপি ব্যবহার করে। অন্যান্য বিষয়বস্তু সর্বদা ক্যাশে বা IndexedDB-তে সংরক্ষণ করা যেতে পারে। সমস্ত বিবরণের জন্য এবং কখন কোন স্টোরেজ প্রযুক্তি ব্যবহার করতে হবে তা জানতে ওয়েবের জন্য স্টোরেজ নিবন্ধটি পড়ুন। যদি আপনার কাছে এমন ডেটা থাকে যা মেমরির উপলব্ধ পরিমাণ কম হয়ে গেলে শুদ্ধ হওয়ার ঝুঁকি ছাড়াই ক্রমাগতভাবে সংরক্ষণ করা উচিত, তাহলে আপনি Persistent Storage API ব্যবহার করতে পারেন।

সক্রিয় পটভূমি ডাউনলোড

আমি যখন অনলাইনে ফিরে আসি, আমি অবশ্যই http 203 এর মতো একটি ক্যোয়ারী সহ বিষয়বস্তু অনুসন্ধান করতে পারি, এবং যখন আমি অনুসন্ধান ফলাফলে সদস্যতা নেওয়ার সিদ্ধান্ত নিই, HTTP 203 পডকাস্ট , সিরিজের সর্বশেষ পর্ব অবিলম্বে ডাউনলোড করা হয়, কোন প্রশ্ন জিজ্ঞাসা করা হয় না।

সাবস্ক্রাইব করার পরপরই পডকাস্ট অ্যাপ পডকাস্টের সর্বশেষ পর্ব ডাউনলোড করে।
একটি পডকাস্ট সাবস্ক্রাইব করার পরে, সর্বশেষ পর্বটি অবিলম্বে ডাউনলোড করা হয়৷
ওয়েবে এটি কীভাবে করবেন

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

শেয়ার করা এবং অন্যান্য অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করা

পডকাস্ট অ্যাপ অন্যান্য অ্যাপ্লিকেশনের সাথে স্বাভাবিকভাবেই একত্রিত হয়। উদাহরণস্বরূপ, যখন আমি আমার পছন্দের একটি পর্বে রাইট-ক্লিক করি, তখন আমি এটিকে আমার ডিভাইসের অন্যান্য অ্যাপে শেয়ার করতে পারি, যেমন মেসেজ অ্যাপ। এটি স্বাভাবিকভাবেই সিস্টেম ক্লিপবোর্ডের সাথে একত্রিত হয়। আমি যেকোন পর্বে রাইট-ক্লিক করতে পারি এবং এটির একটি লিঙ্ক কপি করতে পারি।

পডকাস্ট অ্যাপের প্রসঙ্গ মেনু 'শেয়ার পর্ব → বার্তা' বিকল্পটি বেছে নিয়ে একটি পডকাস্ট পর্বে আহ্বান করা হয়েছে।
বার্তা অ্যাপে একটি পডকাস্ট পর্ব শেয়ার করা হচ্ছে।
ওয়েবে এটি কীভাবে করবেন

ওয়েব শেয়ার এপিআই এবং ওয়েব শেয়ার টার্গেট এপিআই আপনার অ্যাপকে টেক্সট, ফাইল, এবং ডিভাইসে থাকা অন্যান্য অ্যাপ্লিকেশানের লিঙ্কগুলি শেয়ার করতে এবং গ্রহণ করতে দেয়। যদিও একটি ওয়েব অ্যাপের পক্ষে অপারেটিং সিস্টেমের অন্তর্নির্মিত রাইট-ক্লিক মেনুতে মেনু আইটেমগুলি যোগ করা এখনও সম্ভব নয়, ডিভাইসে থাকা অন্যান্য অ্যাপগুলির সাথে লিঙ্ক করার এবং থেকে অনেকগুলি উপায় রয়েছে৷ Async ক্লিপবোর্ড API এর সাথে, আপনি সিস্টেম ক্লিপবোর্ডে প্রোগ্রাম্যাটিকভাবে পাঠ্য এবং চিত্র ডেটা (PNG চিত্র) পড়তে এবং লিখতে পারেন। অ্যান্ড্রয়েডে, আপনি ডিভাইসের পরিচিতি পরিচালক থেকে এন্ট্রি নির্বাচন করতে যোগাযোগ পিকার API ব্যবহার করতে পারেন। আপনি যদি একটি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ এবং একটি PWA উভয়ই অফার করেন, তাহলে আপনি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে Get Installed Related Apps API ব্যবহার করতে পারেন, সেক্ষেত্রে আপনাকে PWA ইনস্টল করতে বা গ্রহণ করতে ব্যবহারকারীকে উৎসাহিত করতে হবে না। ওয়েব পুশ বিজ্ঞপ্তি।

ব্যাকগ্রাউন্ড অ্যাপ রিফ্রেশ করছে

Podcasts অ্যাপের সেটিংসে, আমি স্বয়ংক্রিয়ভাবে নতুন পর্ব ডাউনলোড করতে অ্যাপটিকে কনফিগার করতে পারি। যে মত, আমি এমনকি এটা সম্পর্কে চিন্তা করতে হবে না, আপডেট কন্টেন্ট সবসময় শুধু সেখানে থাকবে. জাদু.

পডকাস্ট অ্যাপের সেটিংস মেনু 'সাধারণ' বিভাগে যেখানে 'রিফ্রেশ পডকাস্ট' বিকল্পটি 'প্রতি ঘণ্টায়' সেট করা আছে।
পডকাস্ট প্রতি ঘন্টায় নতুন পডকাস্ট পর্ব পরীক্ষা করার জন্য কনফিগার করা হয়েছে।
ওয়েবে এটি কীভাবে করবেন

পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্ক এপিআই আপনার অ্যাপটিকে এটির চলমান প্রয়োজন ছাড়াই ব্যাকগ্রাউন্ডে নিয়মিতভাবে এর সামগ্রী রিফ্রেশ করতে দেয়। এর অর্থ হল নতুন বিষয়বস্তু সক্রিয়ভাবে উপলব্ধ, তাই আপনার ব্যবহারকারীরা যখনই সিদ্ধান্ত নেবে তখনই এটির মধ্যে ঢোকা শুরু করতে পারে৷

ক্লাউডের উপরে রাজ্য সিঙ্ক্রোনাইজ করা হয়েছে

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

'অ্যাডভান্সড' বিভাগে পডকাস্ট অ্যাপের সেটিংস মেনু যেখানে 'ডিভাইস জুড়ে সাবস্ক্রিপশন সিঙ্ক করুন' বিকল্পটি সক্রিয় করা হয়েছে।
রাজ্য মেঘের উপর সিঙ্ক্রোনাইজ করা হয়।
ওয়েবে এটি কীভাবে করবেন

অ্যাপ্লিকেশান স্টেট ডেটা সিঙ্ক করা হল এমন একটি কাজ যা আপনি পটভূমি সিঙ্ক API এ অর্পণ করতে পারেন৷ সিঙ্ক অপারেশন নিজেই অবিলম্বে ঘটতে হবে না, শুধু শেষ পর্যন্ত , এবং এমনকি যখন ব্যবহারকারী ইতিমধ্যেই আবার অ্যাপটি বন্ধ করে দিয়েছে তখনও।

হার্ডওয়্যার মিডিয়া কী নিয়ন্ত্রণ

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

টীকাযুক্ত মিডিয়া কী সহ অ্যাপল ম্যাকবুক প্রো ম্যাজিক কীবোর্ড।
মিডিয়া কীগুলি পডকাস্ট অ্যাপ ( উত্স ) নিয়ন্ত্রণ করার অনুমতি দেয়।
ওয়েবে এটি কীভাবে করবেন

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

মাল্টিটাস্কিং এবং অ্যাপ শর্টকাট

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

ম্যাকওএস টাস্ক সুইচার যার থেকে বেছে নেওয়ার জন্য অনেকগুলি অ্যাপ আইকন রয়েছে, যার মধ্যে একটি হল পডকাস্ট অ্যাপ।
Podcasts অ্যাপে ফিরে মাল্টিটাস্কিং।
ওয়েবে এটি কীভাবে করবেন

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

প্রসঙ্গ মেনুতে দ্রুত অ্যাকশন

সবচেয়ে সাধারণ অ্যাপ অ্যাকশন, নতুন বিষয়বস্তুর জন্য অনুসন্ধান করুন এবং নতুন পর্বের জন্য চেক করুন , সরাসরি ডকের অ্যাপের প্রসঙ্গ মেনু থেকে উপলব্ধ। বিকল্প মেনুর মাধ্যমে, আমি লগইন করার সময় অ্যাপটি খোলার সিদ্ধান্ত নিতে পারি।

পডকাস্ট অ্যাপ আইকন প্রসঙ্গ মেনু 'অনুসন্ধান' এবং 'নতুন পর্বের জন্য চেক করুন' বিকল্পগুলি দেখাচ্ছে।
দ্রুত অ্যাকশন সরাসরি অ্যাপ আইকন থেকে পাওয়া যায়।
ওয়েবে এটি কীভাবে করবেন

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

ডিফল্ট অ্যাপ হিসেবে কাজ করুন

অন্যান্য iOS অ্যাপ্লিকেশন এবং এমনকি ওয়েবসাইট বা ইমেলগুলি podcasts:// URL স্কিম ব্যবহার করে পডকাস্ট অ্যাপের সাথে একীভূত হতে পারে। আমি যদি ব্রাউজারে থাকাকালীন podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 এর মতো একটি লিঙ্ক অনুসরণ করি, তাহলে আমাকে সরাসরি পডকাস্ট অ্যাপে নিয়ে আসা হবে এবং আমি সাবস্ক্রাইব করার বা পডকাস্ট শোনার সিদ্ধান্ত নিতে পারি।

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

সম্পূর্ণ কাস্টম ইউআরএল স্কিমগুলি পরিচালনা করা এখনও সম্ভব নয়, তবে পিডব্লিউএগুলির জন্য ইউআরএল প্রোটোকল হ্যান্ডলিং- এর প্রস্তাবের উপর কাজ চলছে। বর্তমানে, একটি web+ স্কিম প্রিফিক্স সহ registerProtocolHandler() হল সেরা বিকল্প।

স্থানীয় ফাইল সিস্টেম ইন্টিগ্রেশন

আপনি অবিলম্বে এটি মনে করতে পারেন না, কিন্তু Podcasts অ্যাপ স্বাভাবিকভাবেই স্থানীয় ফাইল সিস্টেমের সাথে একীভূত হয়। যখন আমি একটি পডকাস্ট পর্ব ডাউনলোড করি, আমার ল্যাপটপে এটি ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache এ সংরক্ষিত থাকে। এর বিপরীতে, বলুন ~/Documents , এই ডিরেক্টরিটি অবশ্যই নিয়মিত ব্যবহারকারীদের দ্বারা সরাসরি অ্যাক্সেস করার জন্য নয়, তবে এটি রয়েছে। ফাইল ছাড়া অন্যান্য স্টোরেজ মেকানিজম অফলাইন কন্টেন্ট বিভাগে উল্লেখ করা হয়েছে।

macOS ফাইন্ডার পডকাস্ট অ্যাপের সিস্টেম ডিরেক্টরিতে নেভিগেট করেছে।
পডকাস্ট পর্বগুলি একটি বিশেষ সিস্টেম অ্যাপ ফোল্ডারে সংরক্ষণ করা হয়।
ওয়েবে এটি কীভাবে করবেন

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

প্ল্যাটফর্ম চেহারা এবং অনুভূতি

পডকাস্টের মতো একটি আইওএস অ্যাপ্লিকেশনের জন্য আরও সূক্ষ্ম জিনিস রয়েছে যা স্বতঃপ্রকাশ্য: কোনও পাঠ্য লেবেল নির্বাচনযোগ্য নয় এবং সমস্ত পাঠ্য মেশিনের সিস্টেম ফন্টের সাথে মিশে যায়। এছাড়াও সিস্টেম রঙের থিম (ডার্ক মোড) আমার পছন্দ সম্মানিত।

ডার্ক মোডে পডকাস্ট অ্যাপ।
পডকাস্ট অ্যাপ হালকা এবং অন্ধকার মোড সমর্থন করে।
হালকা মোডে পডকাস্ট অ্যাপ।
অ্যাপটি ডিফল্ট সিস্টেম ফন্ট ব্যবহার করে।
ওয়েবে এটি কীভাবে করবেন

none মান না দিয়ে user-select সিএসএস প্রপার্টি ব্যবহার করে, আপনি UI উপাদানগুলিকে ভুলবশত নির্বাচিত হওয়া থেকে রক্ষা করতে পারেন। অ্যাপের বিষয়বস্তু অনির্বাচিত করার জন্য এই সম্পত্তির অপব্যবহার না করার জন্য নিশ্চিত হন। এটি শুধুমাত্র UI উপাদানগুলির জন্য ব্যবহার করা উচিত যেমন বোতাম পাঠ্য, ইত্যাদি। font-family CSS সম্পত্তির সিস্টেম-ui মান আপনাকে আপনার অ্যাপের জন্য ব্যবহার করা সিস্টেমের ডিফল্ট UI ফন্ট নির্দিষ্ট করতে দেয়। অবশেষে, আপনার অ্যাপটি ব্যবহারকারীর prefers-color-scheme পছন্দকে সম্মান করে, এটিকে ওভাররাইড করতে একটি ঐচ্ছিক ডার্ক মোড টগল সহ ব্যবহারকারীর রঙের স্কিম পছন্দকে মেনে চলতে পারে। সিদ্ধান্ত নেওয়ার জন্য আরেকটি জিনিস হতে পারে যে ব্রাউজারটি একটি স্ক্রলিং এলাকার সীমানায় পৌঁছানোর সময় কী করা উচিত, উদাহরণস্বরূপ, রিফ্রেশ করার জন্য কাস্টম পুল প্রয়োগ করা। এটি overscroll-behavior CSS সম্পত্তির সাথে সম্ভব।

কাস্টমাইজড শিরোনাম বার

আপনি যখন Podcasts অ্যাপ উইন্ডোটি দেখেন, আপনি লক্ষ্য করেন যে এতে একটি ক্লাসিক ইন্টিগ্রেটেড শিরোনাম বার এবং টুলবার নেই, যেমন, Safari ব্রাউজার উইন্ডো, কিন্তু একটি কাস্টমাইজড অভিজ্ঞতা যা প্রধান প্লেয়ার উইন্ডোতে ডক করা সাইডবারের মতো দেখায়।

সাফারি ব্রাউজারের ইন্টিগ্রেটেড টাইল বার এবং টুলবার।
পডকাস্ট অ্যাপের কাস্টমাইজড স্প্লিট কাস্টমাইজড টাইটেল বার।
সাফারি এবং পডকাস্টের কাস্টমাইজড শিরোনাম বার।
ওয়েবে এটি কীভাবে করবেন

যদিও বর্তমানে সম্ভব নয়, শিরোনাম বার কাস্টমাইজেশন এই মুহূর্তে কাজ করা হচ্ছে। আপনি (এবং করা উচিত), যাইহোক, আপনার অ্যাপ্লিকেশন উইন্ডোর চেহারা এবং অনুভূতি নির্ধারণ করতে এবং কোন ডিফল্ট ব্রাউজার নিয়ন্ত্রণগুলি-সম্ভাব্যভাবে সেগুলির কোনওটি দেখানো হবে না তা নির্ধারণ করতে ওয়েব অ্যাপের display এবং theme-color বৈশিষ্ট্যগুলি নির্দিষ্ট করতে পারেন।

চটকদার অ্যানিমেশন

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

'এপিসোড নোটস' ড্রয়ার সহ পডকাস্ট অ্যাপটি প্রসারিত হয়েছে।
অ্যাপ-মধ্যস্থ অ্যানিমেশন যেমন ড্রয়ার খোলার সময় চটকদার।
ওয়েবে এটি কীভাবে করবেন

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

কন্টেন্ট অ্যাপের বাইরে প্রকাশ করা হয়েছে

আইওএস-এর পডকাস্ট অ্যাপটি প্রকৃত অ্যাপ্লিকেশনের পরিবর্তে অন্যান্য স্থানে সামগ্রী দেখাতে পারে, উদাহরণস্বরূপ, সিস্টেমের উইজেট ভিউতে বা একটি সিরি সাজেশন আকারে। সক্রিয়, ব্যবহার-ভিত্তিক কল-টু-অ্যাকশন থাকা যার সাথে ইন্টারঅ্যাক্ট করার জন্য শুধুমাত্র একটি ট্যাপ প্রয়োজন তা পডকাস্টের মতো একটি অ্যাপের পুনরায় যোগদানের হারকে ব্যাপকভাবে বৃদ্ধি করতে পারে।

iOS উইজেট ভিউ পডকাস্ট অ্যাপ দেখাচ্ছে যা পডকাস্টের একটি নতুন পর্বের পরামর্শ দিচ্ছে।
অ্যাপের বিষয়বস্তু প্রধান পডকাস্ট অ্যাপের বাইরে দেখা যায়।
ওয়েবে এটি কীভাবে করবেন

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

লক স্ক্রিন মিডিয়া নিয়ন্ত্রণ উইজেট

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

লক স্ক্রিনে iOS মিডিয়া প্লেব্যাক উইজেট সমৃদ্ধ মেটাডেটা সহ একটি পডকাস্ট পর্ব দেখায়।
অ্যাপে বাজানো মিডিয়া লক স্ক্রিন থেকে নিয়ন্ত্রণ করা যায়।
ওয়েবে এটি কীভাবে করবেন

মিডিয়া সেশন API আপনাকে আর্টওয়ার্ক, ট্র্যাক শিরোনাম ইত্যাদির মতো মেটাডেটা নির্দিষ্ট করতে দেয় যা তারপর ব্রাউজারে লক স্ক্রীন, স্মার্টওয়াচ বা অন্যান্য মিডিয়া উইজেটে প্রদর্শিত হয়।

পুশ বিজ্ঞপ্তি

পুশ বিজ্ঞপ্তিগুলি ওয়েবে কিছুটা বিরক্তিকর হয়ে উঠেছে (যদিও বিজ্ঞপ্তি প্রম্পটগুলি এখন অনেক শান্ত )। কিন্তু সঠিকভাবে ব্যবহার করা হলে, তারা অনেক মান যোগ করতে পারে। উদাহরণস্বরূপ, iOS পডকাস্ট অ্যাপটি ঐচ্ছিকভাবে আমাকে পডকাস্টের নতুন পর্বের বিষয়ে অবহিত করতে পারে যা আমি সদস্যতা নিয়েছি বা নতুনের সুপারিশ করতে পারে, সেইসাথে নতুন অ্যাপ বৈশিষ্ট্য সম্পর্কে আমাকে সতর্ক করতে পারে।

iOS পডকাস্ট অ্যাপ 'নোটিফিকেশন' সেটিংস স্ক্রিনে 'নতুন পর্ব' নোটিফিকেশন টগল অ্যাক্টিভেটেড দেখাচ্ছে।
নতুন বিষয়বস্তু সম্পর্কে ব্যবহারকারীকে জানাতে অ্যাপগুলি পুশ বিজ্ঞপ্তি পাঠাতে পারে।
ওয়েবে এটি কীভাবে করবেন

পুশ এপিআই আপনার অ্যাপকে পুশ নোটিফিকেশন পাওয়ার অনুমতি দেয় যাতে আপনি আপনার পিডব্লিউএ এর আশেপাশে উল্লেখযোগ্য ইভেন্টগুলি সম্পর্কে আপনার ব্যবহারকারীদের অবহিত করতে পারেন। বিজ্ঞপ্তিগুলির জন্য যা ভবিষ্যতে একটি পরিচিত সময়ে ফায়ার করা উচিত এবং যার জন্য নেটওয়ার্ক সংযোগের প্রয়োজন নেই, আপনি বিজ্ঞপ্তি ট্রিগার API ব্যবহার করতে পারেন৷

অ্যাপ আইকন ব্যাজিং

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

iOS সেটিংস স্ক্রীন 'ব্যাজ' টগল সক্রিয় দেখাচ্ছে।
নতুন বিষয়বস্তু সম্পর্কে ব্যবহারকারীদের অবহিত করার জন্য অ্যাপ্লিকেশনগুলির জন্য ব্যাজগুলি একটি সূক্ষ্ম উপায়৷
ওয়েবে এটি কীভাবে করবেন

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

মিডিয়া প্লেব্যাক এনার্জি সেভার সেটিংসের চেয়ে অগ্রাধিকার নেয়

যখন পডকাস্ট মিডিয়া চলছে, তখন স্ক্রীন বন্ধ হতে পারে, কিন্তু সিস্টেম স্ট্যান্ডবাই মোডে প্রবেশ করবে না। অ্যাপগুলি ঐচ্ছিকভাবে স্ক্রীনকে জাগ্রত রাখতে পারে, উদাহরণস্বরূপ, গানের কথা বা ক্যাপশন প্রদর্শনের জন্য।

'এনার্জি সেভার' বিভাগে macOS পছন্দগুলি।
অ্যাপস স্ক্রিন জাগ্রত রাখতে পারে।
ওয়েবে এটি কীভাবে করবেন

স্ক্রিন ওয়েক লক এপিআই আপনাকে স্ক্রীন বন্ধ হওয়া থেকে আটকাতে দেয়। ওয়েবে মিডিয়া প্লেব্যাক স্বয়ংক্রিয়ভাবে সিস্টেমটিকে স্ট্যান্ডবাই মোডে প্রবেশ করতে বাধা দেয়।

একটি অ্যাপ স্টোরের মাধ্যমে অ্যাপ আবিষ্কার

পডকাস্ট অ্যাপটি macOS ডেস্কটপের অভিজ্ঞতার অংশ হলেও, iOS-এ এটি অ্যাপ স্টোর থেকে ইনস্টল করা দরকার। podcast , podcasts বা apple podcasts জন্য একটি দ্রুত অনুসন্ধান অবিলম্বে অ্যাপ স্টোরে অ্যাপটিকে চালু করে।

'পডকাস্ট'-এর জন্য iOS অ্যাপ স্টোর অনুসন্ধান পডকাস্ট অ্যাপ প্রকাশ করে।
ব্যবহারকারীরা অ্যাপ স্টোরে অ্যাপস আবিষ্কার করতে শিখেছেন।
ওয়েবে এটি কীভাবে করবেন

যদিও Apple অ্যাপ স্টোরে PWA-কে অনুমতি দেয় না, Android-এ, আপনি একটি বিশ্বস্ত ওয়েব অ্যাক্টিভিটিতে মোড়ানো আপনার PWA জমা দিতে পারেন। bubblewrap স্ক্রিপ্ট এটি একটি ব্যথাহীন অপারেশন করে তোলে। এই স্ক্রিপ্টটি অভ্যন্তরীণভাবে PWABuilder- এর অ্যান্ড্রয়েড অ্যাপ এক্সপোর্ট বৈশিষ্ট্যকে ক্ষমতা দেয়, যা আপনি কমান্ড লাইন স্পর্শ না করেই ব্যবহার করতে পারেন।

বৈশিষ্ট্য সারাংশ

নীচের সারণীটি সমস্ত বৈশিষ্ট্যগুলির একটি কম্প্যাক্ট ওভারভিউ দেখায় এবং ওয়েবে সেগুলি উপলব্ধি করার জন্য দরকারী সংস্থানগুলির একটি তালিকা প্রদান করে৷

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

উপসংহার

PWA গুলি 2015 সালে তাদের প্রবর্তনের পর থেকে অনেক দূর এগিয়েছে ৷ Project Fugu 🐡 এর পরিপ্রেক্ষিতে, ক্রস-কোম্পানি Chromium টিম শেষ অবশিষ্ট ফাঁকগুলি বন্ধ করার জন্য কাজ করছে৷ এই নিবন্ধে শুধুমাত্র কিছু উপদেশ অনুসরণ করার মাধ্যমে, আপনি টুকরো টুকরো সেই অ্যাপের মতো অনুভূতির কাছাকাছি যেতে পারেন এবং আপনার ব্যবহারকারীদের ভুলে যেতে পারেন যে তারা "শুধু একটি ওয়েবসাইট" নিয়ে কাজ করছে, কারণ, সত্যি বলতে, তাদের বেশিরভাগই আপনার অ্যাপটি কীভাবে তৈরি করা হয়েছে (এবং কেন তাদের উচিত?) চিন্তা করবেন না, যতক্ষণ না এটি একটি বাস্তব অ্যাপের মতো মনে হয়।

স্বীকৃতি

এই নিবন্ধটি কায়স বাস্ক , জো মেডলি , জোশুয়া বেল , ডিওন আলমার , অ্যাডে ওশিনে , পিট লেপেজ , স্যাম থরোগুড , রিলি গ্রান্ট এবং জেফ্রি ইয়াসকিন দ্বারা পর্যালোচনা করা হয়েছে।