Mobil cihazla yemek pişirirken en kötü şey, tarifin bir adımını uygularken ekranın kapanmasıdır. Yemek tarifleri sitesi BettyCrocker.com'un bu durumun yaşanmasını önlemek için Wake Lock API'yi nasıl kullandığını öğrenin.
Desteği sonlandırılan iOS ve Android uygulamaları
2014'te büyük bir tanıtımla piyasaya sürülen Betty Crocker, önceliği kaldırılan uygulamalarını 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 ediyordu. iOS/Android uygulamalarının oluşturulduğu teknik platform eskiydi ve işletmenin, uygulamaları güncellemeyi ve sürdürmeyi destekleyecek kaynakları yoktu. Web uygulaması, trafik açısından da çok daha büyük, daha modern ve geliştirilmesi daha kolaydı.
Ancak iOS/Android uygulamalarının kullanıcıların sevdiği bir müthiş özelliği vardı:
Y kuşağı aşçılara özel ipucu: @BettyCrocker mobil uygulamasında, tarifi uygularken ekran karartılmaz veya kilitlenmez. - @AvaBeilke
Kullanıcıların %80'i mutfakta bir cihazla yemek pişiriyor ancak ekranın karartılması ve kilitlenmesi bir sorun. @BettyCrocker ne yaptı? Uygulamalarını, kullanıcılar bir tarifteyken karartmayacak şekilde güncelledi. —@KatieTweedy
Wake Lock API ile web'e benzersiz bir özellik
Cihazla yemek pişirirken ekran kapandığında kirli ellerle veya hatta burnunuzla ekrana dokunmak kadar can sıkıcı bir şey yoktur. Betty Crocker, iOS/Android uygulamalarının en iyi özelliğini web uygulamasına nasıl taşıyabileceklerini merak etti. Bu sırada Project Fugu ve Wake Lock API hakkında bilgi edindiler.
Wake Lock API, cihazın ekran kararmasını veya kilitlenmesini önleyen bir yöntem sağlar. Bu özellik, şimdiye kadar iOS/Android uygulaması gerektiren yeni deneyimler sunar. Wake Lock API, hack'lenmiş ve potansiyel olarak güç tüketen geçici çözümlere olan ihtiyacı azaltır.
Uyanık kalma kilidi isteme
Uyanık kalma kilidi istemek için WakeLockSentinel nesnesi döndüren navigator.wakeLock.request() yöntemini çağırmanız gerekir. Bu nesneyi sentinel değeri olarak kullanırsınız.
Tarayıcı, isteği çeşitli nedenlerle reddedebilir (ör. pil çok düşük olduğu için). Bu nedenle, çağrıyı bir try…catch ifadesine sarmalamak iyi bir uygulamadır.
Uyanık kalma kilidini açma
Ayrıca, WakeLockSentinel nesnesinin release() yöntemini çağırarak elde edilen uyanık kalma kilidini serbest bırakacak bir yönteme ihtiyacınız vardır.
Belirli bir süre geçtikten sonra uyanma 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, tariflerde kolayca gezinebilir, adımları tamamlayabilir ve hatta ekran kilitlenmeden mutfaktan ayrılabilir. Ekip, bu hedefe ulaşmak için ilk olarak kavram kanıtı olarak ve kullanıcı deneyimi girdisi toplamak amacıyla hızlı bir ön uç prototipi oluşturdu.
Prototip faydalı olduktan 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ı olsa da üç sitenin paylaşılan bir kod tabanı var. Bu nedenle, aşağıdaki ekran görüntülerinde gösterildiği gibi bileşeni bir kez uygulayıp her yerde dağıtabildiler.
Bileşen, yeni sitenin modernleştirilmiş çerçevesine göre geliştirilirken MVVM modelinin ViewModel katmanına yoğunlaşıldı.
Ekip, sitenin eski ve yeni çerçevelerinde işlevselliği sağlamak için birlikte çalışabilirliği de göz önünde bulundurarak programlama yaptı.
Görüntülenebilirliği ve kullanılabilirliği takip etmek için Betty Crocker, uyanma kilidi yaşam döngüsündeki temel etkinlikler için analiz izlemeyi entegre etti. Ekip, özellik yönetiminden faydalanarak üretimin ilk kez kullanıma sunulması için uyanık kalma kilidi bileşenini tek bir siteye dağıttı. Ardından, kullanımı ve sayfa durumunu 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 güvenlik önlemi olarak, bir saat boyunca işlem yapılmadığında uyanma kilidini devre dışı bırakmak için zorunlu bir zaman aşımı oluşturdu. Son olarak, kısa vadede sitelerindeki tüm yemek tarifi sayfalarında bir açma/kapatma düğmesi kullanmaya karar verdiler. Uzun vadede, yenilenmiş bir yemek tarifi sayfası görünümü sunmayı 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 tamamında dağıtıldı ve mükemmel sonuçlar elde edildi. 10 Aralık 2019 ile 10 Ocak 2020 arasındaki dönemde BettyCrocker.com aşağıdaki metrikleri raporladı:
- Wake Lock API ile uyumlu bir tarayıcıya sahip olan tüm Betty Crocker kullanıcılarının% 3,5'i özelliği hemen etkinleştirdi.Bu da özelliği ilk 5 işlem arasına soktu.
- Uyanık kalma kilidini etkinleştiren kullanıcıların oturum süresi, bunu etkinleştirmeyen kullanıcılara göre 3,1 kat daha uzundu.
- Uyanık kalma kilidini etkinleştiren kullanıcıların hemen çıkma oranı, uyanık kalma kilidi özelliğini kullanmayanlara kıyasla% 50 daha düşüktü.
- Uyanma kilidi kullanıcılarının satın alma niyeti göstergeleri, 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 mükemmel sonuçlar elde etti. Bu özelliği, sitelerinden birinde (BettyCrocker, Pillsbury veya Tablespoon) en sevdiğiniz tarifi arayarak ve Yemek pişirirken ekranınızın kararmasını önle açma/kapatma düğmesini etkinleştirerek kendiniz test edebilirsiniz.
Uyandırma kilitlerinin kullanım alanları tarif siteleriyle sınırlı değildir. 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 uykuya geçmesini engelleyen web tabanlı sunu uygulamaları da bu kapsamdadır.
Wake Lock API hakkında bilmeniz gereken her şeyi bu sitedeki kapsamlı bir makalede derledik. Keyifli okumalar ve yemekler dileriz.
Teşekkür
Unsplash'te Julian Hochgesang'ın izniyle Yuvarlayan kişi fotoğrafı.