Betty Crocker, yaklaşık bir asırdır Amerika'da modern yemek pişirme talimatları ve güvenilir tarif geliştirme konusunda en çok tercih edilen kaynak olmuştur. 1997'de kullanıma sunulan BettyCrocker.com sitesi, bugün ayda 12 milyondan fazla ziyaretçi alıyor. Wake Lock API'yi uyguladıktan sonra, wake lock kullanıcıları için satın alma niyeti göstergeleri tüm kullanıcılara kıyasla yaklaşık% 300 daha yüksek oldu.
Kullanımdan kaldırılan iOS ve Android uygulamaları
2014'te büyük bir ilgiyle piyasaya sürülen Betty Crocker, uygulamalarını önceliği düşürüldükten sonra kısa süre önce Apple App Store ve Google Play Store'dan kaldırdı. Betty Crocker ekibi uzun süredir iOS/Android uygulamaları yerine mobil siteye yeni özellikler eklemeyi tercih ediyor. iOS/Android uygulamalarının oluşturulduğu teknik platform güncel değildi ve işletmenin, uygulamaların güncellenmesini ve bakımını destekleyecek kaynakları yoktu. Web uygulaması, trafik açısından da çok daha büyüktü, daha moderndi ve geliştirmesi daha kolaydı.
Ancak iOS/Android uygulamalarının kullanıcılar tarafından çok sevilen bir çok önemli özelliği vardı:
Millennial'lara özel yemek pişirme ipucu: @BettyCrocker mobil uygulaması, tarifleri takip ederken ekranı karartmaz veya kilitlemez. —@AvaBeilke
Kullanıcıların% 80'i mutfakta bir cihazla yemek pişiriyor ancak ekranın kararması ve kilitlenmesi sorun yaratıyor. @BettyCrocker ne yaptı? Kullanıcılar bir tarifteyken uygulamanın kararmaması için uygulamayı güncelledi. —@KatieTweedy
Wake Lock API ile web'e önemli bir özellik getirme
Cihazla yemek pişirirken, ekran kapandığında ekranı kirli ellerle veya hatta burnunuzla dokunmaktan daha sinir bozucu bir şey yoktur. Betty Crocker, iOS/Android uygulamalarındaki en önemli özelliği web uygulamasına nasıl taşıyabileceklerini merak etti. Bu sırada Project Fugu ve Wake Lock API hakkında bilgi edindiler.
Uyanık kalma kilidi API'si, cihazın ekranının kararmasını veya kilitlenmesini engellemenin bir yolunu sunar. Bu özellik, şimdiye kadar iOS/Android uygulaması gerektiren yeni deneyimler sunar. Wake Lock API, geçici ve muhtemelen güç tüketen çözümlere olan ihtiyacı azaltır.
Uyanık kalma kilidi isteğinde bulunma
Uyandırma kilidi isteğinde bulunmak için navigator.wakeLock.request() yöntemini çağırmanız gerekir. Bu yöntem, WakeLockSentinel nesnesini döndürür. Bu nesneyi sentinel değeri olarak kullanacaksınız.
Tarayıcı, çeşitli nedenlerle (ör. pilin çok az olması) isteği reddedebilir. Bu nedenle, aramayı bir try…catch ifadesiyle sarmak iyi bir uygulamadır.
Uyanık kalma kilidini serbest bırakma
Ayrıca, WakeLockSentinel nesnesinin release() yöntemi çağrılarak elde edilen bir uyandırma kilidini serbest bırakmanın bir yolunu da bulmanız gerekir.
Belirli bir süre geçtikten sonra uyandırma kilidini otomatik olarak serbest bırakmak istiyorsanız aşağıdaki örnekte gösterildiği gibi window.setTimeout() kullanarak release() işlevini çağırabilirsiniz.
// 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);
Uygulama
Yeni web uygulamasıyla kullanıcılar, tarifler arasında kolayca gezinebilir, adımları tamamlayabilir ve ekran kilitlenmeden uzaklaşabilir. Bu hedefe ulaşmak için ekip, önce bir kavram kanıtı olarak ve kullanıcı deneyimi girdilerini toplamak amacıyla hızlı bir ön uç prototipi oluşturdu.
Prototipin faydalı olduğu kanıtlandıktan sonra tüm markalarında (BettyCrocker, Pillsbury ve Tablespoon) paylaşılabilecek bir Vue.js bileşeni tasarladılar. Yalnızca Betty Crocker'ın iOS ve Android uygulamaları olmasına rağmen üç sitenin ortak bir kod tabanı vardı. Bu nedenle, bileşeni bir kez uygulayıp her yerde dağıtabildiler (aşağıdaki ekran görüntülerinde gösterildiği gibi).
Yeni sitenin modernleştirilmiş çerçevesine dayalı olarak bileşen geliştirilirken
MVVM kalıbının ViewModel katmanına güçlü bir şekilde odaklanıldı.
Ekip, sitenin eski ve yeni çerçevelerinde işlevselliği etkinleştirmek için birlikte çalışabilirliği de göz önünde bulundurarak programlama yaptı.
Betty Crocker, görünürlüğü ve kullanılabilirliği takip etmek için uyanık tutma yaşam döngüsündeki temel etkinlikler için analiz izlemeyi entegre etti. Ekip, ilk üretim lansmanı için uyandırma kilidi bileşenini tek bir siteye dağıtmak üzere özellik yönetimini kullandı. Ardından, kullanımı ve sayfa sağlığını izledikten sonra özelliği diğer sitelere dağıttı. Bu bileşenin kullanımına göre analiz verilerini izlemeye devam ederler.
Ekip, kullanıcılar için bir yedek olarak, bir saatlik işlem yapılmama süresinden sonra uyandırma kilidini devre dışı bırakmak üzere zorunlu bir zaman aşımı oluşturdu. Son olarak, kısa vadede sitelerindeki tüm tarif sayfalarında bir açma/kapatma düğmesi kullanmaya karar verdiler. Uzun vadede, yenilenmiş bir tarif sayfası görünümü planlıyorlar.
Uyanık kalma kilidi kapsayıcısı
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');
}
},
},
};
Uyanık kalma kilidi bileşeni
<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>
Sonuçlar
Vue.js bileşeni üç sitenin tümünde kullanıma sunuldu ve mükemmel sonuçlar elde edildi. BettyCrocker.com, 10 Aralık 2019 ile 10 Ocak 2020 arasındaki dönemde aşağıdaki metrikleri raporladı:
- Wake Lock API ile uyumlu bir tarayıcıya sahip tüm Betty Crocker kullanıcılarının% 3,5'i özelliği hemen etkinleştirerek ilk 5 işlem arasına girmesini sağladı.
- Uyanık tutma kilidini etkinleştiren kullanıcıların oturum süresi, etkinleştirmeyen kullanıcıların oturum süresinden 3,1 kat daha uzundu.
- Uyanık tutma kilidini etkinleştiren kullanıcıların hemen çıkma oranı, bu özelliği kullanmayanlara göre% 50 daha düşüktü.
- Satın alma amacı göstergeleri, uyandırma kilidi kullanıcıları için tüm kullanıcılara kıyasla yaklaşık% 300 daha yüksekti.
3,1×
Daha uzun oturum süresi
%50
Daha düşük hemen çıkma oranı
%300
Daha yüksek satın alma amacı göstergeleri
Sonuçlar
Betty Crocker, Wake Lock API'yi kullanarak harika sonuçlar elde etti. Özelliği kendiniz test etmek için bu sitelerden herhangi birinde (BettyCrocker, Pillsbury veya Tablespoon) en sevdiğiniz tarifi arayın ve Yemek pişirirken ekranınızın kararmasını önleyin açma/kapatma düğmesini etkinleştirin.
Uyanık tutma kilitlerinin kullanım alanları yemek tarifi siteleriyle sınırlı değildir. Diğer örnekler arasında, barkod taranana kadar ekranın açık kalması gereken biniş kartı veya bilet uygulamaları, ekranı sürekli açık tutan kiosk tarzı uygulamalar ya da sunum sırasında ekranın uyku moduna geçmesini engelleyen web tabanlı sunum uygulamaları yer alır.
Wake Lock API hakkında bilmeniz gereken her şeyi bu sitedeki kapsamlı bir makalede derledik. Keyifli okumalar ve keyifli yemekler!