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ı, tarifi uygularken ekranı karartmaz veya kilitlemez. —@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ı karartmasını veya kilitlemesini engellemenin bir yolunu 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
Uyandırma kilidi isteğinde bulunmak 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 kaldırma
Ayrıca, uyanma kilidini serbest bırakmak için bir yönteme ihtiyacınız vardır. Bu yöntem, WakeLockSentinel nesnesinin release() yöntemi çağrılarak elde edilir.
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 kullanıcı arayüzü prototipi oluşturdu.
Prototipin yararlı olduğunu kanıtlamasının ardından, tüm markalarında (BettyCrocker, Pillsbury ve Tablespoon) paylaşılabilen bir Vue.js bileşeni tasarladılar. Yalnızca Betty Crocker'ın iOS ve Android uygulamaları olsa da üç sitenin ortak bir kod tabanı olduğundan, bileşeni bir kez uygulayıp aşağıdaki ekran görüntülerinde gösterildiği gibi her yere 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, ilk üretim kullanıma sunma için uyanma kilidi bileşenini tek bir siteye dağıtmak amacıyla özellik yönetiminden yararlandı ve ardından kullanımı ve sayfa sağlığını izledikten sonra özelliği diğer sitelerin geri kalanına dağıttı. Bu bileşenin kullanımına dayalı 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. BettyCrocker.com, 10 Aralık 2019 ile 10 Ocak 2020 tarihleri arasında aşağıdaki metrikleri bildirmiştir:
- 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.
- Uyandırma kilidini etkinleştiren kullanıcıların oturum süresi, etkinleştirmeyen kullanıcılara kıyasla 3,1 kat daha uzundu.
- Uyandırma kilidini etkinleştiren kullanıcıların hemen çıkma oranı, uyandırma kilidi özelliğini kullanmayan kullanıcılara 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 herhangi 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 lezzetli yemekler dileriz.
Teşekkür ederiz
Hamur yoğuran kişi fotoğrafı Unsplash'taki Julian Hochgesang tarafından sağlanmıştır.