প্রায় এক শতাব্দী ধরে, বেটি ক্রোকার আমেরিকার আধুনিক রান্নার নির্দেশনা এবং বিশ্বস্ত রেসিপি বিকাশের উৎস। ১৯৯৭ সালে চালু হওয়া তাদের সাইট BettyCrocker.com আজ প্রতি মাসে ১ কোটি ২০ লক্ষেরও বেশি ভিজিটর পায়। ওয়েক লক API বাস্তবায়নের পর, তাদের ক্রয়ের ইচ্ছার সূচকগুলি সমস্ত ব্যবহারকারীর তুলনায় ওয়েক লক ব্যবহারকারীদের জন্য প্রায় ৩০০% বেশি ছিল ।
অবসরপ্রাপ্ত iOS এবং Android অ্যাপস
২০১৪ সালে ব্যাপক ধুমধাম করে মুক্তি পাওয়া বেটি ক্রোকার সম্প্রতি অ্যাপল অ্যাপ স্টোর এবং গুগল প্লে স্টোর থেকে তাদের অ্যাপগুলি সরিয়ে ফেলেছে, যখন সেগুলো অগ্রাধিকার থেকে বঞ্চিত করা হয়েছিল। দীর্ঘদিন ধরে, বেটি ক্রোকার টিম iOS/Android অ্যাপের পরিবর্তে মোবাইল সাইটে নতুন বৈশিষ্ট্য যুক্ত করা পছন্দ করে আসছে। iOS/Android অ্যাপগুলি যে প্রযুক্তিগত প্ল্যাটফর্মে তৈরি করা হয়েছিল তা পুরানো ছিল এবং অ্যাপগুলিকে আপডেট এবং রক্ষণাবেক্ষণের জন্য ব্যবসার কাছে পর্যাপ্ত সংস্থান ছিল না। ওয়েব অ্যাপটি ট্র্যাফিকের দিক থেকেও বস্তুনিষ্ঠভাবে অনেক বড়, আরও আধুনিক এবং উন্নত করা সহজ ছিল।
তবে iOS/Android অ্যাপগুলিতে একটি অসাধারণ বৈশিষ্ট্য ছিল যা তাদের ব্যবহারকারীরা পছন্দ করেছেন:
মিলেনিয়াল রান্নার পেশাদার টিপস: রেসিপি অনুসরণ করার সময় @BettyCrocker মোবাইল অ্যাপটি ম্লান বা লক হয় না। — @AvaBeilke
৮০% মানুষ রান্নাঘরে ডিভাইস দিয়ে রান্না করে, কিন্তু স্ক্রিনের আলো কমে যাওয়া এবং লক হওয়া একটি সমস্যা। @BettyCrocker কী করেছে? ব্যবহারকারীরা যখন রেসিপি দেখছেন তখন আলো কমে না এমনভাবে তাদের অ্যাপটি আপডেট করেছে। — @Katie Tweedy
ওয়েক লক এপিআই ব্যবহার করে কিলার ফিচারটি ওয়েবে আনা হচ্ছে
কোনও ডিভাইস দিয়ে রান্না করার সময়, স্ক্রিন বন্ধ হয়ে গেলে অগোছালো হাত দিয়ে স্ক্রিন স্পর্শ করার মতো হতাশাজনক আর কিছু হতে পারে না। বেটি ক্রোকার নিজেদের জিজ্ঞাসা করেছিলেন যে কীভাবে তারা তাদের iOS/Android অ্যাপের এই অত্যাধুনিক বৈশিষ্ট্যটি ওয়েব অ্যাপে পোর্ট করতে পারে। তখনই তারা Project Fugu এবং Wake Lock API সম্পর্কে জানতে পেরেছিলেন।
ওয়েক লক এপিআই ডিভাইসটিকে স্ক্রিনটি ম্লান বা লক করা থেকে বিরত রাখার একটি উপায় প্রদান করে। এই ক্ষমতা নতুন অভিজ্ঞতা প্রদান করে যা এখন পর্যন্ত iOS/Android অ্যাপের প্রয়োজন ছিল। ওয়েক লক এপিআই হ্যাকি এবং সম্ভাব্য পাওয়ার-ক্ষুধার্ত সমাধানের প্রয়োজনীয়তা হ্রাস করে।
একটি ওয়েক লকের অনুরোধ করা হচ্ছে
ওয়েক লকের অনুরোধ করতে, আপনাকে navigator.wakeLock.request() পদ্ধতিটি কল করতে হবে যা একটি WakeLockSentinel অবজেক্ট ফেরত দেয়। আপনি এই অবজেক্টটিকে সেন্টিনেল মান হিসাবে ব্যবহার করবেন। ব্রাউজার বিভিন্ন কারণে অনুরোধটি প্রত্যাখ্যান করতে পারে (উদাহরণস্বরূপ, কারণ ব্যাটারি খুব কম), তাই কলটি একটি try…catch স্টেটমেন্টে মোড়ানো একটি ভাল অভ্যাস।
একটি ওয়েক লক প্রকাশ করা হচ্ছে
আপনার একটি ওয়েক লক রিলিজ করারও একটি উপায় প্রয়োজন, যা WakeLockSentinel অবজেক্টের release() পদ্ধতি কল করে অর্জন করা হয়। যদি আপনি একটি নির্দিষ্ট সময় অতিবাহিত হওয়ার পরে স্বয়ংক্রিয়ভাবে ওয়েক লক রিলিজ করতে চান, তাহলে আপনি window.setTimeout() ব্যবহার করে release() কল করতে পারেন, যেমনটি নীচের উদাহরণে দেখানো হয়েছে।
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
বাস্তবায়ন
নতুন ওয়েব অ্যাপের মাধ্যমে, ব্যবহারকারীরা সহজেই রেসিপিটি নেভিগেট করতে, ধাপগুলি সম্পূর্ণ করতে এবং এমনকি স্ক্রিন লক না করেই চলে যেতে সক্ষম হবেন। এই লক্ষ্য অর্জনের জন্য, দলটি প্রথমে ধারণার প্রমাণ হিসাবে এবং UX ইনপুট সংগ্রহের জন্য একটি দ্রুত ফ্রন্ট-এন্ড প্রোটোটাইপ তৈরি করেছিল।
প্রোটোটাইপটি কার্যকর প্রমাণিত হওয়ার পর, তারা একটি Vue.js কম্পোনেন্ট তৈরি করে যা তাদের সমস্ত ব্র্যান্ডে ( BettyCrocker , Pillsbury , এবং Tablespoon ) ভাগ করা যেত। যদিও শুধুমাত্র Betty Crocker-এর iOS এবং Android অ্যাপ ছিল, তিনটি সাইটের একটি ভাগ করা কোড বেস রয়েছে, তাই তারা একবার কম্পোনেন্টটি বাস্তবায়ন করতে এবং সর্বত্র এটি স্থাপন করতে সক্ষম হয়েছিল, যেমনটি নীচের স্ক্রিনশটগুলিতে দেখানো হয়েছে।
নতুন সাইটের আধুনিকীকরণকৃত কাঠামোর উপর ভিত্তি করে কম্পোনেন্টটি তৈরি করার সময়, MVVM প্যাটার্নের ViewModel স্তরের উপর জোর দেওয়া হয়েছিল। দলটি সাইটের লিগ্যাসি এবং নতুন ফ্রেমওয়ার্কগুলিতে কার্যকারিতা সক্ষম করার জন্য আন্তঃকার্যক্ষমতার কথা মাথায় রেখেও প্রোগ্রামিং করেছিল।
দৃশ্যমানতা এবং ব্যবহারযোগ্যতার উপর নজর রাখার জন্য, বেটি ক্রোকার ওয়েক লকের জীবনচক্রের মূল ইভেন্টগুলির জন্য বিশ্লেষণ ট্র্যাকিং একীভূত করেছিলেন। দলটি প্রাথমিক উৎপাদন রোলআউটের জন্য একটি একক সাইটে ওয়েক লক উপাদান স্থাপনের জন্য বৈশিষ্ট্য ব্যবস্থাপনা ব্যবহার করেছিল এবং তারপর ব্যবহার এবং পৃষ্ঠার স্বাস্থ্য পর্যবেক্ষণের পরে বৈশিষ্ট্যটি বাকি সাইটগুলিতে স্থাপন করেছিল। তারা এই উপাদানের ব্যবহারের উপর ভিত্তি করে বিশ্লেষণ ডেটা পর্যবেক্ষণ করে চলেছে।
ব্যবহারকারীদের জন্য একটি ব্যর্থতা হিসেবে, দলটি এক ঘন্টা নিষ্ক্রিয়তার পরে ওয়েক লক নিষ্ক্রিয় করার জন্য একটি জোরপূর্বক টাইমআউট তৈরি করেছিল। তারা যে চূড়ান্ত বাস্তবায়নের সিদ্ধান্ত নিয়েছিল তা হল স্বল্পমেয়াদে তাদের সাইটের সমস্ত রেসিপি পৃষ্ঠাগুলিতে একটি টগল সুইচ। দীর্ঘমেয়াদে, তারা একটি পুনর্গঠিত রেসিপি পৃষ্ঠা ভিউ কল্পনা করে।
ওয়েক লক কন্টেইনার
var wakeLockControl = () => {
return import(/* webpackChunkName: 'wakeLock' */ './wakeLock');
};
export default {
components: {
wakeLockControl: wakeLockControl,
},
data() {
return {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: function(config) {
this.config = config || {};
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
this.wakeLockComponent = 'wakeLockControl';
} else {
console.log('Browser not supported');
}
},
},
};
ওয়েক লক উপাদান
<template>
<div class="wakeLock">
<div class="textAbove"></div>
<label class="switch" :aria-label="settingsInternal.textAbove">
<input type="checkbox" @change="onChange()" v-model="isChecked">
<span class="slider round"></span>
</label>
</div>
</template>
<script type="text/javascript">
import debounce from 'lodash.debounce';
const scrollDebounceMs = 1000;
export default {
props: {
settings: { type: Object },
},
data() {
return {
settingsInternal: this.settings || {},
isChecked: false,
wakeLock: null,
timerId: 0,
};
},
created() {
this.$_raiseAnalyticsEvent('Wake Lock Toggle Available');
},
methods: {
onChange: function() {
if (this.isChecked) {
this.$_requestWakeLock();
} else {
this.$_releaseWakeLock();
}
},
$_requestWakeLock: async function() {
try {
this.wakeLock = await navigator.wakeLock.request('screen');
//Start new timer
this.$_handleAbortTimer();
//Only add event listeners after wake lock is successfully enabled
document.addEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.addEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
this.$_raiseAnalyticsEvent('Wake Lock Toggle Enabled');
} catch (e) {
this.isChecked = false;
}
},
$_releaseWakeLock: function() {
try {
this.wakeLock.release();
this.wakeLock = null;
//Clear timer
this.$_handleAbortTimer();
//Clean up event listeners
document.removeEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.removeEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
} catch (e) {
console.log(`Wake Lock Release Error: ${e.name}, ${e.message}`);
}
},
$_handleAbortTimer: function() {
//If there is an existing timer then clear it and set to zero
if (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
//Start new timer; Will be triggered from toggle enabled or scroll event
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
//Handle navigating away from page/tab
if (this.isChecked) {
this.$_releaseWakeLock();
this.isChecked = false;
}
},
$_raiseAnalyticsEvent: function(eventType) {
let eventParams = {
EventType: eventType,
Position: window.location.pathname || '',
};
Analytics.raiseEvent(eventParams);
},
},
};
</script>
ফলাফল
Vue.js কম্পোনেন্টটি তিনটি সাইটেই স্থাপন করা হয়েছে এবং দুর্দান্ত ফলাফল প্রদান করেছে। ১০ ডিসেম্বর, ২০১৯ থেকে ১০ জানুয়ারী, ২০২০ সময়কালে, BettyCrocker.com নিম্নলিখিত মেট্রিক্স রিপোর্ট করেছে:
- ওয়েক লক এপিআই-এর সাথে সামঞ্জস্যপূর্ণ ব্রাউজার ব্যবহারকারী বেটি ক্রোকার ব্যবহারকারীদের মধ্যে ৩.৫% ব্যবহারকারী তাৎক্ষণিকভাবে এই বৈশিষ্ট্যটি সক্রিয় করে ফেলেন, যা এটিকে শীর্ষ-৫ অ্যাকশনে স্থান দেয়।
- যারা ওয়েক লক সক্ষম করেছেন তাদের সেশনের সময়কাল যারা করেননি তাদের তুলনায় ৩.১× বেশি ছিল।
- যারা ওয়েক লক চালু করেছেন তাদের বাউন্স রেট ওয়েক লক ফিচার ব্যবহার করেননি তাদের তুলনায় ৫০% কম ছিল।
- সকল ব্যবহারকারীর তুলনায় ওয়েক লক ব্যবহারকারীদের ক্রয়ের উদ্দেশ্যের সূচক প্রায় ৩০০% বেশি ছিল।
৩.১ ×
দীর্ঘ সেশনের সময়কাল
৫০ %
কম বাউন্স রেট
৩০০ %
উচ্চতর ক্রয় অভিপ্রায় সূচক
উপসংহার
বেটি ক্রোকার ওয়েক লক এপিআই ব্যবহার করে দুর্দান্ত ফলাফল দেখেছেন। আপনি তাদের যেকোনো সাইটে ( বেটিক্রোকার , পিলসবারি , অথবা টেবিলস্পুন ) আপনার পছন্দের রেসিপিটি অনুসন্ধান করে এবং রান্না করার সময় আপনার স্ক্রিন অন্ধকার হওয়া থেকে বিরত রাখুন টগল সক্ষম করে বৈশিষ্ট্যটি নিজেই পরীক্ষা করতে পারেন।
ওয়েক লকের জন্য ইউজ কেস শুধুমাত্র রেসিপি সাইটগুলিতেই সীমাবদ্ধ থাকে না। অন্যান্য উদাহরণ হল বোর্ডিং পাস বা টিকিট অ্যাপ যা বারকোড স্ক্যান না হওয়া পর্যন্ত স্ক্রিন চালু রাখতে হয়, কিয়স্ক-স্টাইল অ্যাপ যা স্ক্রিনটি ক্রমাগত চালু রাখে, অথবা ওয়েব-ভিত্তিক উপস্থাপনা অ্যাপ যা উপস্থাপনার সময় স্ক্রিনকে স্লিপ মোডে আটকাতে পারে।
ওয়েক লক এপিআই সম্পর্কে আপনার যা জানা দরকার তা আমরা এই সাইটে একটি বিস্তৃত নিবন্ধে সংকলিত করেছি। আনন্দের সাথে পড়ুন, এবং আনন্দের সাথে রান্না করুন!