Mobil cihazla yemek pişirirken yemek tarifi adımlarının ortasında ekranın kapanması gibisi yoktur. Yemek pişirme sitesi BettyCrocker.com'un bunu önlemek için Wake Lock API'yi nasıl kullandığını öğrenin.
Kullanımdan kaldırılan iOS ve Android uygulamaları
2014 yılında takipçilerinizin ilgisini çekmek için yayınlanan Betty Crocker, önceliklerinin yıkılmasının ardından kısa süre önce uygulamalarını Apple App Store ve Google Play Store'dan kaldırdı. Betty Crocker ekibi uzun bir süredir iOS/Android uygulamaları yerine mobil siteye yeni özellikler eklemeyi tercih ediyor. iOS/Android uygulamalarının oluşturulduğu teknik platform güncelliğini yitirmişti ve işletme, uygulamaları güncellemeye ve sürdürmeye yönelik kaynaklara sahip değildi. Web uygulaması ayrıca trafik açısından nesnel olarak çok daha büyük, daha modern ve geliştirilmesi daha kolaydı.
Ancak iOS/Android uygulamalarının kullanıcılarının sevdiği bir etkileyici özelliği vardı:
Y kuşağına ait yemek pişirme konusunda uzman ipucu: Bir tarifi takip ederken @BettyCrocker mobil uygulaması, karartmaz veya kilitlenmiyor. - @AvaBeilke
Kullanıcıların% 80'i mutfakta yemek pişirse de ekranın kararması ve kilitlenmesi sorun teşkil ediyor. @BettyCrocker ne yaptı? Uygulamalarını, kullanıcılar yemek tarifindeyken ışığı karartmayacak şekilde güncellediler. - @KatieTweedy
Wake Lock API ile muhteşem özelliği web'e taşıyoruz
Bir cihazla yemek yaparken, dağınık ellerle ve hatta ekran kapandığında burnunuzla ekrana dokunmaktan daha sinir bozucu bir şey yoktur. Betty Crocker, iOS/Android uygulamalarının muhteşem özelliğini web uygulamasına nasıl taşıyabileceklerini kendilerine sordu. Project Fugu ve Wake Lock API hakkında bilgi edindikleri zaman oldu.
Wake Lock API, cihazın kararmasını veya ekranı kilitlemesini önlemenin bir yolunu sunar. Bu özellik, şimdiye kadar iOS/Android uygulaması gerektiren yeni deneyimleri mümkün kılıyor. Wake Lock API, bilgisayar korsanlığı ve potansiyel olarak çok fazla enerji 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 koruyucu değer olarak kullanacaksınız.
Tarayıcı, isteği çeşitli nedenlerle (örneğin, pil seviyesi çok düşük olduğu için) reddedebilir. Bu nedenle, çağrıyı try…catch ifadesine dahil etmek iyi bir uygulamadır.
Uyanık kalma kilidini serbest bırakma
Ayrıca, uyanık kalma kilidini açmak için bir yönteme ihtiyacınız vardır. Bu yöntem, WakeLockSentinel nesnesinin release() yöntemini çağırarak gerçekleştirilir.
Belirli bir süre sonra uyanık kalma kilidini otomatik olarak serbest bırakmak isterseniz aşağıdaki örnekte gösterildiği gibi release() işlevini çağırmak için window.setTimeout() işlevini kullanabilirsiniz.
// 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ın bir yemek tarifinde kolayca gezinebilmeleri, adımları tamamlayabilmeleri ve hatta ekran kilitlemeden uzaklaşabilmeleri sağlanmalıdır. Ekip, bu hedefe ulaşmak için öncelikle kavram kanıtlama olarak ve kullanıcı deneyimiyle ilgili girdileri toplamak üzere hızlı bir kullanıcı arabirimi prototipi oluşturdu.
Prototipin yararlı olduğu kanıtlandıktan sonra tüm markaları (BettyCrocker, Pillsbury ve Tablespoon) genelinde paylaşabilecek bir Vue.js bileşeni tasarladılar. Yalnızca Betty Crocker'ın iOS ve Android uygulamaları olsa da üç sitenin de 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 ağırlıklı olarak MVVM kalıbının ViewModel katmanına odaklanıldı.
Ekip ayrıca sitenin eski ve yeni çerçevelerinde işlevselliği etkinleştirmek için birlikte çalışabilirliği göz önünde bulundurarak programladı.
Betty Crocker, görüntülenebilirlik ve kullanılabilirliği takip etmek amacıyla uyanık kalma kilidi yaşam döngüsündeki temel etkinlikler için analiz izlemeyi entegre etti. Ekip, özellik yönetiminden yararlanarak uyanık kalma kilidi bileşenini üretimin ilk kullanıma sunumu için tek bir siteye dağıttı. Ardından, kullanımı ve sayfa durumunu izledikten sonra bu özelliği diğer sitelere dağıttı. Bu bileşenin kullanımına göre analiz verilerini izlemeye devam ediyorlar.
Ekip, kullanıcılar için bir hata güvenliği olarak, bir saat işlem yapılmadığında uyanık kalma kilidinin devre dışı bırakılması için zorunlu bir zaman aşımı oluşturdu. Karar verdikleri nihai uygulama, sitelerindeki tüm tarif sayfalarında kısa süreli bir açma/kapatma anahtarı kullanmaktı. Uzun vadede, yenilenmiş bir tarif sayfası görünümünü hayal ettiler.
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, üç siteye de dağıtılmış ve harika sonuçlar sağlamıştır. BettyCrocker.com, 10 Aralık 2019 ile 10 Ocak 2020 tarihleri arasında aşağıdaki metrikleri raporladı:
- Wake Lock API'si ile uyumlu bir tarayıcısı olan tüm Betty Crocker kullanıcılarının% 3,5'i, bu özelliği hemen etkinleştirerek özelliği ilk 5 işlemden biri haline getirdi.
- Uyanık kalma kilidini etkinleştiren kullanıcıların oturum süresi, 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ı, bu özelliği kullanmayanlara kıyasla% 50 daha düşüktü.
- Uyanık kalma kilidi kullanıcılarının satın alma amacı 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'sini kullanarak harika sonuçlar elde etti. Bu özelliği, en sevdiğiniz tarifin herhangi bir sitesinde (BettyCrocker, Pillsbury veya Tablespoon) arayarak ve Yemek pişirme sırasında ekranınızın kararmasını engelle düğmesini etkinleştirerek kendiniz test edebilirsiniz.
Uyanık kalma kilitlerinin kullanım alanları yemek tarifi sitelerinde sona ermez. Barkod taranana kadar ekranı açık tutması gereken biniş kartı veya bilet uygulamaları, ekranı sürekli açık tutan kiosk tarzı uygulamalar veya sunum sırasında ekranın uykuya geçmesini önleyen web tabanlı sunum uygulamaları bunlara örnek olarak verilebilir.
Wake Lock API hakkında bilmeniz gereken her şeyi bu sitedeki kapsamlı bir makalede derledik. Keyifli okumalar dileriz, afiyetler dileriz!
Teşekkür
Unsplash'te Julian Hochgesang'ın izniyle hamur yoğulayan kişinin fotoğrafı.