পটভূমি সিঙ্ক উপস্থাপন করা হচ্ছে

Jake Archibald

প্রকাশিত: ০৮ ডিসেম্বর, ২০১৫

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

সমস্যাটি

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

কিন্তু কখনও কখনও, শুধু মাঝে মাঝে, আমরা সময় নষ্ট করতে চাই না। আদর্শ ব্যবহারকারীর অভিজ্ঞতা আরও এরকম:

1. পকেট থেকে ফোন বের করা।
2. ছোট লক্ষ্য অর্জন করুন।
3. ফোনটা আবার পকেটে।
4. জীবন আবার শুরু করো।

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

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

পরিষেবা কর্মীরা আপনাকে ক্যাশে থেকে কন্টেন্ট পরিবেশন করার সুযোগ দিয়ে পৃষ্ঠা লোডিং অংশটি সমাধান করে। কিন্তু যখন পৃষ্ঠাটিকে সার্ভারে কিছু পাঠাতে হয় তখন কী হবে?

এই মুহূর্তে, যদি ব্যবহারকারী কোনও বার্তায় "send" চাপেন, তাহলে তাদের স্পিনারের দিকে তাকিয়ে থাকতে হবে যতক্ষণ না এটি সম্পূর্ণ হয়। যদি তারা ট্যাবটি বন্ধ করার চেষ্টা করে, তাহলে আমরা onbeforeunload ব্যবহার করে একটি বার্তা প্রদর্শন করি, যেমন "না, আমার দরকার তুমি এই স্পিনারের দিকে আরও কিছুক্ষণ তাকাও। দুঃখিত"। যদি ব্যবহারকারীর কোনও সংযোগ না থাকে, তাহলে আমরা ব্যবহারকারীকে বলি "দুঃখিত, তোমাকে পরে ফিরে এসে আবার চেষ্টা করতে হবে"।

ব্যাকগ্রাউন্ড সিঙ্ক আপনাকে আরও ভালো করতে সাহায্য করে।

সমাধান

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

যদি ব্যবহারকারী কোনও সংযোগ না থাকা সত্ত্বেও কোনও বার্তা পাঠানোর চেষ্টা করেন, তাহলে সৌভাগ্যবশত, সংযোগ পাওয়ার পরে বার্তাটি ব্যাকগ্রাউন্ডে পাঠানো হয়।

এভাবে ব্যাকগ্রাউন্ডে পাঠাতে সক্ষম হওয়ার ফলে কর্মক্ষমতায় উন্নতিও হয়। অ্যাপটিকে বার্তা পাঠানোর ব্যাপারে এত বড় কিছু করার প্রয়োজন নেই, তাই এটি সরাসরি আউটপুটে বার্তা যোগ করতে পারে।

ব্যাকগ্রাউন্ড সিঙ্ক Chrome 49 থেকে পাওয়া যাচ্ছে।

ব্যাকগ্রাউন্ড সিঙ্কের জন্য কীভাবে অনুরোধ করবেন

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

পুশ মেসেজিংয়ের মতো, এটি ইভেন্ট টার্গেট হিসেবে একজন সার্ভিস ওয়ার্কারকে ব্যবহার করে, যা পৃষ্ঠাটি খোলা না থাকা অবস্থায় এটিকে কাজ করতে সক্ষম করে। শুরু করতে, একটি পৃষ্ঠা থেকে সিঙ্কের জন্য নিবন্ধন করুন:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

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

সিঙ্কের ট্যাগ নাম (উদাহরণস্বরূপ 'myFirstSync') একটি নির্দিষ্ট সিঙ্কের জন্য অনন্য হওয়া উচিত। যদি আপনি একটি মুলতুবি সিঙ্কের মতো একই ট্যাগ ব্যবহার করে একটি সিঙ্ক নিবন্ধন করেন, তাহলে এটি বিদ্যমান সিঙ্কের সাথে একত্রিত হয়। এর অর্থ হল ব্যবহারকারী যখনই কোনও বার্তা পাঠাবেন তখন আপনি "ক্লিয়ার-আউটবক্স" সিঙ্কের জন্য নিবন্ধন করতে পারবেন, কিন্তু যদি তারা অফলাইনে থাকাকালীন ৫টি বার্তা পাঠায়, তাহলে তারা অনলাইনে আসার পরে আপনি কেবল একটি সিঙ্ক পাবেন। ৫টি পৃথক সিঙ্ক ইভেন্ট পেতে, অনন্য ট্যাগ ব্যবহার করুন।

এখানে একটি ডেমো দেওয়া হল যা সিঙ্ক ইভেন্ট ব্যবহার করে একটি বিজ্ঞপ্তি দেখায়।

ব্যাকগ্রাউন্ড সিঙ্কের জন্য ব্যবহার করে

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

যদিও, আপনি এটি ব্যবহার করে ছোট ছোট ডেটা আনতেও পারেন।

অফলাইন উইকিপিডিয়া ডেমো

এটি সুপারচার্জিং পেজ লোডের জন্য আমি তৈরি করা অফলাইন উইকিপিডিয়া ডেমো। আমি তখন থেকে এতে কিছু ব্যাকগ্রাউন্ড সিঙ্ক ম্যাজিক যোগ করেছি।

এটি নিজে চেষ্টা করে দেখুন:

1. আপনার ব্রাউজারটি এই ট্যাবটি খোলা রাখুন।
2. বিমান মোড ব্যবহার করে অথবা ওয়াই-ফাই বন্ধ করে অফলাইনে যান।
3. অন্য একটি নিবন্ধের লিঙ্কে ক্লিক করুন।
4. আপনাকে বলা উচিত যে পৃষ্ঠাটি লোড হতে ব্যর্থ হয়েছে (পৃষ্ঠাটি লোড হতে কিছুটা সময় নিলে এটিও প্রদর্শিত হবে)।
5. বিজ্ঞপ্তিতে সম্মত হন।
6. ব্রাউজারটি বন্ধ করুন।
7. অনলাইনে যান
8. নিবন্ধটি ডাউনলোড, ক্যাশে এবং দেখার জন্য প্রস্তুত হলে আপনাকে বিজ্ঞপ্তি দেওয়া হবে!

এই প্যাটার্ন ব্যবহার করে, ব্যবহারকারী তাদের ফোনটি পকেটে রেখে তাদের জীবন চালিয়ে যেতে পারেন, কারণ তারা জানেন যে ফোনটি যখন তাদের পছন্দের জিনিসটি নিয়ে আসবে তখন তাদের সতর্ক করবে।

অনুমতিসমূহ

আমি যে ডেমোগুলি দেখিয়েছি সেগুলি ওয়েব বিজ্ঞপ্তি ব্যবহার করে, যার জন্য অনুমতির প্রয়োজন হয়, কিন্তু ব্যাকগ্রাউন্ড সিঙ্ক নিজেই তা করে না।

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

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

অবশ্যই, বাস্তব ব্যবহারের উপর ভিত্তি করে এই বিধিনিষেধগুলি শিথিল বা কঠোর হতে পারে।

প্রগতিশীল বর্ধন

আমরা যখন ব্যাকগ্রাউন্ড সিঙ্ক বেসলাইনে পরিণত হওয়ার জন্য অপেক্ষা করছি, তখন আপনি এটিকে একটি প্রগতিশীল বর্ধন হিসাবে ব্যবহার করতে পারেন:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

যদি সার্ভিস ওয়ার্কার বা ব্যাকগ্রাউন্ড সিঙ্ক উপলব্ধ না থাকে, তাহলে পৃষ্ঠার কন্টেন্টটি আজকের মতো পোস্ট করুন।

ব্যবহারকারীর ভালো সংযোগ থাকলেও ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহার করা মূল্যবান, কারণ এটি ডেটা পাঠানোর সময় নেভিগেশন এবং ট্যাব বন্ধ হওয়ার হাত থেকে রক্ষা করে।

ভবিষ্যৎ

আমরা ২০১৬ সালের প্রথমার্ধে Chrome-এর একটি স্থিতিশীল সংস্করণে ব্যাকগ্রাউন্ড সিঙ্ক পাঠানোর লক্ষ্য রাখি, একই সাথে একটি বৈকল্পিক, "পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্ক"-এ কাজ করার সময়। পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্কের মাধ্যমে, আপনি সময়ের ব্যবধান, ব্যাটারির অবস্থা এবং নেটওয়ার্কের অবস্থা দ্বারা সীমাবদ্ধ একটি ইভেন্টের জন্য অনুরোধ করতে পারেন। অবশ্যই এর জন্য ব্যবহারকারীর অনুমতির প্রয়োজন হবে এবং এই ইভেন্টগুলি কখন এবং কত ঘন ঘন সক্রিয় হয় তা ব্রাউজারের উপরও নির্ভর করবে। অন্য কথায়, একটি সংবাদ সাইট প্রতি ঘন্টায় সিঙ্ক করার জন্য অনুরোধ করতে পারে, তবে ব্রাউজারটি জানতে পারে যে আপনি কেবল 07:00 টায় সেই সাইটটি পড়েন, তাই সিঙ্কটি প্রতিদিন 06:50 টায় সক্রিয় হবে। এই ধারণাটি একবারের সিঙ্কিংয়ের চেয়ে একটু বেশি দূরে, তবে এটি আসছে।

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