আরও অ্যাপ-এর মতো অভিজ্ঞতার জন্য ব্যাকগ্রাউন্ডে আপনার ওয়েব অ্যাপের ডেটা সিঙ্ক করা
আপনি কি কখনও নিম্নলিখিত পরিস্থিতিগুলির মধ্যে কোনওটিতে পড়েছেন?
- ট্রেন বা সাবওয়েতে কানেক্টিভিটি দুর্বল বা না থাকলে
- অনেক ভিডিও দেখার পরে আপনার পরিষেবা প্রদানকারী স্পিড কমিয়ে দিয়েছে
- এমন দেশে বসবাস করা যেখানে ব্যান্ডউইথ চাহিদার সাথে তাল মিলিয়ে চলতে পারে না
যদি করে থাকেন, তাহলে আপনি নিশ্চয়ই ওয়েব ব্রাউজারে কিছু কাজ করতে গিয়ে হতাশ হয়েছেন এবং ভেবেছেন যে কেন প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপগুলি প্রায়শই এইসব ক্ষেত্রে আরও ভাল পারফর্ম করে। প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ, খবরের নিবন্ধ বা আবহাওয়ার তথ্যের মতো ফ্রেশ কন্টেন্ট আগে থেকেই সংগ্রহ করতে পারে। এমনকি সাবওয়েতে নেটওয়ার্ক না থাকলেও, আপনি এখনও খবর পড়তে পারবেন।
কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক করার সুবিধা, ওয়েব অ্যাপ্লিকেশনকে ব্যাকগ্রাউন্ডে কিছু সময় পরপর ডেটা সিঙ্ক করতে দেয়। এর ফলে, ওয়েব অ্যাপগুলি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতো আচরণ করতে পারে।
এটি ব্যবহার করে দেখুন
DevTools Tips হল একটি PWA যা Periodic Background Sync API ব্যবহার করে। DevTools Tips PWA প্রতিদিন নতুন ডেভেলপার টুল সংক্রান্ত পরামর্শ সংগ্রহ করে এবং সেগুলি ক্যাশে সেভ করে, যাতে ব্যবহারকারীরা পরের বার অ্যাপ খোলার সময় সেগুলি অ্যাক্সেস করতে পারেন, তারা অনলাইন থাকুন বা না থাকুন। Periodic Background Sync API উপলভ্য হওয়ার জন্য অ্যাপ ইনস্টল করতে ভুলবেন না।
GitHub-এ সোর্স কোডে যান। বিশেষ করে, অ্যাপটি registerPeriodicSync() ফাংশনে পিরিয়ডিক সিঙ্ক রেজিস্টার করে। সার্ভিস ওয়ার্কার কোড হল সেই জায়গা যেখানে অ্যাপ periodicsync ইভেন্ট শোনে।
ধারণা ও ব্যবহার
প্রোগ্রেসিভ ওয়েব অ্যাপ বা সার্ভিস ওয়ার্কার-ব্যাকড পেজ লঞ্চ করা হলে, পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক আপনাকে ফ্রেশ কন্টেন্ট দেখাতে দেয়। অ্যাপ বা পৃষ্ঠা ব্যবহার না করার সময় ব্যাকগ্রাউন্ডে ডেটা ডাউনলোড করে এটি করা হয়। এর ফলে, অ্যাপের কন্টেন্ট দেখার সময় সেটি লঞ্চ করার পরে রিফ্রেশ হওয়া আটকানো যায়। আরও ভালভাবে বলতে গেলে, এটি রিফ্রেশ করার আগে অ্যাপকে কন্টেন্ট স্পিনার দেখাতে বাধা দেয়।
পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক না থাকলে, ওয়েব অ্যাপকে ডেটা ডাউনলোড করার জন্য বিকল্প পদ্ধতি ব্যবহার করতে হবে। একটি সাধারণ উদাহরণ হল, কোনও পরিষেবা ওয়ার্কারকে জাগিয়ে তোলার জন্য পুশ বিজ্ঞপ্তি ব্যবহার করা। ব্যবহারকারীকে 'নতুন ডেটা উপলভ্য' মেসেজের মতো কোনও মেসেজ দেখিয়ে বাধা দেওয়া হয়। ডেটা আপডেট করা হল মূলত একটি পার্শ্বপ্রতিক্রিয়া। তবে, এখনও আপনার কাছে সত্যিই গুরুত্বপূর্ণ আপডেটের জন্য পুশ বিজ্ঞপ্তি ব্যবহার করার বিকল্প আছে, যেমন উল্লেখযোগ্য ব্রেকিং নিউজ।
কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ককে ব্যাকগ্রাউন্ড সিঙ্কের সাথে গুলিয়ে ফেলা হতে পারে। যদিও এগুলির নাম একই রকম, তবে এগুলি আলাদা আলাদা কাজে লাগে। অন্যান্য জিনিসের মধ্যে, কোনও আগের অনুরোধ ব্যর্থ হলে, সার্ভারে ডেটা আবার পাঠানোর জন্য ব্যাকগ্রাউন্ড সিঙ্ক সবচেয়ে বেশি ব্যবহার করা হয়।
ব্যবহারকারীর এনগেজমেন্ট সঠিকভাবে পাওয়া
ভুলভাবে করা হলে, কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহারকারীর রিসোর্স নষ্ট করতে পারে। এটি রিলিজ করার আগে, Chrome এটি সঠিক আছে কিনা তা নিশ্চিত করতে ট্রায়াল পিরিয়ডের মধ্যে দিয়ে নিয়ে গেছে। এই ফিচারকে যতটা সম্ভব সহায়ক করে তোলার জন্য Chrome যেসব ডিজাইন সংক্রান্ত সিদ্ধান্ত নিয়েছে, এই বিভাগে সেগুলি ব্যাখ্যা করা হয়েছে।
Chrome-এর প্রথম ডিজাইন সংক্রান্ত সিদ্ধান্ত হল, কোনও ব্যক্তি তার ডিভাইসে কোনও ওয়েব অ্যাপ ইনস্টল করার পরে এবং সেটি একটি স্বতন্ত্র অ্যাপ্লিকেশন হিসেবে চালু করার পরে, সেই অ্যাপটি শুধুমাত্র পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহার করতে পারবে। Chrome-এর সাধারণ ট্যাবের ক্ষেত্রে পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক উপলভ্য নয়।
এছাড়াও, Chrome চায় না যে অব্যবহৃত বা কদাচিৎ ব্যবহৃত ওয়েব অ্যাপ অযথা
ব্যাটারি বা ডেটা খরচ করুক। তাই Chrome পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক ডিজাইন করেছে যাতে
ডেভেলপারদের ব্যবহারকারীদের ভ্যালু প্রদান করে এটি অর্জন করতে হয়। নির্দিষ্টভাবে বলতে গেলে,
Chrome একটি সাইট এনগেজমেন্ট স্কোর
(about://site-engagement/) ব্যবহার করে এটি নির্ধারণ করে যে কোনও প্রদত্ত ওয়েব অ্যাপের জন্য
কত ঘন ঘন পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক হতে পারে। অন্য কথায়, এনগেজমেন্ট
স্কোর শূন্যের চেয়ে বেশি না হলে periodicsync ইভেন্ট একেবারেই ফায়ার হবে না এবং এর মানটি
periodicsync ইভেন্ট ফায়ার হওয়ার ফ্রিকোয়েন্সি প্রভাবিত করে। এর ফলে, ব্যাকগ্রাউন্ডে শুধু সেইসব অ্যাপ সিঙ্ক হয় যেগুলি আপনি
সক্রিয়ভাবে ব্যবহার করছেন।
জনপ্রিয় প্ল্যাটফর্মে আগে থেকে থাকা API ও প্র্যাক্টিসের সাথে পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্কের কিছু মিল আছে। যেমন, কোনও ব্যক্তি পৃষ্ঠা বন্ধ করে দেওয়ার পরে, এককালীন ব্যাকগ্রাউন্ড সিঙ্ক করার পাশাপাশি পুশ বিজ্ঞপ্তি, ওয়েব অ্যাপের লজিককে একটু বেশি সময় ধরে চালু থাকতে দেয় (এর সার্ভিস ওয়ার্কারের মাধ্যমে)। বেশিরভাগ প্ল্যাটফর্মে, লোকজনের এমন অ্যাপ ইনস্টল করা সাধারণ ব্যাপার যা ব্যাকগ্রাউন্ডে নেটওয়ার্ক অ্যাক্সেস করে। এর উদ্দেশ্য হল গুরুত্বপূর্ণ আপডেট, কন্টেন্ট প্রিফেচ করা এবং ডেটা সিঙ্ক করার মতো অ্যাকশনের জন্য আরও ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করা। একইভাবে, পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্কও ওয়েব অ্যাপের লজিকের লাইফটাইম বাড়িয়ে দেয়, যাতে সেটি নিয়মিত বিরতিতে কিছু মিনিটের জন্য চলতে পারে।
ব্রাউজার যদি এটি ঘন ঘন এবং কোনও বিধিনিষেধ ছাড়াই ঘটতে দেয়, তাহলে এটি কিছু গোপনীয়তা সংক্রান্ত উদ্বেগের কারণ হতে পারে। Chrome কীভাবে কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক করার জন্য এই ঝুঁকি সমাধান করেছে তা এখানে দেওয়া হল:
- ব্যাকগ্রাউন্ড সিঙ্ক অ্যাক্টিভিটি শুধুমাত্র সেইসব নেটওয়ার্কে হয় যেগুলিতে ডিভাইস আগে কানেক্ট করেছে। Chrome শুধুমাত্র বিশ্বস্ত পার্টি দ্বারা পরিচালিত নেটওয়ার্কে কানেক্ট করার সাজেশন দেয়।
- ইন্টারনেটে হওয়া সব যোগাযোগের মতো, নির্দিষ্ট সময় অন্তর ব্যাকগ্রাউন্ড সিঙ্ক ক্লায়েন্টের IP অ্যাড্রেস, যে সার্ভারের সাথে কথা বলা হচ্ছে এবং সার্ভারের নাম প্রকাশ করে। অ্যাপটি শুধুমাত্র ফোরগ্রাউন্ডে থাকাকালীন সিঙ্ক করলে, এটি যতটা এক্সপোজড হত, সেই এক্সপোজারকে মোটামুটি সেই লেভেলে কমাতে, ব্রাউজার, কোনও অ্যাপের ব্যাকগ্রাউন্ড সিঙ্কের ফ্রিকোয়েন্সি সীমিত করে, যাতে এটি সেই ব্যক্তির অ্যাপ ব্যবহারের ফ্রিকোয়েন্সির সাথে সামঞ্জস্যপূর্ণ হয়। যদি ব্যক্তিটি অ্যাপের সাথে ঘন ঘন ইন্টার্যাক্ট করা বন্ধ করে দেয়, তাহলে পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক ট্রিগার করা বন্ধ হয়ে যাবে। এটি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের স্ট্যাটাস কোওয়ের তুলনায় সামগ্রিকভাবে উন্নত।
এটি কখন ব্যবহার করা যাবে?
ব্রাউজার অনুযায়ী ব্যবহারের নিয়ম আলাদা হয়। আগে যা বলা হয়েছে তার সারসংক্ষেপ করলে, Chrome কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক করার জন্য নিম্নলিখিত শর্ত আরোপ করে:
- ব্যবহারকারীর এনগেজমেন্টের একটি নির্দিষ্ট স্কোর।
- আগে ব্যবহার করা নেটওয়ার্কের উপস্থিতি।
সিঙ্ক্রোনাইজেশনের সময়সীমা ডেভেলপারদের দ্বারা নিয়ন্ত্রিত হয় না। অ্যাপ কত ঘন ঘন ব্যবহার করা হয় তার সাথে সিঙ্ক্রোনাইজেশন ফ্রিকোয়েন্সি অ্যালাইন করবে। (মনে রাখবেন যে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ এটি করে না।) এছাড়াও, এটি ডিভাইসের পাওয়ার ও কানেক্টিভিটি স্ট্যাটাস বিবেচনা করে।
এটি কখন ব্যবহার করা উচিত?
আপনার সার্ভিস ওয়ার্কার যখন কোনও periodicsync ইভেন্ট হ্যান্ডেল করার জন্য জেগে ওঠে, তখন আপনার কাছে ডেটা অনুরোধ করার
সুযোগ থাকে, তবে তা করার বাধ্যবাধকতা থাকে না। ইভেন্ট হ্যান্ডেল করার সময় আপনাকে
নেটওয়ার্কের অবস্থা ও উপলভ্য স্টোরেজ বিবেচনা করে দেখতে হবে এবং তার
প্রতিক্রিয়া হিসেবে বিভিন্ন পরিমাণে ডেটা ডাউনলোড করতে হবে। সাহায্যের জন্য আপনি
নিচের রিসোর্স ব্যবহার করতে পারেন:
অনুমতি
সার্ভিস ওয়ার্কার ইনস্টল হওয়ার পরে, অনুমতি
API ব্যবহার করে periodic-background-sync-এর
জন্য কোয়েরি করুন। আপনি এটি কোনও উইন্ডো বা
সার্ভিস ওয়ার্কার কনটেক্সট থেকে করতে পারবেন।
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
কিছু সময় পরপর সিঙ্ক করার জন্য রেজিস্টার করা
আগে যেমন বলা হয়েছে, কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্কের জন্য পরিষেবা কর্মী প্রয়োজন। ServiceWorkerRegistration.periodicSync ব্যবহার করে PeriodicSyncManager থেকে
কল লগ দেখুন এবং সেটিতে
register() করুন। রেজিস্টার করার জন্য ট্যাগ ও ন্যূনতম
সিঙ্ক্রোনাইজেশন ইন্টারভ্যাল (minInterval) দু'টিই প্রয়োজন। ট্যাগ রেজিস্টার করা সিঙ্ককে
শনাক্ত করে যাতে একাধিক সিঙ্ক রেজিস্টার করা যায়। নিচের উদাহরণে, ট্যাগ নেম
হল 'content-sync' এবং minInterval হল একদিন।
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
রেজিস্ট্রেশন যাচাই করা
রেজিস্ট্রেশন ট্যাগগুলির একটি অ্যারে রিট্রিভ করতে periodicSync.getTags()-এ কল করুন। নিচে দেওয়া উদাহরণে ট্যাগ নাম ব্যবহার করে নিশ্চিত করা হয়েছে যে ক্যাশে আপডেট করার প্রসেস চালু আছে যাতে
আবার আপডেট করতে না হয়।
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
এছাড়াও, আপনার ওয়েব
অ্যাপের সেটিংস পৃষ্ঠায় অ্যাক্টিভ রেজিস্ট্রেশনের তালিকা দেখাতে getTags() ব্যবহার করতে পারেন, যাতে ব্যবহারকারীরা নির্দিষ্ট ধরনের
আপডেট চালু বা বন্ধ করতে পারেন।
কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টে উত্তর দেওয়া
পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টে উত্তর দিতে, আপনার সার্ভিস ওয়ার্করে একটি periodicsync event
হ্যান্ডলার যোগ করুন। এতে পাস করা event অবজেক্টে রেজিস্ট্রেশনের সময় ব্যবহার করা ভ্যালুর সাথে ম্যাচ করা একটি
tag প্যারামিটার থাকবে। যেমন, যদি কোনও
পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্ক 'content-sync' নামে রেজিস্টার করা থাকে, তাহলে
event.tag হবে 'content-sync'।
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
সিঙ্ক করার সুবিধা আনরেজিস্টার করা
রেজিস্টার করা সিঙ্ক বন্ধ করতে, আপনি যে সিঙ্ক আনরেজিস্টার করতে চান তার নাম সহ periodicSync.unregister() কল করুন।
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
ইন্টারফেস
Periodic Background Sync API-এর দেওয়া ইন্টারফেসের একটি সংক্ষিপ্ত বিবরণ এখানে দেওয়া হল।
PeriodicSyncEvent. ব্রাউজারের বেছে নেওয়া সময়েServiceWorkerGlobalScope.onperiodicsyncইভেন্ট হ্যান্ডলারে পাঠানো হয়।PeriodicSyncManager. কিছু সময় পরপর সিঙ্ক করার সুবিধা রেজিস্টার ও আনরেজিস্টার করে এবং রেজিস্টার করা সিঙ্কের জন্য ট্যাগ প্রদান করে। ServiceWorkerRegistration.periodicSync` প্রপার্টি থেকে এই ক্লাসের একটি ইনস্ট্যান্স রিট্রিভ করুন।ServiceWorkerGlobalScope.onperiodicsync.PeriodicSyncEventপাওয়ার জন্য একটি হ্যান্ডলার রেজিস্টার করে।ServiceWorkerRegistration.periodicSync.PeriodicSyncManager-এর রেফারেন্স রিটার্ন করে।
উদাহরণ
নিম্নলিখিত বিভাগে, Periodic Background Sync API ব্যবহারের কিছু উদাহরণ দেখানো হয়েছে।
কন্টেন্ট আপডেট করা
নিচে দেওয়া উদাহরণে, কোনও খবরের সাইট বা ব্লগের জন্য
আপ-টু-ডেট নিবন্ধ ডাউনলোড ও ক্যাশে করতে, কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহার করা হয়েছে। ট্যাগের নাম লক্ষ্য করুন, যা
এই সিঙ্ক কী ধরনের তা নির্দেশ করে ('update-articles')। updateArticles()-এর কলটি event.waitUntil()-এর মধ্যে র্যাপ করা আছে, যাতে নিবন্ধগুলি
ডাউনলোড ও স্টোর করার আগে পরিষেবা কর্মী বন্ধ না হয়ে যায়।
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
আগে থেকে থাকা ওয়েব অ্যাপে কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক যোগ করা
আগে থেকেই থাকা PWA-তে কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক যোগ করার জন্য এইসব পরিবর্তন করতে হয়েছে। এই উদাহরণে, ওয়েব অ্যাপে পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্কের অবস্থা বর্ণনা করে এমন সহায়ক লগিং স্টেটমেন্টের সংখ্যা অন্তর্ভুক্ত।
Periodic Background Sync API ডিবাগ করা
লোকাল লেভেলে পরীক্ষা করার সময় পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্কের এন্ড-টু-এন্ড ভিউ পাওয়া কঠিন হতে পারে। অ্যাক্টিভ রেজিস্ট্রেশন, আনুমানিক সিঙ্ক ইন্টারভ্যাল ও অতীতের সিঙ্ক ইভেন্টের লগ সংক্রান্ত তথ্য আপনার ওয়েব অ্যাপের আচরণ ডিবাগ করার সময় মূল্যবান প্রসঙ্গ প্রদান করে। সৌভাগ্যবশত, আপনি Chrome DevTools-এর একটি পরীক্ষামূলক ফিচারের মাধ্যমে সেইসব তথ্য খুঁজে পেতে পারেন।
স্থানীয় অ্যাক্টিভিটি রেকর্ড করা
DevTools-এর কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক বিভাগটি কিছু সময় পরপর ব্যাকগ্রাউন্ড সিঙ্ক লাইফসাইকেলে মূল ইভেন্ট অনুযায়ী সাজানো হয়: সিঙ্কের জন্য রেজিস্টার করা, একটি ব্যাকগ্রাউন্ড সিঙ্ক করা এবং রেজিস্টার করা বাতিল করা। এইসব ইভেন্ট সম্পর্কে তথ্য পেতে, রেকর্ডিং শুরু করুন বিকল্পে ক্লিক করুন।
রেকর্ড করার সময়, ইভেন্ট অনুযায়ী DevTools-এ এন্ট্রি দেখা যাবে, সাথে প্রতিটির জন্য লগ করা প্রসঙ্গ ও মেটাডেটা থাকবে।
রেকর্ডিং একবার চালু করার পরে, এটি সর্বাধিক তিন দিন চালু থাকবে, এর ফলে DevTools ব্যাকগ্রাউন্ড সিঙ্ক সম্পর্কে লোকাল ডিবাগিং তথ্য ক্যাপচার করতে পারবে যা ভবিষ্যতে এমনকি কয়েক ঘণ্টা পরেও হতে পারে।
ইভেন্ট সিমুলেট করা
ব্যাকগ্রাউন্ড অ্যাক্টিভিটি রেকর্ড করা সহায়ক হলেও, এমন কিছু সময় থাকে যখন আপনি
periodicsync হ্যান্ডলারকে অবিলম্বে পরীক্ষা করতে চান, কোনও
ইভেন্ট স্বাভাবিক ক্যাডেন্সিতে ফায়ার হওয়ার জন্য অপেক্ষা না করেই।
আপনি Chrome DevTools-এর মধ্যে অ্যাপ্লিকেশন প্যানেলে সার্ভিস ওয়ার্কার বিভাগ ব্যবহার করে এটি করতে পারবেন। পিরিয়ডিক সিঙ্ক ফিল্ড আপনাকে ইভেন্টের জন্য ব্যবহার করার জন্য একটি ট্যাগ প্রদান করতে দেয় এবং যতবার আপনি চান ততবার এটি ট্রিগার করতে দেয়।
DevTools ইন্টারফেসের ব্যবহার
আপনি DevTools অ্যাপ্লিকেশন প্যানেলে পিরিওডিক ব্যাকগ্রাউন্ড সিঙ্ক বিভাগ দেখতে পাবেন।
