Mobil cihazla yemek yaparken ekranının kapatılmasından daha kötü bir şey olamaz. yemeği hazırlayabilirsiniz. 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'te çok büyük ilgiyle yayınlandı, Betty Crocker kısa süre önce uygulamalarını Apple App Store ve Google Play Store'dan kaldırdı nasıl değer kattığından bahsetmiştik. Betty Crocker ekibi, uzun süredir mobil siteye yeni özellikler eklemeyi tercih ediyor. tercih edebilirsiniz. iOS/Android uygulamalarının oluşturulduğu teknik platform eskiydi. ve işletmenin gerekli kaynakları ve sürekli olarak güncelleme yapılmasını sağlıyor. Web uygulaması, trafik açısından nesnel olarak çok daha büyüktü. ve geliştirilmesi daha kolay olur.
Bununla birlikte, iOS/Android uygulamalarının kullanıcılarının beğendiği bir katil özelliği de vardı:
Y kuşağı için yemek pişirme uzmanı ipucu: @BettyCrocker mobil uygulaması bir yemek tarifini uygularken kararmaz veya kilitlenmez. - @AvaBeilke
İnsanların% 80'i mutfaktaki bir cihazla yemek pişiriyor, ancak ekran karartma ve kilitleme sorun yaratıyor. @BettyCrocker ne yaptı? Uygulama, kullanıcılar yemek tarifindeyken Karart SAĞLANMAYACAK şekilde güncellendi. - @KatieTweedy
Wake Lock API ile muhteşem özelliği web'e taşıma
Cihazla yemek yaparken daha da sinir bozucu bir şey olamaz Ekran kapandığında dağınık ellerle, hatta burnunuzla dokunmak zorunda kalmaktan daha iyidir. Betty Crocker, iOS/Android uygulamalarının en iyi özelliğini nasıl aktarabileceklerini kendilerine sordu. web uygulamasına gönderebilirsiniz. Bu, ekip arkadaşlarının Project Fugu ve Wake Lock API.
Wake Lock API, cihazın önlenmesi için bir yol sağlar veya kilitlenmesini engeller. Bu özellik, şu ana kadar iOS/Android uygulaması gerektiren yeni deneyimlere olanak tanır. Uyandırma Kilidi API'si, bilgisayar korsanlığı yaratan ve potansiyel olarak güç harcayan çözümlere olan ihtiyacı azaltır.
Uyanık kalma kilidi isteme
Uyanık kalma kilidi istemek için navigator.wakeLock.request() yöntemini çağırmanız gerekir
WakeLockSentinel nesnesini döndürür. Bu nesneyi
koruyucu değeri.
Tarayıcı, isteği çeşitli nedenlerle reddedebilir
(örneğin, pil seviyesi çok düşük olduğu için)
Bu nedenle, görüşmeyi bir try…catch ifadesinde birleştirmek iyi bir uygulamadır.
Uyanık kalma kilidini açma
Uyanık kalma kilidini açmak için bir yönteme de ihtiyacınız var.
Bu işlem, WakeLockSentinel nesnesinin release() yöntemi çağrılarak gerçekleştirilir.
Uyanık kalma kilidini belirli bir süre geçtikten sonra otomatik olarak serbest bırakmak isterseniz
release() öğesini çağırmak için aşağıdaki örnekte gösterildiği gibi window.setTimeout() 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 yemek tarifinde kolayca gezinebilmelerine, bile olsa ekranı kilitlemeden yürüyebilirsiniz. Bu hedefe ulaşmak için ekip önce hızlı bir kullanıcı arabirimi prototipi oluşturdu bir kavram kanıtlamak ve kullanıcı deneyimiyle ilgili görüş toplamaktır.
Prototipin kullanışlı olduğunu fark ettikten sonra, test kullanıcısı Vue.js bileşeni tüm markalarına sunulabilen (BettyCrocker, Pillsbury ve Tablespoon). Sadece Betty Crocker'ın iOS ve Android uygulamaları olsa da üç sitenin de ortak bir kod tabanı olduğunu ve Böylece bileşeni bir kez uygulayıp her yerde dağıtabildiler aşağıdaki ekran görüntülerinde gösterildiği gibi.
Bileşeni yeni sitenin modernleştirilmiş çerçevesine dayalı olarak geliştirirken
tedarikçilerin kullanımına
MVVM kalıbının ViewModel katmanı.
Ekip ayrıca birlikte çalışabilirliği göz önünde bulundurarak program yaptı
ve sitenin eski ve yeni çerçevelerinde işlevselliği etkinleştirin.
Betty Crocker, görüntülenebilirlik ve kullanılabilirliği takip etmek için Analytics izleme, temel olaylar için geçerlidir. Ekip, uyanık kalma kilidi bileşenini dağıtmak için özellik yönetiminden yararlandı üretim lansmanı için tek bir siteye, 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 hata güvenliği sağlamak amacıyla zorunlu bir zaman aşımı oluşturdu tuşuna basarak uyanık kalma kilidini devre dışı bırakabilirsiniz. Anlaştıkları nihai uygulama kısa süreli olarak sitelerindeki tüm yemek tarifi sayfalarında açma/kapatma düğmesi vardı. Uzun vadede, yemek tarifleri sayfasının görünümünü yeniledi.
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ıldı ve mükemmel sonuçlar sağladı. 10 Aralık 2019 ile 10 Ocak 2020 tarihleri arasındaki dönemde BettyCrocker.com aşağıdaki metrikleri bildirdi:
- Wake Lock API ile uyumlu bir tarayıcıya sahip tüm Betty Crocker kullanıcılarının Kullanıcıların% 3, 5'i bu özelliği hemen etkinleştirerek en iyi 5 işlem arasına girdi.
- Uyanık kalma kilidini etkinleştiren kullanıcıların oturum süresi 3,1 kat daha uzundu kullanıcılara kıyasla daha değerlidir.
- Uyanık kalma kilidini etkinleştiren kullanıcıların hemen çıkma oranı% 50 daha düşüktü (uyanık kalma kilidi özelliğini kullanmayanlara göre daha yüksektir.
- Satın alma amacı göstergeleri, uyanık kalma 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 muhteşem sonuçlar elde etti. Bu özelliği, kendi sitelerinde en sevdiğiniz tarifi arayarak kendiniz test edebilirsiniz. (BettyCrocker, Pillsbury veya Tablespoon) Yemek pişirme sırasında ekranınızın kararmasını önleyin seçeneğini etkinleştirin.
Uyanık kalma kilitlerinin kullanım alanları tarif alanlarında bitmez. Ekranı açık tutması gereken biniş kartı veya bilet uygulamaları da buna örnek gösterilebilir. Barkod taranana kadar ekranı sürekli açık tutan kiosk tarzı uygulamalar, veya web tabanlı sunu uygulamaları ya da sunu sırasında ekranın uyku moduna geçmesini engelleyen web tabanlı sunu uygulamaları.
Wake Lock API hakkında bilmeniz gereken her şeyi derledik ayrıntılı bir şekilde inceleyebilirsiniz. Keyifli okumalar, mutlu yemek pişirmeler!
Teşekkür
Hamur yoğuran kişi adlı kullanıcının fotoğrafı: Julian Hochgesang Unsplash'i açın.