Selama hampir satu abad, Betty Crocker telah menjadi sumber petunjuk memasak modern dan pengembangan resep tepercaya di Amerika. Diluncurkan pada tahun 1997, situs mereka, BettyCrocker.com, kini menerima lebih dari 12 juta pengunjung per bulan. Setelah menerapkan Wake Lock API, indikator niat pembelian mereka sekitar 300% lebih tinggi untuk pengguna wake lock dibandingkan dengan semua pengguna.
Aplikasi iOS dan Android yang dihentikan
Dirilis dengan banyak pujian pada tahun 2014, Betty Crocker baru-baru ini menghapus aplikasinya dari Apple App Store dan Google Play Store setelah aplikasi tersebut tidak diprioritaskan. Sejak lama, tim Betty Crocker lebih suka menambahkan fitur baru ke situs seluler daripada aplikasi iOS/Android. Platform teknis tempat aplikasi iOS/Android dibuat sudah usang, dan bisnis tidak memiliki sumber daya untuk mendukung pembaruan dan pemeliharaan aplikasi ke depannya. Aplikasi web juga secara objektif memiliki traffic yang jauh lebih besar, lebih modern, dan lebih mudah ditingkatkan.
Namun, aplikasi iOS/Android memiliki satu fitur unggulan yang disukai pengguna:
Tips memasak untuk milenial: aplikasi seluler @BettyCrocker tidak meredup atau terkunci saat Anda mengikuti resep. —@AvaBeilke
80% orang memasak dengan perangkat di dapur, tetapi peredupan dan penguncian layar menjadi masalah. Apa yang dilakukan @BettyCrocker? Memperbarui aplikasi mereka agar TIDAK meredup saat pengguna sedang melihat resep. —@KatieTweedy
Menghadirkan fitur unggulan ke web dengan Wake Lock API
Saat memasak dengan perangkat, tidak ada yang lebih membuat frustrasi daripada harus menyentuh layar dengan tangan yang kotor atau bahkan hidung saat layar mati. Betty Crocker bertanya-tanya bagaimana mereka dapat mem-porting fitur unggulan aplikasi iOS/Android mereka ke aplikasi web. Saat itulah mereka mempelajari Project Fugu dan Wake Lock API.
Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan atau mengunci layar. Kemampuan ini memungkinkan pengalaman baru yang, hingga saat ini, memerlukan aplikasi iOS/Android. Wake Lock API mengurangi kebutuhan akan solusi sementara yang tidak praktis dan berpotensi menguras daya.
Meminta penguncian layar saat aktif
Untuk meminta kunci tetap aktif, Anda perlu memanggil metode navigator.wakeLock.request()
yang menampilkan objek WakeLockSentinel. Anda akan menggunakan objek ini sebagai
nilai sentinel.
Browser dapat menolak permintaan karena berbagai alasan
(misalnya, karena daya baterai terlalu rendah),
jadi sebaiknya sertakan panggilan dalam pernyataan try…catch.
Melepaskan penguncian layar saat aktif
Anda juga memerlukan cara untuk melepaskan kunci tetap aktif, yang dilakukan dengan memanggil metode release() objek WakeLockSentinel.
Jika Anda ingin melepaskan kunci tetap aktif secara otomatis setelah jangka waktu tertentu berlalu,
Anda dapat menggunakan window.setTimeout() untuk memanggil release(), seperti yang ditunjukkan dalam contoh di bawah.
// 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);
Penerapan
Dengan aplikasi web baru, pengguna dapat dengan mudah menelusuri resep, menyelesaikan langkah-langkah, dan bahkan pergi tanpa mengunci layar. Untuk mencapai tujuan ini, tim pertama-tama membuat prototipe front-end cepat sebagai bukti konsep dan untuk mengumpulkan masukan UX.
Setelah prototipe terbukti berguna, mereka mendesain komponen Vue.js yang dapat dibagikan di semua merek mereka (BettyCrocker, Pillsbury, dan Tablespoon). Meskipun hanya Betty Crocker yang memiliki aplikasi iOS dan Android, ketiga situs tersebut memiliki codebase bersama, sehingga mereka dapat menerapkan komponen satu kali, dan men-deploy-nya di mana saja, seperti yang ditunjukkan pada screenshot di bawah.
Saat mengembangkan komponen berdasarkan framework baru situs yang dimodernisasi, ada fokus yang kuat pada lapisan ViewModel pola MVVM.
Tim juga memprogram dengan mempertimbangkan interoperabilitas
untuk mengaktifkan fungsi pada framework lama dan baru situs.
Untuk melacak visibilitas dan kegunaan, Betty Crocker mengintegrasikan pelacakan analisis untuk peristiwa inti dalam siklus proses kunci tetap aktif. Tim menggunakan pengelolaan fitur untuk men-deploy komponen kunci tetap aktif ke satu situs untuk peluncuran produksi awal, lalu men-deploy fitur tersebut ke situs lainnya setelah memantau penggunaan dan kesehatan halaman. Mereka terus memantau data analisis berdasarkan penggunaan komponen ini.
Sebagai tindakan pengamanan bagi pengguna, tim membuat waktu tunggu paksa untuk menonaktifkan kunci tetap aktif setelah satu jam tidak ada aktivitas. Penerapan akhir yang mereka putuskan adalah tombol pengaktif/penonaktif dalam jangka pendek di semua halaman resep di seluruh situs mereka. Dalam jangka panjang, mereka membayangkan tampilan halaman resep yang diubah.
Container penguncian layar saat aktif
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');
}
},
},
};
Komponen penguncian layar saat aktif
<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>
Hasil
Komponen Vue.js telah di-deploy di ketiga situs dan memberikan hasil yang luar biasa. Selama periode 10 Desember 2019 hingga 10 Januari 2020, BettyCrocker.com melaporkan metrik berikut:
- Dari semua pengguna Betty Crocker dengan browser yang kompatibel dengan Wake Lock API, 3,5% di antaranya langsung mengaktifkan fitur tersebut, sehingga menjadikannya tindakan 5 teratas.
- Durasi sesi untuk pengguna yang mengaktifkan kunci tetap aktif 3,1× lebih lama daripada untuk pengguna yang tidak mengaktifkannya.
- Rasio pentalan untuk pengguna yang mengaktifkan kunci tetap aktif 50% lebih rendah daripada pengguna yang tidak menggunakan fitur kunci tetap aktif.
- Indikator niat pembelian sekitar 300% lebih tinggi untuk pengguna kunci tetap aktif dibandingkan dengan semua pengguna.
3,1×
Durasi sesi yang lebih lama
50%
Rasio pantulan lebih rendah
300%
Indikator niat membeli yang lebih tinggi
Kesimpulan
Betty Crocker telah melihat hasil yang luar biasa menggunakan Wake Lock API. Anda dapat menguji fitur ini sendiri dengan menelusuri resep favorit Anda di salah satu situs mereka (BettyCrocker, Pillsbury, atau Tablespoon) dan mengaktifkan tombol Cegah layar Anda menjadi gelap saat Anda memasak.
Kasus penggunaan kunci tetap aktif tidak hanya terbatas pada situs resep. Contoh lainnya adalah aplikasi tiket atau boarding pass yang perlu menjaga layar tetap aktif hingga kode batang dipindai, aplikasi gaya kios yang menjaga layar tetap aktif secara terus-menerus, atau aplikasi presentasi berbasis web yang mencegah layar tidak aktif selama presentasi.
Kami telah menyusun semua yang perlu Anda ketahui tentang Wake Lock API dalam artikel komprehensif di situs ini. Selamat membaca, dan selamat memasak!